Deploy a Webchat [LEGACY] Endpoint

Description

❗️

This Webchat is DEPRECATED

Please use Cognigy's 2.X webchat. Refer to Cognigy's new webchat documentation: Webchat

This How to covers the necessary steps to quickly create a Webchat Endpoint that can show off your Flow in powerful ways, and how to deploy the Webchat on your own website. If you want to learn how to integrate the Webchat into your own website, then please go to Integrate the Webchat on your own website.

Guide Structure

  1. Create a Webchat Endpoint in COGNIGY.AI
  2. Webchat Options
  3. File Uploads

Create a Webchat Endpoint

:link: On COGNIGY.AI

Creating the Endpoint


First, create an Endpoint that uses the Webchat [LEGACY] 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 a new tab, 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*Figure: *Creating the Webchat Endpoint*

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, simply click on the Open Webhcat button and the changes will already have taken effect.

👍

Manually defining the user ID

When you load the Webchat, we will per default create a random user ID and store this in local storage, so that you have the same user next time you use the Webchat. However, sometimes it can be beneficial to manually specify a user ID. You can do this by adding ?user= to the Webchat URL.

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.

Display Get Started Button

If true, then a button is rendered on the Webchat instead of an input field. When the user clicks the button, it sends a pre-defined message to your flow.

Get started Button Text

The text 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 when a user clicks the Get Started Button.
Only used if a Get Started Button is displayed.

Get Started Payload

The text that is sent to your Flow when the Get Started Button is clicked.
Only used if a Get Started Button is displayed.

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.

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.

Enable File Upload

If true, then the Webchat has a file upload button that the user can click in order to upload a file.

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 MenuFigure: Persistent Menu

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 ConfigurationFigure: Persistent Menu Configuration

Figure: Persistent Menu Configuration

File Uploads

To upload a file from the Webchat, you first have to enable the File Upload setting. This will render a button on the Webchat that will prompt the user to upload a file. When the user has selected a file, then this file will be sent to a specified File Upload URL. To specify this File Upload URL, you have to send the URL to the Webchat as data in one of your Say Nodes. The format of the File Upload URL is:

{
  "fileUploadUrl": "https://someUrl"
}

If you include the snippet above in the data of a Say Node, then the Webchat will send the file to that URL. See the image below for an example.

Figure: Specifying a File Upload URL in a Say NodeFigure: Specifying a File Upload URL in a Say Node

Figure: Specifying a File Upload URL in a Say Node


Did this page help you?