Skip to main content
By the end of this guide, you will have learned how to set up a Click To Call widget that includes a text input field. The text input field will be displayed as an alternative to the voice input field. A text field can be useful during voice conversations when the end user needs to provide specific data precisely, for example, for copying and pasting a long tracking number or making sure a name is spelled correctly.

​
Prerequisites

​
Setup Overview

  1. Configure a Flow with an AI Agent Node and a tool to find packages. The Flow handles the conversation and allows the user to find their package by typing in the text input field.
  2. Configure a Voice Gateway Endpoint. The Voice Gateway Endpoint connects the Flow to Voice Gateway and activates the Click To Call widget.
  3. Embed and test the widget. Add the widget script to your page and see the Click To Call widget working.

​
Set Up a Click To Call Widget with a Text Input Field

1

Create a Flow

  1. Go to Build > Flows and click + New Flow.
  2. On the New Flow panel, configure the following:
    • Name — add a unique name, for example, Click To Call Assistant.
    • (Optional) Description — add a relevant description, for example, This Flow supports a Click To Call widget and an input text field.
2

Configure an AI Agent Node

  1. In the Flow editor, add an AI Agent Node and configure the following:
    • AI Agent — select the AI Agent you’ve previously created, for example, Package Support Assistant.
    • Job Name — Package Support Specialist. Save the Node.
  2. Next to the AI Agent Node, click + and select Tool.
  3. Configure the Tool Node as follows:
    • Tool ID — enter find_package.
    • Description — enter Trigger this tool as soon as the customer needs help finding their packages.. Save the Node.
3

Configure a Say Node to Open the Input Field

  1. Below the Default child Node of the AI Agent Node, add a Say Node.
  2. Configure the Say Node as follows:
    • In the Options section, add the following code in the Data field:
    {
  "openInput": true
}
    • In the Settings section, enter Open input field in the Label field. This label allows you to better identify the function of this Node.
    This Node triggers the event to open the input field on the Click To Call widget.
4

Configure a Question Node

  1. Below the find_package child Node, add a Question Node and configure the following:
    • Question Type — select Number.
    • Text — enter the following text: What is your tracking number?.
5

(Optional) Store the Result in the Context Object

  1. Below the Question Node, add an Add To Context Node and configure the following:
    • Key — enter trackingNumber.
    • Value — enter {{ci.slots?.NUMBER?}}.
    With this CognigyScript expression, the Node stores the user’s answer from the input field under trackingNumber in the Context object. You can use this value for further processing. For example, you can send this to your package management system and track the delivery status.
6

Add a Resolve Tool Node to Return the Result to the AI Agent

Below the Add To Context Node, add a Resolve Tool Node and configure the following:
  • Answer Text — enter The user's package number is {{cc.trackingNumber? || ci.text}}.
This Node returns the user’s tracking number to the AI Agent.
After completing these steps, your Flow should look like the following:

​
Configure a Voice Gateway Endpoint

1

Create a Voice Gateway Endpoint

  1. Go to Deploy > Endpoints.
  2. Click + New Endpoint, select Voice Gateway and configure the following:
    • Name — for example, Click To Call Support.
    • Flow — Select the Flow you previously configured, in this example, Click To Call Assistant.
  3. Click Save.
2

Generate the Click To Call Embedding Code

  1. In the Endpoint settings, find Click To Call Embedding HTML.
  2. Click the Set Up Click To Call Integration button in that field to generate the embedding code in the code editor. Hover over the code editor and click the Copy to clipboard button. You will use this code to embed the Click To Call widget in your website.
3

Enable and Configure the Click To Call Widget

  1. In Click To Call Widget Settings:
  • Enable Click To Call Widget — activate the toggle.
  • AI Agent Name — Name shown on the widget, for example, Package Support.
  • Tagline — Short text under the name, for example, Find your package!.
  • (Optional) AI Agent Avatar Logo URL — Add a URL of the image shown on the widget, for example, https://www.<domain>.com/logo.png. If empty, the Cognigy.AI logo is used.
  • (Optional) Theme — select the color theme of the widget.
  1. Save the Endpoint.

​
Embed and Test Widget

1

Embed the Widget in your Website

  1. 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:
<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/<YOUR_ENDPOINT_CONFIG_TOKEN>"
            )
        }
    });
</script>
  1. Make sure the actual Endpoint configuration URL is the same as the one you copied from Click To Call Embedding HTML in the Voice Gateway Endpoint.
  2. Edit the script to add the text input field and events to open and close the input field when the Flow sends openInput: true in the Say Node. The following code is an example of how to do this:
