# Embed bots in iFrame

### How do I display the chatbot in iFrame?&#x20;

It is pretty simple and requires minor changes in the code that you will need to make in-order to have the bot trigger in different window or tab. You can follow the following steps;&#x20;

* Go to 'Channel Configuration -> Web -> Configuration'&#x20;
* Enter the URL of your website in 'Website URL' where you would like the bot to be deployed
* Copy the 'Code Snippet'&#x20;
* Replace the following script source;

```
<div id="root" style="height:500px; width:500px"></div>
<script
src="https://chatbot.supporthunt.io/chat-widget/kRq5aWtGnnYg054032275570H2y2XAMR.js
"widget-container-id="root"></script>
```

* With the following script;&#x20;

```
<div id="root" style="height:500px; width:500px"></div>
<script
src="https://chatbot.supporthunt.io/chat-widget/g39gy4APmcc2095157146729LGoQGaw2.js
"widget-container-id="root"></script>
```

{% hint style="info" %}
You can change the height and the width of the chatbot or chatbot screen based on your preference by making changes in the above code, under "Height" & "Width" option by using either pixels (px) or percent (%)
{% endhint %}

* Copy & paste the code snippet post making changes in the code on those pages of your website where you would like to display the bot

{% hint style="info" %}
Support Hunt recommends having the code copied before the \<Body> tag in-order to ensure that the bot triggers as soon as the web page loads
{% endhint %}
