# Chat Widget

The Widgets Page serves as the central repository for all your widgets and chatbots. It offers a streamlined interface to manage, edit, and create new widgets.

To reach the Widgets Page, simply click on 'Widgets' located in the main menu. 

Each widget can be updated. Users can make necessary modifications and save changes with ease.

### Create a new Chat Widget

Users have the flexibility to create multiple chatbots, each tailored for different websites or purposes.

Clicking on the 'Add Widget' button will navigate users to the 'New Chat Widget' page, where the creation process begins.

<figure><img src="/files/3eZY76brlrqWy55VWbb4" alt=""><figcaption><p>Add a new chatbot from bodt.io</p></figcaption></figure>

### Configuration

You can customize the following settings of the bot&#x20;

**Bot Logo**

Enter a URL that should be used as a logo for your widget. We recommend having an image that is square in shape (aspect ratio of 1:1)

**Brand Color**

Enter a color code (hex code) for your brand. If you are unsure how to find the color code for your brand, use a tool like <https://imagecolorpicker.com/en> to find the hex code of your desired color

**Text Color**

This is the color in which the text will appear in the header region of the bot widget

**Welcome Message**

This message is shown to all users who interact with your chatbot for the first time. Use this section to tell them about the magical bot on your website or promote your services.&#x20;

Once you have configured all settings, click on 'Save'.

### Embed

The last step of your onboarding journey is to embed the widget in your website. You can choose to either embed as a ChatBot or as an iFrame.

#### ChatBot

You need to copy the code and insert it before the `</body>` tag on your website.  This will show the chatbot on your website where the user can interact with your data

#### iFrame

If you would like to show a full-page iframe embedded for people to interact with your bot, copy the code in the iFrame section and add it anywhere on your webpage.&#x20;

You can also share this code with your web developer, who can assist you in setting up this code on your website.

<figure><img src="/files/pKNuZIh28AyenSw1BA00" alt=""><figcaption><p>Embed a chatbot or iFrame from bodt.io</p></figcaption></figure>


---

# 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.bodt.io/chat-widget.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.