> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

# Click-to-Call Widget

[`<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:

```html
<script src="https://unpkg.com/@signalwire/web-components/dist/embed/signalwire-web-components-embed.iife.js"></script>

<sw-click-to-call
  token="c2c_892b29eca7b6d96091faf713f07cdf46"
  destination="/public/support"
  label="Talk to support"
></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](/docs/browser-sdk/v4/guides/web-components)
for the two pathways.

## Token

`token` accepts two formats:

* **Embed token** (`c2c_…` / `c2t_…` prefix) — created from a
  [**Click to Call**](/docs/browser-sdk/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](/docs/browser-sdk/v4/guides/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

```js
document.querySelector("sw-click-to-call")
  .addEventListener("sw-dial", (e) => {
    analytics.track("call_started", { destination: e.detail.destination });
  });
```

## Styling

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

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

For finer control, target the inner `button` via its
[CSS Part](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):

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

See [Theming](/docs/browser-sdk/v4/guides/web-components-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.

[`<sw-click-to-call>`]: /docs/browser-sdk/v4/reference/web-component/sw-click-to-call

[`<sw-call-widget>`]: /docs/browser-sdk/v4/reference/web-component/sw-call-widget