Web Components

sw-click-to-call

View as MarkdownOpen in Claude

Drop-in call button — embed it anywhere on a page and clicking it dials a preconfigured destination, opening the full call UI in a modal.

1<sw-click-to-call
2  token="YOUR_GUEST_TOKEN"
3  destination="/private/sales"
4>
5  Call sales
6</sw-click-to-call>

sw-click-to-call is a thin wrapper around <sw-call-widget> configured in modal mode. The host renders only the green “Call” pill button; everything else (client init, SignalWire connection, media, controls, optional transcript) is delegated to the widget once the user clicks.

Use this element on marketing pages, support sites, or anywhere a single destination should be dialable with one click. For more elaborate scenarios (multiple destinations, custom UI, inline call) reach for <sw-call-widget> directly instead.

Class: SwClickToCall · Module: packages/web-components/src/components/sw-click-to-call.ts

class: SwClickToCall, sw-click-to-call

Fields

token
stringDefaults to ''

token field.

host
stringDefaults to ''

host field.

destination
stringDefaults to ''

destination field.

label
stringDefaults to 'Call'

label field.

audioOnly
booleanDefaults to false

audioOnly field.

Attributes

NameFieldInherited From
tokentoken
hosthost
destinationdestination
labellabel
audio-onlyaudioOnly

CSS Properties

NameDefaultDescription
--interactive-status-successBackground color of the call button.
--type-family-bodyButton font family (inherits the global tokens).
--type-size-bodyButton font size.
--radius-mdButton border radius.
--transition-fastHover-state transition duration.

Events

NameDetailDescription
sw-call-ended—Fired when the call reaches a terminal state for
sw-call-hangup—Fired only when the user clicks the hang-up
sw-dial—Fired when the user clicks the button and the underlying