Web Components

Click-to-Call Widget

View as MarkdownOpen in Claude

<sw-click-to-call> is a single-button call element. With a token and a destination, it renders a styled button that dials the configured destination and opens the full call UI in a modal.

Under the hood it’s a thin wrapper around <sw-call-widget> configured in modal mode — the button is the trigger; media, controls, and the optional AI transcript are delegated to the widget once the user clicks.

Minimum embed

One script tag, one element:

1<script src="https://unpkg.com/@signalwire/web-components/dist/embed/signalwire-web-components-embed.iife.js"></script>
2
3<sw-click-to-call
4  token="c2c_892b29eca7b6d96091faf713f07cdf46"
5  destination="/public/support"
6  label="Talk to support"
7></sw-click-to-call>

For bundler-based projects, swap the script tag for import "@signalwire/web-components/sw-click-to-call". The element markup is identical. See Overview for the two pathways.

Token

token accepts two formats:

  • Embed token (c2c_… / c2t_… prefix) — created from a Click to Call resource in the dashboard (sidebar → Tools → Click to Call). The destination is pinned in the resource configuration; the destination attribute is ignored when the embed token already pins one. The widget routes through embeds.signalwire.com automatically.
  • Subscriber Access Token (SAT) — a JWT minted by your backend for an authenticated user. Pair it with an explicit destination.

For public pages, prefer the embed token: it’s safe to expose in HTML, scoped to a single destination, and revocable from the dashboard. Use a SAT when the visitor is signed into your app and the call should be attributed to their account. See Authentication.

Attributes

token is required. destination selects the resource to dial (ignored when the embed token already pins one). label sets the button text. audio-only skips video. See <sw-click-to-call> for the full attribute list.

Events

The element bubbles three composed events:

  • sw-dial — dialing started
  • sw-call-hangup — the visitor clicked hangup
  • sw-call-ended — the call reached any terminal state
1document.querySelector("sw-click-to-call")
2  .addEventListener("sw-dial", (e) => {
3    analytics.track("call_started", { destination: e.detail.destination });
4  });

Styling

The button reads from the SignalWire DTCG tokens shipped in theme.css. Override them at any ancestor to restyle without piercing shadow DOM:

1sw-click-to-call {
2  --interactive-status-success: #1d4ed8; /* button background */
3  --radius-md: 999px;                     /* pill shape */
4  --type-family-body: "Inter", sans-serif;
5  --type-size-body: 15px;
6}

For finer control, target the inner button via its CSS Part:

1sw-click-to-call::part(button) {
2  padding: 14px 28px;
3  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.4);
4}

See Theming for the full token list and brand-color recipes.

When to use <sw-call-widget> instead

<sw-click-to-call> is single-destination, button-only, modal-only. Use <sw-call-widget> directly for any of:

  • Multiple destinations or dynamic routing.
  • Inline (non-modal) rendering.
  • A custom trigger element (use the default slot of <sw-call-widget>).
  • Receiving incoming calls (allow-incoming-calls).
  • Programmatic dial() / hangup() control.

Both share the same underlying call lifecycle — see <sw-call-widget> for the full surface.