# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.amitysolutions.com/amity-solutions/amity-bots-platform/channels/using-webchat-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.