> For the complete documentation index, see [llms.txt](https://helpdesk.m-chat.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpdesk.m-chat.ai/getting-started/publishing-your-bot/web/embed-chatbots-on-website.md).
# Embed chatbots on website
Embed the chatbot as a chat bubble or as an iframe on your webpage.
m-chat supports two ways of adding the chatbot on your website,
1. Embed as a chat bubble
2. Embed as an iframe
## Step 1: Get the embed code of the chatbot
To embed a chatbot on a webpage, simply click on the 3 dots icon on the bot management screen and choose 'Embed'.
## Step 2: Copy and paste the Embed code
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.
{% hint style="info" %}
Always make sure you add the chat widget code on the \ of the website HTML so that it displays on all pages of your website.
{% endhint %}
{% code title="Chat bubble code" overflow="wrap" %}
```
```
{% endcode %}
## Embed as iframe
Embeds the chat widget inside a section of a webpage. The chatbot is fixed and does not open/close.
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"**.
{% code title="Iframe embed code" overflow="wrap" %}
```
```
{% endcode %}
{% 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 %}