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
Include the SDK file in your page:
<script src="http://webchat-sdk.amitysolutions.com/sdk/ams_sdk.js"></script>
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

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.

Rich Menu Sizing:
The richmenuSetting
controls the height of the rich menu area. There are 3 options:
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.
fixedHeight - Sets an absolute fixed height in pixels. For example:
richmenuSettings: {
fixedHeight: 300 // Rich menu with 300px in height.
}
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.
Last updated
Was this helpful?