## Bot mapping
Bot mapping is an API that is used to check and update bot details such as bot icon, position, bot name, and so on from the backend.
When a chat widget is loaded, an API call named **bot-load-details**, which contains all the mapping details of the chat widget, gets loaded at the backend. This API call consists of the skin of the entire chat widget. The skin includes elements and values of all the options that you have selected while customizing the chat widget on the settings page.
<br/>
In this article, you will learn:
* [How to view bot mapping API](#api)
* [How to update values via bot mapping API](#details)
## 1. View bot mapping API
To view the bot mapping API, follow the below steps:
1. To preview your bot on a website, click **Deploy > Experience on a Website**. Click [here](https://docs.yellow.ai/docs/platform_concepts/channelConfiguration/web-widget#25-preview-chat-widget) to learn more.
<img src="https://i.imgur.com/8o40gQW.png" width="80%"/>
2. Your live chatbot is loaded, **right click** > **Inspect** > **Network** tab.
3. To view the API call details, refresh your page.
4. Expand **skin**, to view all the bot mapping details of the chat widget, .
---
## 2. Update values via bot mapping API
You can update the values of the various options in the chat widget via bot mapping based on your requirements.
Assume you want to move the bot icon to the left side of the website, which is currently positioned to the right. You can change the position of the chat widget to the left by updating values via the bot mapping API.
:::note
You can update the values of the chat widget only in the **Staging**, **Production**, and **Development** environments.
:::
To update the values via the bot mapping API, follow the below steps:
1. Log in to [Yellow.ai Platform](https://cloud.yellow.ai).
2. On the module switcher, select your bot and click **Channels**.
3. Click on **Chat widget**.
4. The Chat widget screen appears as shown below.
5. On the chat widget screen, **right-click > Inspect > Network**.
6. To view the API call details, refresh your page.
7. Select bot mapping **Request Method: Post** from the header section.
8. Under the name section, right-click on the mapping bot (with "Request Method: Post") and **Copy > Copy as cURL**.
9. Navigate to postman and click **My Workspace > Import**.
10. Under the **Raw text** tab, paste the cRUL and click **Continue**.
11. Click **Import**.
12. Under the **Body** tab, enter **"alignment": true** in the Skin snippet and click **Send**.
13. Under the response tab, you can view that bot mapping is updated.
14. Navigate to **Studio** and click the **Preview** icon.
15. Refresh the page to view the chat widget icon moved to the left.
Watch a sample walkthrough on how to update the values of the chat widget via bot mapping.
(Video goes here)
Similarly, you can update other values of the chatwidget via bot mapping. Refer to the following table:
Key | Value | Sample | Description |
--------|------|-----|-----|
botDesc | text | "Web bot powered by Yellow AI" | Updates the bot description. |
botIcon | CDN link | https://cdn.yellowmessenger.com/Q5O94PUJ9big1668158466890.jpg | Allows you to set the bot icon.
botIconAlt | text | Web bot powered by Yellow AI | Allows you to update the alternate description of the bot icon. It is displayed when the bot icon does not load.
botName | text | Webby | Allows to updates the bot name.
botTitle | Text | Chat bot | Updates the bot title.
alignLeft | Boolean: true, false | false | Set bot icon position to left (when true), or right (when false). |
animationSpeed | Option | slow | Allows you to set the speed of the animation for your bot icon. |
animationType | Option: TaDa, Zoom in, Flash, Bounce, , or Heartbeat. | bounce | Allows you to set the animation type. |
enableAutoComplete | Boolean: true, false | false | Enables global auto complete. |
botClickIcon | CDN link | https://cdn.yellowmessenger.com/Q5O94PUJ9big1668158466890.jpg | Allows you to setup a custom bot icon different from avatar.
enableMessageFeedback | Boolean: true, false | false | Enables message feedback for latest bot message. (Note: Displayed only for last message when multiple messages are sent in a single step). |
font-size | Option | Small, Medium, or Large. | Allows you to set the font size of the widget on the website. |
fontFamily | Option | Nutino, Titillium Web, Roboto, Open Sans, Lato, or Rubik. | Allows you to set the font style for your widget. |
headerBackgroundGradient | HEX Values | linear-gradient(to right, #ffea00 , #ffa200) | Allows you to set the title color (color 1 and color 2 - two colors forming gradient will be applied to the title bar) for your widget. |
hideUpload | Boolean: true, false | false | Enable/Disable attachment button in input bar of chat widget. |
minimised | Boolean: true, false | false | Allows you to enable the minimise icon for the chat widget. |
mobileIconType| Option | circle or square | Allows you to set the bot icon for the mobile app. |
multiLineTextInput | Boolean: true, false | false | Allows you to enter multiple lines of text in a single input. |
partiallyOpen | Boolean: true, false | false | Allows you to set the initial display mode of the widget on websites. |
Color 1 | HEX Value | #4a4a4a | Allows you to set a solid/gradien color for the chat widget. |
refreshContext | Boolean: true, false | false | Allows you to view the chat history. |
scrollToBottomAlways | Boolean: true, false | false | Allows to navigate to the last message when there are multiple messages in a single step. |
slowMessages | Boolean: true, false | false | Allows you to set a small delay for bot messages. |
soundOnBotLoad | Boolean: true, false | false | Allows you to notify with a sound when a bot loads. |
soundOnMessage | Boolean: true, false | false | Allows you to notify with a sound when a message is received. |
speak | Boolean: true, false | false | Allows you to enable text-to-speech options for the chat widget. |
tabSession | Boolean: true, false | false | Allows you to refresh (not retain) the chat history when the bot is opened in a new tab/window.|
Complementary color | HEX Value | #4a4a4a | Allows you to set the color of other components of the bot such as Quick Replies, Multi-select, and so on. |
totalIteration | Option: one, two, three, four, five | three | Allows you to set how many times the animation of the bot icon should display.
useSTT | Boolean: true, false | false | Allows you to enable the speech-to-text option for the chat widget. |
webIconType | Option: circle, square, bar | circle | Allows you to set the desired bot icon type for desktop.
webViewEnabled | Boolean: true, false | false | Allows you to enable the webview for the chat widget. |
widget-size | Options: large, small, or medium | medium | Allows you to set your preferred widget size.
microsoftSpeechLanguages | |[""en-US"", ""hi-IN""] | Allows you to set the languages for text-to-speech. |
hideBranding |Boolean: true, false | false | Allows you to enable your brand at the bottom of the chat widget. Note that it is supported only for the desktop. |
autoSendSTT |Boolean: true, false | false | Allows you to automatically send the speech-to-text input to the bot. |
icon_192 | CDN Link | https://cdn.yellowmessenger.com/ywjbhy3JZib51670853128150.png | Allows you to update the PWA bot icon with a resolution of 192. |
icon_512 | CDN Link | https://cdn.yellowmessenger.com/ywjbhy3JZib51670853128150.png |Allows you to update the PWA bot icon with a resolution of 512. |
Watch a sample walkthrough on how to update the description of the chat widget via bot mapping.
(Video goes here)
Watch a sample walkthrough on how to debug message in the **Preview** section in Studio.
(Video goes here)
Sign in with Wallet
Connect another wallet