Webchat
The Webchat channel allows chatbots and agents to chat with customers via your websites.
Once you add a Webchat channel, click anywhere on the channel row to configure it.

Requirement
The Webchat channel must be enabled before you test it on websites. To enable the channel, click the STATUS toggle.
Settings
Under the SETTINGS tab, you have the following options:
- Enable - make the channel live to the public
- Name - edit the channel name within the AICX platform
- Language - set the default language for customers using this channel
- Testing mode - make chatbot edits live only after when the chatbot is deployed
- Channel ID and Secret - required for the deploy script
- Delete - remove the channel

Important
Once a Webchat channel is deleted, the Channel ID in the webchat deploy snippet on your websites will no longer be usable.
Configuration
Under the CONFIGURATION tab, you can manage the deployments on your websites:
- Deploy snippet - embed the snippet into all your webpages' HTML code
- Whitelist domains - permit certain domains to host the webchat
- Demo page - quickly test the webchat before deploying on your website

Best practice
Put the JavaScript
<script>
tags just before the closing</body>
tag rather than in the<head>
section of your HTML. When you place the JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads. This helps prevent errors and speeds up your website.
Requirement
By default an asterisk (*) wildcard is set to allow developers to deploy the Webchat on any webpages for testing purposes. Therefore please remove the asterisk (*) wildcard and add the website domains before publishing your website.
Note
You can also add ProtoScript to your JavaScript code to configure the language or the display of the Webchat. Please refer to the Webchat API.
Layout
Under the LAYOUT tab, you can customize the display of the webchat interface for each language:
- Display text - edit the title, subtitle, chat button, and chat placeholder

- Style your webchat - edit the widget, branding colours, webchat position, and emojis.

- Cards - edit the carousel cards on the pre-chat page of the webchat

Sneak Peek
Sneak peek allows you to proactively capture the attention of your website visitors. In the Sneak peek tab, click on Add group to add the pop-up message. You may click on the "editing" icon next to the group name to rename you pop up message.
Add the URL(s) of your website where you want the pop-up message to appear. You can add the domain of the website or a specific URL path to control the message group you want to pop up on different path. Maximum 5 groups of sneak peek messages is allowed on a webchat.
Set the timing for the pop up message to appear:
- Immediately after the page is loaded
- "x" second(s) after the page is loaded
- Control Sneak Peek timing using API
Set the language of the pop-up message. Add the message and button(s) you want to show on the pop-up and click Save. There are 3 types of buttons you can use on a sneak peek:
- Quick reply
- Trigger
- Hyperlink
You can set minimum 1 and maximum 3 buttons on a sneak peek.

Control Sneak Peek timing using API
There are 3 ways to trigger a sneak peek message:
- Using the specified group name
Proto.showSneakpeek('<group-name>');
- Custom message and buttons with JavaScript objects
Proto.showSneakpeek(
{
message: 'Message',
buttons: [
{
'type': 'quickreply',
'label': 'Button',
'sendText': 'text',
},
{
'type': 'trigger',
'label': 'Trigger',
'triggerName': 'code',
},
{
'type': 'hyperlink',
'label': 'Website',
'url': 'https://proto.cx',
},
]
}
)
- Custom message and buttons (with helper API methods)
Proto.showSneakpeek(
{
message: 'Message',
buttons: [
Proto.createSneakPeekQuickReplyButton('Button', 'text'),
Proto.createSneakPeekTriggerButton('Trigger', 'code'),
Proto.createSneakPeekHyperlinkButton('Website', 'https://proto.cx'),
]
}
)
Pre-chat form
Under the PRE-CHAT FORM tab, you can collect basic info before customers start the chat:
- Enable - make the pre-chat form live to the public
- Display text - edit the title, subtitle, and chat button

- Inquiry dropdown - set the type of info to be collected from customers


- Form fields - add questions for customer info before the chat is started

Customer rating form
Under the CUSTOMER RATING FORM tab, you can collect feedback from customer on the quality of the chat experience.
- Enable - make the rating form live to the public
- Display text - edit the comment title, comment placeholder, and button text

Best practice
Depending on the organizational structure of your company, you can setup multiple Webchat channels for a single chatbot.
Updated 2 months ago