Description

This How to covers the necessary steps to quickly create a Webchat Endpoint that can show off your Flow in powerful ways.

Guide Structure

Create a Webchat Endpoint in COGNIGY.AI
Webchat Options

Create a Webchat Endpoint

On COGNIGY.AI

Creating the Endpoint

First, create an Endpoint that uses the Webchat Channel. When you created the Endpoint and assigned the Flow that the Endpoint should use, then you can already click on the Open Webchat button in the upper right corner. This will open the configured Webchat in an Integrated Demo Page, and you can already start talking to your flow. Read on to figure out how you can configure the appearance of the Webchat to style it in your company colors, add a background image and much more.

Configuring the Webchat

You can configure almost everything about the Webchat to personalize it just for your needs. This includes modifying the colors, adding functionality like file uploads and much more, so that you can present the Conversational AI that you have created in a very nice way. As soon as you have changed a setting, loading or reloading a Website with a Webchat pointing to this Endpoint will show the changes will already have taken effect.

The Webchat has two configuration panels: Webchat Configuration and Persistent Menu, which will be covered in-depth now:

Webchat Configuration###

In the Webchat Configuration Panel, you can configure the colors of the Webchat, the Get Started Button, logos, images and much more. The table below shows a description of each setting that you can configure.

Name	Description
Center Webchat¹	If this setting is toggled on, then the Webchat will appear in the center of the page. Otherwise it will appear in the bottom right corner.
Color Scheme	This setting controls the main colors of the Webchat. Clicking on the pallete icon will open up a color picker that you can use to easily select which color your Webchat should have.
Input Placeholder Text	This setting controls the text that will be rendered as a placeholder in the input field when the user is not writing anything.
Start Behavior	This setting can be used to customize the way conversations will be initialized in this Webchat. "Start with a Text Field" will display a regular text field to the user (default) "Start with a Button" will instead render a Button instead of a text field. Clicking the button will initialize the conversation, sending a preconfigured message. The label of the button, payload and shown text of the message can be customized. "Auto Send a Message to the Bot" will automatically send a predefined message to the bot when the Webchat is initialized. The payload and shown text of the message can be customized.
Get started Button Text	The label to display on the Get Started Button. Only used if a Get Started Button is displayed.
Get Started Text	The text that is displayed in the Webchat for the "Get Started" message (see start behavior).
Get Started Payload	The text that is sent to your Flow with the "Get Started" message (see start behavior).
Bot Avatar Logo	The logo to display as an avatar for the messages of the bot. You normally put a URL linking to your company logo here.
Header Logo	The logo to display in the header of the Webchat. You normally put a URL linking to your company logo here.
Background Image¹	The image to display in the the backround. (only for Cognigy-hosted Webchats)
Enable Speech-to-Text¹	If true, then the Webchat has a microphone button that enables the user to use voice to send messages instead of only sending text messages.
Enable Text-to-Speech¹	If true, then the Webchat will read messages from the Bot aloud.

¹ This Setting is exclusive to or works differently on Integrated Demo Pages.

Persistent Menu###

The persistent menu is a great way to show your users all of the capabilites that your bot has. You can use it to switch to different conversation stages, to guide the user and much more. The user can open the menu at any time during the conversation through a small icon in the left corner:

To create aPersistent Menu like this, open the Persistent Menu Panel. The first thing you have to do is enabling the Persistent Menu. As soon as you do this, the menu icon will appear in the lower left corner of the Webchat. You can give the menu any title you want in the Title field in the Persistent Menu Panel.

In order to actually add the Persistent Menu Items themselves, you click on the ADD button on the right. Clicking this will add a new Persistent Menu Item, which consists of a Title and a Payload. The text in the title field controls what the user can see in the Persistent Menu, while the text in the payload field is what is actually sent to your flow. This way, you can show a simple word to your user, but actually send a more complex query to your flow in order to process the request.

The image below shows the configuration behind the webchat pictured above.