Technical 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

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

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

Delayed Loading

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:

Including only the Async Loader part of the script in your page's head or early in the body
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

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

Parameters

Parameter	Type	Description
`componentName`Required	`string`	The component to initialize. Currently only `'C2CButton'` is supported.
`options` Required	`object`	An object of configuration options. These options control the behavior and appearance of the C2C widget.

Options reference

The following parameters can be passed in the options object to customize the C2C widget:

Parameter	Type	Default	Description
`destination` Required	`string`	The resource that was selected when the snippet was created in the dashboard.	The destination address to call, using SignalWire Address format. Important: This parameter is required and bound to the destination(s) selected when the snippet was created in the dashboard, otherwise the call will not connect.
`buttonParentSelector` Required	`string`	`#click2call`	CSS selector for the element where the call button will be rendered.
`callParentSelector` Required	`string`	`#call`	CSS selector for the element where the call widget will be displayed.
`innerHTML` Optional	`string`	-	Optional HTML markup to render a custom button. If not provided, a default button will be used.
`beforeCallStartFn` Optional	`function`	-	Called when user clicks to start a call, before call setup begins. Return `true` to proceed with the call or `false` to cancel.
`afterCallStartFn` Optional	`function`	-	Called after call setup completes and the connection is established. Useful for updating UI elements or tracking call start events.
`beforeCallLeaveFn` Optional	`function`	-	Called when user or system initiates call end, before teardown begins. Return `true` to proceed with hanging up or `false` to cancel.
`afterCallLeaveFn` Optional	`function`	-	Called after call has fully ended and the widget is removed from view.
`onCallError` Optional	`function`	-	Called if any error occurs during the call setup process. Receives the error object as a parameter.

The `destination` parameter

The destination address to call, using SignalWire Address format. This parameter is required and bound to the destinations selected when the snippet was created in the dashboard.

warning

The destination parameter 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.

Example

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

The `buttonParentSelector` parameter

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

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

<!-- Target element in your HTML -->
<div id="my-call-button-container"></div>

The `callParentSelector` parameter

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 the sw.c2c.spawn method is called.

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

<!-- Target element in your HTML -->
<div id="my-call-widget-container"></div>

The `innerHTML` parameter

Optional HTML markup to render a custom call button. If not provided, a default button will be used.

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

This parameter allows you to fully customize the appearance of the call button to match your website's design.

The `beforeCallStartFn` parameter

A callback function that is called before a call is initiated. It should return true to proceed with the call or false to cancel.

sw.c2c.spawn('C2CButton', {
  beforeCallStartFn: () => {
    // Check if it's during business hours
    const now = new Date();
    const hour = now.getHours();
    
    if (hour < 9 || hour >= 17) {
      alert('Our call center is only available from 9 AM to 5 PM.');
      return false; // Don't proceed with the call
    }
    
    // Show a loading spinner
    document.getElementById('loading').style.display = 'block';
    
    return true; // Proceed with the call
  },
  // Other parameters...
});