Amity Solutions
  • Announcements
  • Amity Bots Platform
    • Dashboard
      • User Journey
    • Users
      • Setup Microsoft Entra ID Integration
      • Password Policy
      • Typing animation
    • Channels
      • Connect to Facebook Page
      • Connect to LINE Official Account
      • Using Webchat SDK
      • Connet to Custom Channel
    • Audience
    • Chatbot
      • Intent
      • Entity
      • Mapper
      • Chatlogic
    • Message Template
      • Creating Message Template
      • Message Types Examples
    • Rich Menu
      • Linking Rich Menu to Channel
    • Campaign
      • Broadcast
      • ChatAds
  • Amity Bots Live Chat
    • Channels
    • Ticket
      • Ticket Management
      • Ticket Detail
      • Ticket Wrap up
      • Auto assign
    • Team Management
    • Livechat
    • Message Type
    • Livechat Dashboard
    • Audience's Profile
    • Customer Satisfaction Survey
      • Customer Satisfaction Score
    • Agent Copilot✨
  • Amity Bots Gen AI Platform
    • Dashboard
    • Assistants
      • Chat Sandbox
      • Assistant API Integration
      • Message Report
    • Fulfillments
    • Knowledge Base
      • Documents and Files (Legacy)
      • CSV File
      • Documents and Files
      • External Knowledge Base
    • AI Lab
    • Memorized Response
  • Insight
    • Journey Insight
  • Guides
    • Creating a simple chatbot
    • Setting up a LINE Rich Menu
    • How to use ChatAds
  • API Reference
  • Versioning & Upgrade Policy
Powered by GitBook
On this page
  • Create Webchat SDK channel
  • Implement Webchat SDK
  • Webchat Mode
  • Fullscreen Mode
  • Bubble Mode
  • Rich Menu Sizing:

Was this helpful?

  1. Amity Bots Platform
  2. Channels

Using Webchat SDK

PreviousConnect to LINE Official AccountNextConnet to Custom Channel

Last updated 1 year ago

Was this helpful?

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>
  1. 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:

  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.
}
  1. 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.

Fullscreen Webchat SDK
Webchat SDK appears as widget within a page in Bubble mode