***

id: 252c16d5-125f-48da-a457-76b7590a7c45
title: Technical reference
description: Complete reference for Click-to-Call configuration options and parameters
slug: /click-to-call/reference
------------------------------

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" });
```

<Warning title="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
</Warning>

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
</Tip>

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

<ParamField path="componentName" type="string" required={true}>
  The component to initialize. Currently only `'C2CButton'` is supported.
</ParamField>

<ParamField path="options" type="object" required={true}>
  An object of configuration options that control the behavior and appearance of the C2C widget.
</ParamField>

<Indent>
  <ParamField path="destination" type="string" required={true}>
    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.
    </Warning>

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

  <ParamField path="buttonParentSelector" type="string" required={true} 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',
    });
    ```
  </ParamField>

  <ParamField path="callParentSelector" type="string" required={true} 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',
    });
    ```
  </ParamField>

  <ParamField path="innerHTML" type="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>',
    });
    ```
  </ParamField>

  <ParamField path="beforeCallStartFn" type="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;
      },
    });
    ```
  </ParamField>

  <ParamField path="afterCallStartFn" type="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');
      },
    });
    ```
  </ParamField>

  <ParamField path="beforeCallLeaveFn" type="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?');
      },
    });
    ```
  </ParamField>

  <ParamField path="afterCallLeaveFn" type="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');
      },
    });
    ```
  </ParamField>

  <ParamField path="onCallError" type="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.');
        }
      },
    });
    ```
  </ParamField>
</Indent>

## 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.');
  }
}); 
```