This page describes how one can create a custom virtual agent that will help website users fill out forms without any friction.

In this article, the WebchatWidget will be used and be embedded next to an HTML web form in order to provide help with the current input text field. There, the solution could look such as the following:

Check the example code here:

Idea

A typical use-case on a company website is to fill out any kind of form in order to provide information. Since this information could be complex or too difficult to understand for some people, a virtual agent can check if the user needs advice for the current question/text input field. There, the virtual agent could be positioned next to the form or above it -- such as shown in the demo video.

How to

In general, there are only two requirements:

1. A Website
2. The Cognigy Webchat

While the website would be provided as the customer's one, the Webchat can be embedded using the following documentation:

• https://github.com/Cognigy/WebchatWidget/blob/master/docs/embedding.md

However, with this embedding, the webchat is displayed on the bottom-right corner and not next to the related web form. In order to change the position and design, the CSS Customization documentation could be used:

• https://github.com/Cognigy/WebchatWidget/blob/master/docs/css-customization.md

Finally, the last task is to enable communication between the website and the webchat, thus Cognigy.AI. For this, the webchat provides the Analytics API that can be used inside the website itself:

• https://github.com/Cognigy/WebchatWidget/blob/master/docs/analytics-api.md

With the example JavaScript code shown below, the website can react to sent Cognigy.AI events, thus messages sent from the virtual agent:

webchat.registerAnalyticsService(event => {
    if (event.type === "webchat/incoming-message") {
        // TODO: React to the incoming virtual agent message
        
        const { payload } = event;
        const { data, text } = payload;

        if (text === "GET_STARTED") {
          // TODO: Do something
        }
    }
});

Now, the website needs to send some events as well to notify the virtual agent about the user's behavior. If you already took a look into the Embedding documentation, you saw that there is the opportunity to make the webchat object globally available:

initWebchat('Endpoint-Config-Url', {
                settings: {
                }
            }).then(function(webchat) {
                // Make the webchat object globally available
                window.cognigyWebchat = webchat;
                
                // Open the Webchat
                // webchat.open();
            });

Cognigy.AI is message-based, which means that you can simply send a message to the virtual agent in order to notify it about something. For example, the website could notify Cognigy.AI as soon as the user needs more than 10 seconds for filling out a text field. This could look like the following in your website's code:

if (time > 10) {
  // use global webchat object to send message
  webchat.sendMessage("user needs help", null);
}

More about these webchat functions can be read here: https://github.com/Cognigy/WebchatWidget/blob/master/docs/webchat-api.md#sending-text-messages. 

With the help of all the shown documents, one will be able to create a custom virtual agent that will help website users filling out forms frictionless.