Web Components

sw-call-widget

View as MarkdownOpen in Claude

All-in-one call widget — handles client initialisation, dialling, media, controls and optional AI transcript in either inline or modal mode.

1<sw-call-widget
2  token="YOUR_GUEST_TOKEN"
3  destination="/private/sales"
4></sw-call-widget>

The widget owns the entire call lifecycle:

  1. Builds a SignalWire credential provider from token (+ optional host) and connects on demand via client-factory.
  2. Wires CallStateContextController, DevicesContextController, TranscriptController, and UserEventController so every nested SDK-aware component picks up live state for free.
  3. Composes the visual layout from <sw-ui-call-layout>, <sw-call-media>, <sw-local-camera>, <sw-call-controls>, and optionally <sw-ui-transcript-view> and <sw-ui-content-drawer>.
  4. Shows an <sw-ui-modal> overlay when modal is set, or renders inline (within the host’s bounding box) when it isn’t.
  5. Listens for incoming-call signals via IncomingCallController when allow-incoming-calls is enabled and prompts the user to accept.

Use the imperative dial() and hangup() methods to trigger the widget programmatically, or click any element placed in the default slot (the trigger) when in idle state.

Class: SwCallWidget · Module: packages/web-components/src/components/sw-call-widget/sw-call-widget.ts

class: SwCallWidget, sw-call-widget

Fields

token
stringDefaults to ''

token field.

host
stringDefaults to ''

host field.

destination
stringDefaults to ''

destination field.

booleanDefaults to false

modal field.

transcription
booleanDefaults to false

transcription field.

allowIncomingCalls
booleanDefaults to false

allowIncomingCalls field.

audioOnly
booleanDefaults to false

audioOnly field.

userVariables
stringDefaults to ''

Custom variables sent with the Verto invite as a JSON object. The widget always advertises capabilities.display\_content and metadata.widget.opened\_at so the agent can detect that the caller supports the content drawer; user-supplied keys are merged in and win on shallow conflict. Invalid JSON is logged and ignored — the call still dials.

disableAutoTheme
booleanDefaults to false

Skip auto-injecting the SignalWire theme.css design-token stylesheet. Set this when the host page already loads @signalwire/web-components/theme.css or a custom theme written against the same DTCG token names.

disableAutoFonts
booleanDefaults to false

Skip auto-loading the SignalWire brand fonts (Lexend, Instrument Sans, JetBrains Mono) from Google Fonts. Set this when fonts are self-hosted or loaded elsewhere.

Methods

NamePrivacyDescriptionParametersReturnInherited From
dialPromise<void>
hangupPromise<void>

Attributes

NameFieldInherited From
tokentoken
hosthost
destinationdestination
modalmodal
transcriptiontranscription
allow-incoming-callsallowIncomingCalls
audio-onlyaudioOnly
user-variablesuserVariables
disable-auto-themedisableAutoTheme
disable-auto-fontsdisableAutoFonts

Slots

NameDescription
backgroundBackground element behind the call view, e.g. `<sw-ui-background default>`.
Default slot. Trigger element shown when idle; clicking it dials.

Events

NameDetailDescription
signalwire-address:event—Forwarded SignalWire custom user events.
sw-call-ended—The call reached a terminal state — user hangup,
sw-dial—The widget began dialing (programmatic or via trigger).
sw-display-content—Forwarded from a display_content user event.