---
title: Set up Chat widget
sidebar_label : Set up Chat widget
keywords : [iframe]
---
This document helps you understand how to access the Chat widget and will guide you through how to customise, deploy, and preview it before setting it up on the website.
## 1. Access Chat widget
To access Chat widget, follow these steps:
1. Log in to [Yellow.ai Platform](https://cloud.yellow.ai).
2. On the module switcher, click **Channels**.
3. Click on **Chat widget**.
4. The Chat widget screen appears as shown below.
## 2. Customize Chat widget
### 2.1 Customize bot look & feel (Design)
The **Widget Panel** helps you customize the look and feel of the chat widget.
<img src="https://i.imgur.com/nbztdK4.jpg)" alt="drawing" width="80%"/>
To customize the design, make the required changes as per the descriptions provided in the following table, and click **Save changes**.
Option | Description
-------- | ---------
Custom Bot logo | Click **Add** icon and set the logo for the bot. <br/> **Note:** It is recommended to upload images with a size of 150 x 150 pixels. |
Bot name | Enter the name of the bot as per your business requirement. |
| Bot description | Enter the description of your bot. |
Font style | Choose the default font for the bot.
Font size | Set the font size of the widget on the website - Small, Medium, or Large.
Widget size | Set your preferred widget size - Small, Medium, or Large.
Primary color | Set the color of the header. Match the widget colour with that of the client's website. See the screenshot below.
Secondary color | Set the color of other components of the bot such as chat.
| Position | Set the position of the widget on the website - Bottom Left and Bottom Right. |
| Initial state for desktop | Set the initial display mode of the widget on websites - Half opened, Minimised, or Conversational layout. |
<img src="https://i.imgur.com/r1GHIfj.png)" alt="drawing" width="80%"/>
***
### 2.2 Set bot icon
The **Bot Icon** tab allows you to set the desired logo for your bot. You can also set the bot icon from the **Preview screen** by clicking on the bot icon.
<img src="https://i.imgur.com/lCetTMt.png)" alt="drawing" width="60%"/>
<br/>
Option | Description
--------|---------
Icon Shape | Set the desired bot icon type for web and mobile apps. <br/>For web applications, you can select Circle, Square, or Bar, and for mobile app, you can select Circle or Square.<br/>You can set the bot icon by choosing one of the following options. <br/> **Same as avatar**: Set the shape of the bot icon. <br/> <img src="https://i.imgur.com/OgVl8Dm.png)" alt="drawing" width="80%"/> <br/> **Upload custom icon**: Set the customised logo for the bot by clicking the **Add** icon. <br/> <img src="https://i.imgur.com/E8dBn9d.png))" alt="drawing" width="60%"/>
Bot icon animations | Select the **Animation type** from the drop-down to add animation to your bot icon. <br/> <img src="https://i.imgur.com/wC0q6Yt.png)" alt="drawing" width="60%"/>
|
***
### 2.3 Configure bot features (Other settings)
You can configure your chatbot by enabling or disabling the following features on the bot.
<img src="https://hackmd.io/_uploads/HkyfLpw4n.png)" alt="drawing" width="80%"/>
#### General settings
You can set up basic configurations for your chat widget.
Option | Description
-------- | ---------
Auto-complete | Enable auto-complete to allow the bot to auto-predict words as the user types.
Message feedback | Enable to allow capturing feedback for every bot message in a conversation.
Attachment | Enable this option to allow adding attachments via the chat widget.
Always scroll chat window to bottom | Enable this option to navigate to the last message when there are multiple messages in a single step, as each message loads one by one.
Slow messages | Enable this option to add a small delay to bot messages, a typing indicator is displayed to make it look more natural. It is recommended to use this for all bot messages for a better experience.
Multiline input | Enable this option to enter multiple lines of text in a single input. After enabling this option, by clicking on the enter key, it will take the cursor to next line instead of sending the message.
#### Chat history
Displays the user’s chat history with bot and agent.
Option | Description
-------- | ---------
Show history of the conversation | Disable this to refresh the bot's chat history when the page is reloaded. Enable to show the chat history even after the page is refreshed. By default, this option is disabled.
Create fresh session for every new tab | Enable this option to refresh (not retain) the chat history when the bot is opened in a new tab/window.
#### Notifications
Notifies the users when they receive a new message.
Option | Description
-------- | ---------
Unread message(s) badge | Enable this option to display the count of unread messages on the bot icon. |
Unread notification in browser tab | Enable this option to display a favicon and text in the browser tab (desktop) when users have unread messages from a bot or agent.
Message Sound | Enable this option to notify users when there are new messages from a bot or agent.
#### Speech & Dictation
Option | Description
-------- | ---------
Speech to text | Enable this option to allow users to respond to the bot with a human voice. For more information, click [here](https://docs.yellow.ai/docs/platform_concepts/channelConfiguration/speech-to-text).
Auto send | Enable this option to automatically send the translated text without clicking on send button.
Text to speech | Enable this option to allow the bot to respond to the user's queries with a human voice. For more information, click [here](https://docs.yellow.ai/docs/platform_concepts/channelConfiguration/text-to-speech).
***
### 2.4 Deploy chat widget
Now, your widget is set up with your preferred style and settings.
To deploy the widget on your website, follow these steps:
1. Navigate to the **Deploy** tab.
2. Copy the code using the respective icon, and paste it on your website.
<img src="https://i.imgur.com/8TnDcjf.png" width="40%"/>
2. In the same code, next to bot ID, add the following:
```
{ bot: '{botId}',alignLeft: true }
```
**Sample JavaScript to embed the chatbot on a website**:
```js
<script type = "text/javascript" >
window.ymConfig = {
"bot": "x1659503658437",
"host": "https://cloud.yellow.ai"
};
(function() {
var w = window,
ic = w.YellowMessenger;
if ("function" === typeof ic) ic("reattach_activator"), ic("update", ymConfig);
else {
var d = document,
i = function() {
i.c(arguments)
};
function l() {
var e = d.createElement("script");
e.type = "text/javascript", e.async = !0, e.src = "https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";
var t = d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(e, t)
}
i.q = [], i.c = function(e) {
i.q.push(e)
}, w.YellowMessenger = i, w.attachEvent ? w.attachEvent("onload", l) : w.addEventListener("load", l, !1)
}
})();
</script>
```
:::note
To view the bot in full screen mode, use the following link: https://cloud.yellowmessenger.com/pwa/live/YOUR_BOT_ID/?fullScreen=true
:::
### 2.5 Preview chat widget
As you design the bot, you can preview the changes in real time in the **Preview Screen** tab before you save it. When you choose colors, the chat preview updates automatically so that you can see what your widget will look like.
To preview your bot on a website, click **Deploy** > **Experience on a Website**.
<img src="https://i.imgur.com/8o40gQW.png" width="60%"/>
:::info
To share chatbot with other users, copy the bot link.
<img src="https://i.imgur.com/unAJYEl.png)" width="30%"/>
:::
***
Sign in with Wallet
Connect another wallet