> For the complete documentation index, see [llms.txt](https://aibotkit-docs.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aibotkit-docs.gitbook.io/documentation/embedding-your-chatbot/using-code-injection.md).

# Using Code Injection

Code Injection is the best method if you want your chatbot to **appear across every page of your website automatically**. Instead of adding the chatbot code block by block, you place it in the site-wide header or footer so it loads everywhere.

#### When to Use Code Injection

* You want the chatbot to appear on **all pages** without manually embedding.
* You’re using a website builder (Squarespace, Webflow, Shopify, Wix, etc.) that supports global code injection.
* You have direct access to your site’s **HTML, header, or footer files**.

***

#### How to Inject AI Bot Kit Code

1. Copy the embed code from your AI Bot Kit dashboard:

```html
<div id="ai-bot-kit-chatbot" data-chatbot-id="XXXXXXXX"></div>
<script src="https://app.aibotkit.io/embed.js" async defer></script>
```

2. Paste this code into your site’s **global header or footer** section.
   * Most website builders (Squarespace, Webflow, Wix, Shopify, etc.) provide a “Custom Code” or “Code Injection” option under **Settings → Advanced**.
   * If you’re editing your site manually, paste it before the closing `</body>` tag in your HTML template.
3. Save and republish your site.

***

#### Platform-Specific Notes

* **Squarespace**: Go to **Settings → Advanced → Code Injection → Footer**, paste the code, and save.
* **Webflow**: Go to **Project Settings → Custom Code → Footer Code**, paste the snippet, and publish.
* **Shopify**: Open **Online Store → Themes → Edit Code → theme.liquid**, and paste the code before `</body>`.
* **Wix**: Use **Settings → Advanced → Custom Code**, add your snippet, and set it to show on “All Pages.”

***

#### Pro Tips

* Place the code in the **footer** section rather than header whenever possible — it ensures faster page loading.
* If you’re using a caching plugin or CDN, clear the cache after adding the code.
* Test your chatbot on desktop and mobile to make sure the widget doesn’t overlap with other site elements.

***

⚡ **Why Use Code Injection?**

* **Site-wide coverage** → One paste = chatbot everywhere.
* **Cleaner setup** → No need to add blocks on individual pages.
* **Future-proof** → Any new pages you add will automatically have the chatbot.


---

# 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, and the optional `goal` query parameter:

```
GET https://aibotkit-docs.gitbook.io/documentation/embedding-your-chatbot/using-code-injection.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.