For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • class: SwClickToCall, sw-click-to-call
  • Fields
  • token
  • host
  • destination
  • label
  • audioOnly
  • Attributes
  • CSS Properties
  • Events
Web Components

sw-click-to-call

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

sw-device-selector

Next
Built with

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