<script src="https://github.com/Cognigy/click-to-call-widget/releases/latest/download/webRTCWidget.js"></script>
<script>
    addEventListener("load", function () {
        if (typeof window.initWebRTCWidget !== "function") return;
        var token = "<ENDPOINT_URL>/<YOUR_ENDPOINT_CONFIG_TOKEN>";
        window.initWebRTCWidget(token).then(function (widget) {

            var currentSession = null;

            // Returns the widget container element (tries vc_, voice_connect_, and webrtc_ class names).
            function getWidgetContainer() {
                return document.querySelector(".vc_widget_container") ||
                    document.querySelector(".voice_connect_widget_container") ||
                    document.querySelector(".webrtc_widget_container") ||
                    document.querySelector("[class*='widget_container']");
            }

            // Creates and shows a text input below the transcript (or below the widget content). On Enter, sends the value to the Flow via session.sendInfo().
            function showInputField(session) {
                currentSession = session;
                var wrap = document.getElementById("widget-input-wrap");
                if (wrap) {
                    wrap.style.display = "block";
                    var input = document.getElementById("widget-text-input");
                    if (input) input.focus();
                    return;
                }
                var widgetEl = getWidgetContainer();
                if (!widgetEl) widgetEl = document.body;
                wrap = document.createElement("div");
                wrap.id = "widget-input-wrap";
                wrap.style.cssText = "width:100%;max-width:460px;margin-top:8px;margin-bottom:8px;box-sizing:border-box;display:block;";
                var input = document.createElement("input");
                input.type = "text";
                input.id = "widget-text-input";
                input.placeholder = "Type a message and press Enter...";
                input.style.cssText = "width:100%;padding:8px 12px;font-size:14px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;";
                input.addEventListener("keydown", function (event) {
                    if (event.key !== "Enter") return;
                    event.preventDefault();
                    var value = (event.target.value || "").trim();
                    if (!value) return;
                    if (currentSession && typeof currentSession.sendInfo === "function") currentSession.sendInfo(value);
                    event.target.value = "";
                });
                wrap.appendChild(input);
                if (widgetEl === document.body) {
                    widgetEl.appendChild(wrap);
                } else {
                    var stack = widgetEl.parentElement;
                    var transcriptWrapper = stack && (stack.querySelector(".vc_widget_transcript_wrapper") ||
                        stack.querySelector(".voice_connect_widget_transcript_wrapper") ||
                        stack.querySelector(".webrtc_widget_transcript_wrapper"));
                    if (transcriptWrapper) {
                        transcriptWrapper.insertAdjacentElement("afterend", wrap);
                    } else {
                        var contentContainer = widgetEl.querySelector(".vc_widget_content_container") ||
                            widgetEl.querySelector(".voice_connect_widget_content_container") ||
                            widgetEl.querySelector(".webrtc_widget_content_container");
                        if (contentContainer) {
                            contentContainer.insertAdjacentElement("afterend", wrap);
                        } else {
                            widgetEl.appendChild(wrap);
                        }
                    }
                }
                input.focus();
            }

            // Hides the text input and clears the current session reference.
            function hideInputField() {
                currentSession = null;
                var wrap = document.getElementById("widget-input-wrap");
                if (wrap) wrap.style.display = "none";
            }

            // Returns true if the INFO body contains openInput: true (Flow asks to show the text input).
            function hasOpenInput(body) {
                if (body == null) return false;
                if (typeof body === "string") {
                    try { body = JSON.parse(body); } catch (e) { return false; }
                }
                var infoBody = typeof body === "object" ? body : null;
                if (!infoBody) return false;
                if (infoBody.openInput === true) return true;
                if (infoBody.data && infoBody.data.openInput === true) return true;
                if (infoBody.data && infoBody.data.data && infoBody.data.data.openInput === true) return true;
                return false;
            }

            // Runs when a new call (RTC session) starts.
            widget.on("newRTCSession", function (session) {

                // Runs when the Flow sends a SIP INFO: show the input if openInput: true.
                session.on("newInfo", function (ev) {
                    if (ev.originator !== "remote") return;
                    var info = ev.info || ev;
                    var body = info && (info.body !== undefined ? info.body : info.request && info.request.body);
                    if (body === undefined && typeof ev.body !== "undefined") body = ev.body;
                    if (body == null) return;
                    try {
                        if (hasOpenInput(body)) showInputField(session);
                    } catch (e) {}
                });

                // Runs when the call ends normally; hide the input.
                session.on("ended", hideInputField);

                // Runs when the session is terminated; hide the input.
                session.on("terminated", hideInputField);
            });
        });
    });
</script>
2

Test the Widget

  1. Open the page in a browser, allow microphone access when prompted, and click start-voice-call on the widget to start a voice conversation with your AI Agent.
  2. After the AI Agent greets you, the input field opens.
  3. Say you want to find your package.
  4. Try answering the question in the text input field and by voice.

​
See Also