# 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.

***

👉 Now you’ll have 4 clean sections under **Embedding Your Chatbot**:

1. Getting Your Embed Code
2. Squarespace Integration
3. WordPress Integration
4. Code Injection


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.