How to implement Amity Bots Webchat on your website

  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.

How to implement Amity Bots Webchat on your website

Amity Bots is an enterprise chat management that can create a chatbot and live chat system in multiple platforms such as Facebook, Line, or Webchat. Today I’m going to show you how to connect Amity Bots with Webchat.

This is what webchat looks like.

Create a channel for Webchat

First, you have to create a channel for web chat by going to the menu channel and click ‘‘website ’’tab

channel > website

named your App ID and click the save button
*Please remember your App ID!

click +channel button

Next, go to Chatlogic. You have to use a receive-msg node, add a new channel.

select ‘Add new channel’ in the dropdown list

Click the pencil button and select type to ‘WebSocket ’and put your App ID.

And don’t forget to deploy. Now, you have a web chat channel in Amity bots already. Next, we will implement this channel to your HTML page.

Implement SDK to HTML page

open your HTML file and add the script below

{% c-block language="javascript" %}
<script>    
     window.convolabSettings = {      
        APP_ID: "WEBCHAT",      
        TITLE: "WEBCHAT",      
        ICON:        
           "https://s3.amazonaws.com/upload.convolab.ai/example/image/icon.svg",      
        SIZE: [65, 65],      
        INPUT_MODE: "text",      
        AVATAR:        
           "https://s3.amazonaws.com/upload.convolab.ai/example/image/AvatarBot.png",      
        HISTORY_DAYS: -1,      
        CHAT_TITLE_STYLE: `background:#1B5F65;`,      
        IS_AUTO_TOGGLE_RICH_MENU: true,    
     };  
</script>
<script src="https://instancename.convolab.ai/site/javascripts/webchats/convolab-webchat-1.1.0.js"></script>
{% c-block-end %}

Setup

The first thing you need to set is {% c-line %}APP_ID{% c-line-end %}

{% c-line %}APP_ID:(your APPID){% c-line-end %}

Next, Edit {% c-line %}src{% c-line-end %} replace {% c-line %}instancename{% c-line-end %} to your instance name

{% c-block language="javascript" %}
<script src="https://poc1.convolab.ai/site/javascripts/webchats/convolab-webchat-1.1.0.js"></script>
{% c-block-end %}

Save your HTML file and see what happens.

Now, the Chat widget should appear at the bottom right of your HTML page

chat widget

When you click on the chat widget, the chat frame will pop up like this

Congratulations!!! now you can implement your Amity bots to your HTML page, I hope this will help you. See you next time!