> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatfly.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed ChatFly on Your Site

> Explore the steps to effortlessly **Embed ChatFly Bot on Your Website** in this comprehensive guide.

## Iframe Integration

To seamlessly integrate the ChatFly chatbot into any section of your website, follow these steps:

1. Insert the following iframe code into your HTML:

```html theme={null}
<iframe
  src="https://app.chatfly.co/chat/xxxx-xxxx-xxxx-xxxx-xxxx"
  width="100%"
  height="300"
  style="border: 1px solid black;"
></iframe>
```

2. Customize the `src` attribute by replacing `xxxx-xxxx-xxxx-xxxx-xxxx` with your specific bot ID.

## Chat Bubble Implementation

Enhance user engagement by adding a chat bubble to the bottom right of your website. Here's how:

1. Add the following script tags to your HTML:

```html theme={null}
<script>
  window.chatbotConfig = {
    bot_id: "xxxx-xxxx-xxxx-xxxx-xxxx",
  };
</script>
<script src="https://app.chatfly.co/Chat.js"></script>
```

2. Ensure to replace xxxx-xxxx-xxxx-xxxx-xxxx with your actual bot ID.

<Warning>
  Remember to replace the placeholder xxxx-xxxx-xxxx-xxxx-xxxx in both the iframe and script tags with the unique bot
  ID associated with your ChatFly Bot.
</Warning>

## Additional Tips

* Experiment with different iframe dimensions to suit your website's layout.
* Customize the chat bubble's appearance and behavior by adjusting parameters in the window\.chatbotConfig object.

Now, seamlessly enhance your website's interactivity with ChatFly!