> 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.

# sw-click-to-call

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.

```html
<sw-click-to-call
  token="YOUR_GUEST_TOKEN"
  destination="/private/sales"
>
  Call sales
</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`** `string` — default: ''

`token` field.

---

**`host`** `string` — default: ''

`host` field.

---

**`destination`** `string` — default: ''

`destination` field.

---

**`label`** `string` — default: 'Call'

`label` field.

---

**`audioOnly`** `boolean` — default: false

`audioOnly` field.

---

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `token`       | token       |                |
| `host`        | host        |                |
| `destination` | destination |                |
| `label`       | label       |                |
| `audio-only`  | audioOnly   |                |

### CSS Properties

| Name                           | Default | Description                                      |
| ------------------------------ | ------- | ------------------------------------------------ |
| `--interactive-status-success` |         | Background color of the call button.             |
| `--type-family-body`           |         | Button font family (inherits the global tokens). |
| `--type-size-body`             |         | Button font size.                                |
| `--radius-md`                  |         | Button border radius.                            |
| `--transition-fast`            |         | Hover-state transition duration.                 |

### Events

| Name             | Detail | Description                                              |
| ---------------- | ------ | -------------------------------------------------------- |
| `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 |

---