> For the complete documentation index, see [llms.txt](https://docs.amitysolutions.com/amity-solutions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.amitysolutions.com/amity-solutions/amity-bots-platform/channels/using-webchat-sdk.md).

# 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:

<figure><img src="/files/IhVVjjObaGEhQCY3KUEZ" alt=""><figcaption></figcaption></figure>

Record your channel ID to be used in the next step

## Implement Webchat SDK

1. Include the SDK file in your page:

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

2. Initialize the chat with required parameters:

```js
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

<figure><img src="/files/UKxDQ0ptDtau6dI3XEsX" alt="" width="187"><figcaption><p>Fullscreen Webchat SDK</p></figcaption></figure>

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.

<figure><img src="/files/OtVC6jgegb8rMqrxgHol" alt=""><figcaption><p>Webchat SDK appears as widget within a page in Bubble mode</p></figcaption></figure>

### 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:

<pre class="language-js"><code class="lang-js">richmenuSettings: { 
    fixedHeight: 300 // Rich menu with 300px in height.
<strong>}
</strong></code></pre>

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

```js
richmenuSettings: { 
    dividedBy: 2
}
```

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

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

{% hint style="warning" %}
Note: Only use `fixedHeight` OR `dividedBy`, not both. `fixedHeight` overrides `dividedBy` if set.
{% endhint %}