This How to covers the necessary steps to quickly create a Webchat Endpoint that can show off your Flow in powerful ways.
- Create a Webchat Endpoint in COGNIGY.AI
- Webchat Options
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.
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:
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.
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.
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.
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.
The logo to display in the header of the Webchat. You normally put a URL linking to your company logo here.
The image to display in the the backround.
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.
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.
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 a
Persistent 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.
Updated over 2 years ago