Click-to-Call

What is Click-to-Call?

SignalWire Click-to-Call (C2C) is an embeddable script that adds real-time voice communication functionality directly to your website with minimal setup. With just a few lines of code, you can embed SignalWire’s calling capabilities inside an HTML page, allowing your website visitors to initiate voice calls directly from your web pages without requiring any additional software or setup.

Click-to-Call provides a simple way to embed voice communication on your website. If you need more advanced customization or features, the C2C widget uses the SignalWire Client SDK. You can leverage this SDK directly to build more sophisticated communication applications with additional control and functionality.

Prerequisites

The C2C embeddable script requires:

A SignalWire account that has access to the dashboard
A website where you can embed the C2C widget
Full support for embedded scripts

Set up Click-to-Call

Create the widget

Start by creating a widget in your SignalWire Dashboard:

Log in to your SignalWire Dashboard
Navigate to Tools > Click To Call
Configure your widget settings:
- Give your widget a descriptive name
- Set a destination for incoming calls (this is the resource address that will receive calls)
- Adjust any other settings as needed
Click Save to generate your widget
Click the Copy Embeddable Widget button to copy your personalized C2C script

The copied script will look similar to this (but with your unique API key):

1 <script>
2 // Sample code - Do not use this example. Always use the script generated from your dashboard.
3 (a => {
4   // Minified initialization code...
5 })({ apiKey: "c2c_YOUR_UNIQUE_API_KEY", v: "0.0.1" });
6 
7 // Widget configuration
8 sw.c2c.spawn('C2CButton', {
9   destination: '/private/example',
10   buttonParentSelector: '#click2call',
11   callParentSelector: '#call',
12   // Additional parameters...
13 });
14 </script>

Prepare your website

Before adding the script to your website, you need to add two HTML elements where the call button and interface will appear. Without these elements, the button and interface may appear in unintended locations, or not at all.

1 <!-- Add these elements where you want the C2C components to appear -->
2   <!-- This will become your call button -->
3         <!-- This will display the call interface when active -->

These elements can be positioned anywhere in your HTML based on where you want the button and call interface to appear on your page.

If you prefer to use existing elements on your page instead of creating new ones, you can modify the script to target those elements in the next step. Simply note the IDs of your existing elements and update the buttonParentSelector and callParentSelector parameters accordingly. See the Technical Reference for more details on these and other configurable selectors.

Add the C2C script to your website

With your container elements in place, you’re ready to add the Click-to-Call script to your website:

Open your website’s HTML file in your preferred editor
Choose the best location for the script:
- Head section (recommended): Placing it in the <head> ensures the script loads early, making the button available as soon as possible
- End of body: Alternatively, you can place it just before the closing </body> tag if you prefer to load scripts last
Add the script you copied from the dashboard to your chosen location:

1 <!DOCTYPE html>
2 <html lang="en">
3 < head>
4   <title>Your Website Title</title>
5   <!-- Your other head elements (stylesheets, meta tags, etc.) -->
6   
7   <!-- Option 1: Place script here in the head section -->
8   <!-- <script></script> -->
9 
10 </head>
11 <body>
12   <!-- Your website content -->
13   
14   <!-- The container elements for the Click-to-Call components -->
15   
16   
17   <!-- More of your website content -->
18   
19   <!-- Option 2: Or place script here at the end of the body -->
20   <!-- <script></script> -->
21 </body>
22 </html>

The script will automatically find your container elements and render the call button and interface in those locations.

Test your implementation

Save your changes and open your website in a browser
You should see the Click-to-Call button in the location you specified
Click the button to test:
- A call interface should appear
- A call should be initiated to your configured destination
Try making a test call to ensure everything works properly

If the button doesn’t appear or calls don’t connect, check:

That your element IDs match what’s in the script
That the script is properly placed in your HTML
Your browser console for any JavaScript errors

Next Steps

View the technical reference for customization options