Technical reference

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.

1
sw.c2c.spawn('C2CButton', {
2
  destination: '/public/support',
3
});

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.

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

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.

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

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.

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

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.

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

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.

1
sw.c2c.spawn('C2CButton', {
2
  afterCallStartFn: () => {
3
    document.getElementById('loading').style.display = 'none';
4
    document.getElementById('call-button-container').style.display = 'none';
5
    console.log('Call connected successfully');
6
  },
7
});

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.

1
sw.c2c.spawn('C2CButton', {
2
  beforeCallLeaveFn: () => {
3
    return confirm('Are you sure you want to end this call?');
4
  },
5
});

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.

1
sw.c2c.spawn('C2CButton', {
2
  afterCallLeaveFn: () => {
3
    document.getElementById('call-button-container').style.display = 'block';
4
    document.getElementById('call-feedback').style.display = 'block';
5
    console.log('Call ended');
6
  },
7
});

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.

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