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

# Install on your website

> Put your chatbot on any site with one script tag, an inline embed, an iframe, or the WordPress plugin.

Open **Installation** in your chatbot's sidebar. It shows your chatbot ID and
ready-to-copy snippets. Everything on this page works on any website; the
platform sections below just show where to paste.

## The script snippet (recommended)

This adds the floating chat bubble to your site:

```html theme={null}
<script type="text/javascript">
  window.$sitegpt = [];
  (function () {
    d = document;
    s = d.createElement('script');
    s.src = 'https://sitegpt.ai/widget/YOUR_CHATBOT_ID.js';
    s.async = 1;
    d.getElementsByTagName('head')[0].appendChild(s);
  })();
</script>
```

Replace `YOUR_CHATBOT_ID` with your chatbot ID from the Installation page,
or just copy the pre-filled snippet there. Paste it into your site's HTML;
inside `<head>` or before `</body>` both work, since the loader is
asynchronous and does not block your page.

The script URL accepts a few options:

| Parameter          | Effect                                                                          |
| ------------------ | ------------------------------------------------------------------------------- |
| `?hideBubble=true` | Loads the widget without the floating bubble. Used with the inline embed below. |
| `?open=true`       | Opens the chat window on page load.                                             |
| `?mobile=false`    | Skips loading the widget on mobile.                                             |
| `?delay=3000`      | Delays loading by that many milliseconds.                                       |

Combine them like any query string:
`.../widget/YOUR_CHATBOT_ID.js?hideBubble=true&delay=2000`.

## Inline embed

To place the chat inside the page (a support page, a help center) instead of
floating over it:

```html theme={null}
<!-- The container(s) where the chat should render -->
<div
  class="sitegpt-chat-widget"
  data-sitegpt-id="YOUR_CHATBOT_ID"
  style="width: 100%; height: 600px;"
></div>

<!-- The script, with the bubble hidden -->
<script type="text/javascript">
  window.$sitegpt = [];
  (function () {
    d = document;
    s = d.createElement('script');
    s.src = 'https://sitegpt.ai/widget/YOUR_CHATBOT_ID.js?hideBubble=true';
    s.async = 1;
    d.getElementsByTagName('head')[0].appendChild(s);
  })();
</script>
```

## iFrame

When you cannot run scripts at all (some site builders and portals), embed
the chat page directly:

```html theme={null}
<iframe
  src="https://sitegpt.ai/c/YOUR_CHATBOT_ID"
  width="400"
  height="600"
  frameborder="0"
></iframe>
```

The iframe shows the full chat experience but cannot offer the floating
bubble, [SDK control](/docs/developers/sdk), or
[tracking events](/docs/developers/tracking-events) on the host page. Prefer the
script when possible.

## Platform guides

<Tabs>
  <Tab title="WordPress">
    Use the official plugin; no code needed:

    1. In WordPress admin, go to **Plugins → Add New** and search for
       **SiteGPT**.
    2. Install and activate the plugin.
    3. Open the **SiteGPT** menu in the WordPress admin sidebar and paste
       your chatbot ID.

    The plugin loads the same widget as the script snippet, so the SDK and
    tracking events work identically. Prefer a code approach? Paste the
    script snippet with a plugin like WPCode, or in your theme's footer.
  </Tab>

  <Tab title="Shopify">
    In your Shopify admin: **Online Store → Themes → Edit code**, open
    `theme.liquid`, and paste the script snippet right before `</body>`.
    Save, and the chatbot appears on every page of your store.
  </Tab>

  <Tab title="Squarespace">
    **Settings → Advanced → Code Injection**, paste the script snippet into
    the **Footer** box, and save. Code injection requires a Squarespace plan
    that includes it (Business and up).
  </Tab>

  <Tab title="Wix">
    **Settings → Custom Code**, select **Add Custom Code**, paste the script
    snippet, apply it to **All pages**, and set it to load in the **Body -
    end**. Custom code requires a Wix premium plan with a connected domain.
  </Tab>

  <Tab title="Webflow">
    **Site settings → Custom Code**, paste the script snippet into the
    **Footer Code** box, save, and publish. Custom code requires a paid
    Webflow site plan.
  </Tab>

  <Tab title="Framer">
    **Site Settings → General → Custom Code**, paste the script snippet into
    the end-of-body section, and publish.
  </Tab>
</Tabs>

## Verify it works

Open your site in a private browser window. The bubble should appear within
a few seconds. Ask a question you know the chatbot can answer.

<AccordionGroup>
  <Accordion title="The bubble does not appear">
    Check that the snippet is on the page (view the page source and search
    for `sitegpt`), and that your chatbot ID matches the Installation page. Content
    blockers and strict Content-Security-Policy headers can also block the
    script; allow `sitegpt.ai` in your CSP if you use one.
  </Accordion>

  <Accordion title="It appears on some pages but not others">
    The snippet must be on every page where you want the chat. Site-wide
    layouts, theme footers, or a tag manager get it everywhere at once.
  </Accordion>

  <Accordion title="I want to control it from my own code">
    The [JavaScript SDK](/docs/developers/sdk) opens and closes the widget,
    sends messages, injects CSS, and identifies logged-in users. The
    [tracking events](/docs/developers/tracking-events) page covers analytics.
  </Accordion>
</AccordionGroup>
