NewsPricingSystem StatusBook DemoFree Trial

Webchat

Suggest Edits

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.

2850

🚧

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
2850

❗️

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
2850

👍

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
2850
  • Style your webchat - edit the widget, branding colours, webchat position, and emojis.
2850
  • Cards - edit the carousel cards on the pre-chat page of the webchat
2850

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.
1510

Control Sneak Peek timing using API

There are 3 ways to trigger a sneak peek message:

  1. Using the specified group name Proto.showSneakpeek('<group-name>');
  2. 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',
            },
        ]
    }
)
  1. 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
2850
  • Inquiry dropdown - set the type of info to be collected from customers
2850 2850
  • Form fields - add questions for customer info before the chat is started
2850

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
2850

👍

Best practice

Depending on the organizational structure of your company, you can setup multiple Webchat channels for a single chatbot.

Updated 2 months ago

What’s Next