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

# Technical reference

> Complete reference for Click-to-Call configuration options and parameters

This page provides a comprehensive reference for Click-to-Call, including all available configuration parameters and their usage.

## Snippet structure

The Click-to-Call snippet consists of two main parts that work together to create a fully functional Click-to-Call widget on your website:

### Async loader (IIFE)

The first part is an Immediately Invoked Function Expression (IIFE) that handles:

* Loading the required JavaScript resources
* Authentication with SignalWire services
* Setting up the necessary namespaces and methods

```javascript
// Async Loader IIFE - Do not modify this section except for the API key if necessary
(a => {
  // Loader implementation
  // ...
})({ apiKey: "c2c_XXXXXXXXXXXXXXXXXXXXX", v: "0.0.1" });
```

> **Only modify the API key if necessary**
>
> * Never modify the Async Loader code except for the API key if necessary
> * The API key is linked to your SignalWire account and specific permissions
> * If you need to change the API key, ensure the new key has permissions for the destinations you plan to use
> * If your key doesn't have access to the destination resources, calls will fail to connect

The loader initializes a global `sw` namespace in your browser window, with a nested `c2c` namespace that contains
all the methods needed to work with the Click-to-Call widget.

### Component initialization

The second part calls the `spawn` method to configure and render the widget:

```javascript
// Component initialization - Can be customized
sw.c2c.spawn('C2CButton', {
  // Configuration parameters
  destination: '/public/example',
  buttonParentSelector: '#click2call',
  callParentSelector: '#call',
  // Additional parameters as needed
});
```

When you create a Click-to-Call widget in the SignalWire Dashboard, both parts are generated together as a single code snippet.
You can copy this entire snippet into your website's HTML, and the Click-to-Call widget will be initialized immediately when the
page loads.

> **Tip**
>
> In some cases, you might want to delay the initialization of the Click-to-Call widget until a specific user action or page event.
> You can achieve this by:
>
> 1. Including only the Async Loader part of the script in your page's head or early in the body
> 2. Calling the component initialization method later when you want to initialize the widget

## Methods

### `spawn`

The `spawn` method is used to initialize the C2C widget. It will use the CSS selectors provided in `buttonParentSelector` and
`callParentSelector` to render the call button and widget.

#### Syntax

```javascript
sw.c2c.spawn('componentName', options)
```

#### Parameters

**`componentName`** `string` — required

The component to initialize. Currently only `'C2CButton'` is supported.

---

**`options`** `object` — required

An object of configuration options that control the behavior and appearance of the C2C widget.

---

**`destination`** `string` — required

The destination address to call, using SignalWire Address format. Bound to the destination(s) selected when the snippet was created in the dashboard — if the destination is not valid, the call will not connect.

> **Warning**
>
> The `destination` must reference a valid destination that was selected when creating the C2C widget in the dashboard. If the destination is not valid, the call will not connect.

```javascript
sw.c2c.spawn('C2CButton', {
  destination: '/public/support',
});
```

---

**`buttonParentSelector`** `string` — required, default: #click2call

CSS selector for the HTML element where the call button will be rendered. This element must exist in the DOM when `sw.c2c.spawn` is called.

```javascript
sw.c2c.spawn('C2CButton', {
  buttonParentSelector: '#my-call-button-container',
});
```

---

**`callParentSelector`** `string` — required, default: #call

CSS selector for the HTML element where the call widget will be displayed when a call is active. This element must exist in the DOM when `sw.c2c.spawn` is called.

```javascript
sw.c2c.spawn('C2CButton', {
  callParentSelector: '#my-call-widget-container',
});
```

---

**`innerHTML`** `string`

Optional HTML markup to render a custom call button. If not provided, a default button will be used. Allows you to fully customize the button appearance to match your website's design.

```javascript
sw.c2c.spawn('C2CButton', {
  innerHTML: '<button class="my-custom-button"><i class="icon-phone"></i> Call Support</button>',
});
```

---

**`beforeCallStartFn`** `function`

Called when the user clicks to start a call, before call setup begins. Return `true` to proceed with the call or `false` to cancel.

Common uses: validating form data, performing business hours checks, showing loading indicators, confirming with the user.

```javascript
sw.c2c.spawn('C2CButton', {
  beforeCallStartFn: () => {
    const hour = new Date().getHours();
    if (hour < 9 || hour >= 17) {
      alert('Our call center is only available from 9 AM to 5 PM.');
      return false;
    }
    document.getElementById('loading').style.display = 'block';
    return true;
  },
});
```

---

**`afterCallStartFn`** `function`

Called after call setup completes and the connection is established. Useful for updating UI elements or tracking call start events.

Common uses: hiding the call button, updating UI to reflect active call state, triggering analytics events.

```javascript
sw.c2c.spawn('C2CButton', {
  afterCallStartFn: () => {
    document.getElementById('loading').style.display = 'none';
    document.getElementById('call-button-container').style.display = 'none';
    console.log('Call connected successfully');
  },
});
```

---

**`beforeCallLeaveFn`** `function`

Called when the user or system initiates call end, before teardown begins. Return `true` to proceed with hanging up or `false` to cancel.

Common uses: showing confirmation dialogs, performing cleanup operations.

```javascript
sw.c2c.spawn('C2CButton', {
  beforeCallLeaveFn: () => {
    return confirm('Are you sure you want to end this call?');
  },
});
```

---

**`afterCallLeaveFn`** `function`

Called after the call has fully ended and the widget is removed from view.

Common uses: restoring UI elements to their pre-call state, showing feedback forms, triggering analytics events.

```javascript
sw.c2c.spawn('C2CButton', {
  afterCallLeaveFn: () => {
    document.getElementById('call-button-container').style.display = 'block';
    document.getElementById('call-feedback').style.display = 'block';
    console.log('Call ended');
  },
});
```

---

**`onCallError`** `function`

Called if any error occurs during the call setup process. Receives the error object as a parameter.

Common uses: displaying user-friendly error messages, logging errors, hiding loading indicators, implementing retry logic.

```javascript
sw.c2c.spawn('C2CButton', {
  onCallError: (error) => {
    console.error('Call error:', error);
    document.getElementById('loading').style.display = 'none';
    if (error.name === 'MediaDeviceError') {
      alert('Please ensure your microphone is connected and you have granted permission to use it.');
    } else {
      alert('Sorry, we couldn\'t connect your call. Please try again later.');
    }
  },
});
```

---

## Complete example

Here's a complete example that demonstrates all available configuration parameters:

```javascript
sw.c2c.spawn('C2CButton', {
  // Core parameters
  destination: '/public/support',
  buttonParentSelector: '#click2call',
  callParentSelector: '#call',
  innerHTML: '<button class="custom-call-button">Contact Support</button>',
  
  // Callback parameters
  beforeCallStartFn: () => {
    console.log('Preparing to start call...');
    document.getElementById('loading').style.display = 'block';
    return true;
  },
  
  afterCallStartFn: () => {
    console.log('Call connected!');
    document.getElementById('loading').style.display = 'none';
    document.getElementById('click2call').style.display = 'none';
  },
  
  beforeCallLeaveFn: () => {
    return confirm('Are you sure you want to end this call?');
  },
  
  afterCallLeaveFn: () => {
    console.log('Call ended.');
    document.getElementById('click2call').style.display = 'block';
    document.getElementById('feedback-form').style.display = 'block';
  },
  
  onCallError: (error) => {
    console.error('Call error:', error);
    document.getElementById('loading').style.display = 'none';
    alert('Sorry, we couldn\'t connect your call. Please try again later.');
  }
}); 
```

> Complete reference for Click-to-Call configuration options and parameters