# Embed chatbots on website

wotSABot supports two ways of adding the chatbot on your website,

Embed as a chat bubble

1. Embed as an iframe

## Step 1: Get the embed code of the chatbot <a href="#step-1-get-the-embed-code-of-the-chatbot" id="step-1-get-the-embed-code-of-the-chatbot"></a>

To embed a chatbot on a webpage, simply click on the 3 dots icon on the bot management screen and choose 'Embed'.

Embed code of the chat widget

{% embed url="<https://youtu.be/o7E7VrsV4R4>" %}

## Step 2: Copy and paste the Embed code <a href="#step-2-copy-and-paste-the-embed-code" id="step-2-copy-and-paste-the-embed-code"></a>

Copy & paste the code snippet on the website where you want to embed the chatbot.

There are 2 ways to embed.

**Embed as chat bubble**

Shows up as a small bubble on the corner of your website. Bubble can open/close on click.

Chat bubble

<figure><img src="https://2470905975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXrVLBs72MhHY0kvLRfMY%2Fuploads%2FIY84MMkLVNGrrdADhSXF%2FBotBubble.png?alt=media&#x26;token=012c5b80-480a-4ead-89b0-e1b6d630aeeb" alt=""><figcaption></figcaption></figure>

Always make sure you add the chat widget code on the \<body> of the website HTML so that it displays on all pages of your website.

Chat bubble codeCopy

{% code overflow="wrap" %}

```
<script src='https://app.wotsabot.ai/chat-widget/KYi3WCJkk9if101023723428bvMtch1n.js' defer></script>
```

{% endcode %}

**Embed as iframe**

Embeds the chat widget inside a section of a webpage. The chatbot is fixed and does not open/close.

Embedded as an iframe

<figure><img src="https://2470905975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXrVLBs72MhHY0kvLRfMY%2Fuploads%2F2RyCAcR0O8BQ7Q6ZEAyO%2FBotBubble.png?alt=media&#x26;token=db964842-9ed0-409e-a7cd-15b221b7084f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2470905975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXrVLBs72MhHY0kvLRfMY%2Fuploads%2FZguPaXc8pkOytL99qvDf%2FScreenshot%202024-06-27%20at%205.13.07%E2%80%AFPM.png?alt=media&#x26;token=a5106a44-8b9e-4a4b-a0e2-d016f9e696f4" alt=""><figcaption></figcaption></figure>

You can enable or disable the header of the embed i.e. the green portion you see on top by writing **display\_header=false.**

Also, you can add a frameborder using the field **frameborder="1"**.

Iframe embed codeCopy

{% code overflow="wrap" %}

```
<iframe width="640" height="480" src="https://embed.wotsabot.ai/KYi3WCJkk9if101023723428bvMtch1n/bot/cJWQqh5anku8082500522107fJTkw94W?display_header=false&history_retention=false" frameborder="0"></iframe>
```

{% endcode %}

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 (%)

\ <br>
