Using Webchat SDK

Webchat SDK allows you to embed your Amity chatbot into your website. This provides a customized chat experience for visitors right on your site.

Create Webchat SDK channel

Go to Channels menu in your Amity Bots Platform page and add a new Webchat channel with the channel name. Once added, click on the newly-created channel, the following popup should appear:

Record your channel ID to be used in the next step

Implement Webchat SDK

1. Include the SDK file in your page:

<script src="http://webchat-sdk.amitysolutions.com/sdk/ams_sdk.js"></script>

2. Initialize the chat with required parameters:

ams_sdk.chat.load({

  // Channel ID generated from step above
  channelId: "YOUR_CHANNEL_ID", 

  // Display mode - "full_screen" or "bubble"
  mode: "full_screen",  

  // Optional display name for user
  displayName: "John Doe",

  // Optional rich menu configuration, see detail below
  richmenuSetting: {
  },
  
  // Bubble setting when used in "bubble" mode
  bubble: {
  }
});

This will load the chat in a full screen overlay when .load is triggered.

Webchat Mode

Fullscreen Webchat SDK

When initializing Webchat SDK you can specifiy 2 modes: fullscreen or bubble

Fullscreen Mode

Full screen mode displays the webchat interface in a full page overlay. This can be useful if you want to navigate your user directly to the fullscreen webchat from other page or use Webchat SDK in a Webview inside a native mobile application.

Bubble Mode

Bubble mode displays a small circular chat button that opens a widget.

Webchat SDK appears as widget within a page in Bubble mode

Rich Menu Sizing:

The richmenuSetting controls the height of the rich menu area. There are 3 options:

1. Default - Automatically sizes based on the window width. This divides the full window width by 1.6667. For example, on a 300px wide window it will be 1000 / 1.6667 = 180px high.

2. fixedHeight - Sets an absolute fixed height in pixels. For example:

richmenuSettings: { 
    fixedHeight: 300 // Rich menu with 300px in height.
}

3. dividedBy - Makes the height responsive. It takes the default width divided by 1.6667 and divides it again by this number.

richmenuSettings: { 
    dividedBy: 2
}

On our 300px width container, the default is 180px high. With dividedBy: 2, height of richmenu is 300 / 1.6667 / = 150px

dividedBy makes the rich menu responsively scale down on smaller screens.

Note: Only use fixedHeight OR dividedBy, not both. fixedHeight overrides dividedBy if set.