Skip to main content
Embedding a Click To Call widget lets you integrate the widget into your website. By connecting the widget to your Voice Gateway Endpoint and configuring the widget’s appearance and behavior, you can offer users seamless interaction and support without a complex setup. The script can be hosted remotely, for example, on GitHub, or on your own server.

​
Prerequisites

​
Embed the Click To Call Widget

1

Copy the code from the Endpoint settings

  1. Go to Deploy > Endpoints and select the Voice Gateway Endpoint you previously configured the Click To Call widget for.
  2. In the Click To Call Embedding HTML field of the Endpoint settings, hover over the code editor and click the Copy to clipboard button to copy the HTML code. The HTML code includes the following entities:
    • The Click To Call JavaScript bundle — hosted externally on GitHub.
    • The addEventListener() function — waits for the page to fully load, then initializes the Click To Call widget with initWebRTCWidget(), if it exists. The initWebRTCWidget() function is called with a single argument, which is the configuration URL of the Voice Gateway Endpoint to connect to. This embedding code contains the necessary JavaScript code to initialize and display the Click To Call widget on your website.
    <script src="https://github.com/Cognigy/click-to-call-widget/releases/latest/download/webRTCWidget.js"></script>
<script>
    addEventListener("load", (event) => {
        if (window.initWebRTCWidget) {
            window.initWebRTCWidget(
                "<ENDPOINT_URL>/<YOUR_ENDPOINT_CONFIG_TOKEN>"
            )
        }
    });
</script>
Where <ENDPOINT_URL> and <YOUR_ENDPOINT_CONFIG_TOKEN> are the URL and the Endpoint configuration token, respectively. For example, https://endpoint-dev.cognigy.ai/ab8b929039b427fed7ee84bb799acd7f254fc9254be27c87a78fc8a70fb048ec for the development environment or https://endpoint.cognigy.ai/ab8b929039b427fed7ee84bb799acd7f254fc9254be27c87a78fc8a70fb048ec for the production environment.
2

Paste the code into your website

Paste the code you copied previously from the Endpoint settings into your page’s <body> or before </body>. The code looks similar to the following:
<html lang="en">
<body>
    <script src="https://github.com/Cognigy/click-to-call-widget/releases/latest/download/webRTCWidget.js"></script>
    <script>
        addEventListener("load", (event) => {
            if (window.initWebRTCWidget) {
                window.initWebRTCWidget('https://endpoint-dev.cognigy.ai/<URLTOKEN>')
            }
        })
    </script>
</body>
</html>

​
Customize the Click To Call Widget

You can customize the Click To Call widget by extending the widget script, according to your requirements:
  • Add event handling and callbacks.
  • Use API methods for sending and receiving data.
  • Customize the CSS styles and branding of your Click To Call widget.

​
Configure Multimodal Communication

To configure multimodal communication for your voice AI Agents, use the Click To Call API.
To open and close input fields on your website, you need to use the following from the Click To Call widget API:
  • widget.on('newRTCSession', callback) — uses the session from the callback to attach the following events.
  • session.on('newInfo', callback) — reads the INFO body from the Flow. Use this method to open input fields. For example, add this method to listen for the "openInputField": true property and open the input field by sending this property in the Data field of a Say, Question, or Optional Question Node.
  • session.on('ended', callback) — close the input field when the call ends.
  • session.on('terminated', callback) — close the input field when the session is terminated.