> For the complete documentation index, see [llms.txt](https://help.supporthunt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.supporthunt.com/chatbot-customisation/embedding-the-chatbot.md).

# Embedding the Chatbot

With this functionality, you can now have multiple chatbots on different sections of a page in order to interact with the visitors without any additional CSS/HTML efforts from your end. 

### Benefits of embedding a chatbot? 

* Improves UX with an immersive view 
* Make your content interactive
* Embed multiple bots on a single page 
* Ability to trigger certain bot only on certain section based on trigger condition

### What are the ways to embed the chatbot? 

There are two ways through which the chatbot can be embedded to your site, they are; 

<details>

<summary>As a Chat Bubble</summary>

This will allow you to view the chatbot as a chat bubble. You can either have in on one page or on multiple pages based on your preference. All you will need to do is copy the following snippet on the pages of your website as per your preference.&#x20;

{% code overflow="wrap" %}

```
<script src='https://chatbot.supporthunt.com/chat-widget/3aTeYpJ9CRfx041341925347viF2LaIZ.js' defer></script><br>
```

{% endcode %}

</details>

<details>

<summary>As an iFrame</summary>

This will allow you to embed the chatbot on the particular section of the page. All you need to do is copy the following snippet on the page of your website as per your preference.&#x20;

You can also modify Width & Height using *width & height* field based on your preference in the following snippet

You can also hide or show the Header of the chatbot using the *display\_header* field based on your preference. By Default it will be off.

{% code overflow="wrap" %}

```
<iframe width="640" height="480" src="https://embed.test.wotnot.io/3aTeYpJ9CRfx041341925347viF2LaIZ/bot/666REE2YvBBk063838271765xl38Ddlv?display_header=false&history_retention=false" frameborder="0"></iframe><br>
```

{% endcode %}

</details>

### How do I embed a Chatbot?&#x20;

You can follow the following steps to embed the chatbot on your website;&#x20;

* Go to 'Bot Builder'&#x20;
* Click on 'Menu Gear' against the bot you would like to embed
* Select 'Embed'&#x20;
* Click on 'Two Page' icon to copy the code provided for displaying it as Chat Bubble or having it an iFrame based on your preference
* Paste it either on all the pages or selective pages based on your preference

{% hint style="info" %}
By default this will be 'On' for all the chatbots build for web channel
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://help.supporthunt.com/chatbot-customisation/embedding-the-chatbot.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.