Deploy a Webchat Endpoint
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.
Figure: Creating the Webchat Endpoint
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 Webchat1 | 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 Image1 | The image to display in the the backround. (only for Cognigy-hosted Webchats) |
| Enable Speech-to-Text1 | 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-Speech1 | If true, then the Webchat will read messages from the Bot aloud. |
1 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:
Figure: Persistent Menu
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.
Figure: Persistent Menu Configuration
Updated almost 3 years ago