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

# Add the chatbot to your website

> Copy the embed code from your dashboard and add it to your website, with steps for WordPress, Shopify, Squarespace, Wix, Webflow, and plain HTML.

To show your chatbot on your website, you add one script to your site. The script adds a chat icon to the corner of every page that has the script.

## Before you start

* Role: Manager or higher on the chatbot. See [Invite and manage team members](/docs/guides/account/team-members).
* Access to your website's code, or to the "custom code" settings of your website builder.
* Optional: test your chatbot first with the preview in your dashboard. See [Control where the chatbot appears](/docs/guides/install/control-where-it-appears#test-before-you-go-live).

## Copy the embed code

<Steps>
  <Step title="Open Installation">
    In your chatbot's sidebar, select **Installation**.
  </Step>

  <Step title="Copy the JavaScript embed">
    In **Embed Options**, find **JavaScript Embed**. Select **Copy**.
  </Step>
</Steps>

The code looks like this. Your copy already has your chatbot ID in place of `YOUR_CHATBOT_ID`.

```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>
```

Always copy the code from your **Installation** page. Do not type it by hand.

## Add the code to your website

You can paste the code in the `<head>` section or just before the closing `</body>` tag. Both work. The script loads in the background, so it does not slow down your page.

<Tabs>
  <Tab title="HTML">
    1. Open the HTML of your page, or of the template that all your pages share.
    2. Paste the code just before the closing `</body>` tag, or in the `<head>` section.
    3. Save the file and upload it to your web server.

    Add the code to every page where you want the chat, or to a shared layout so it is on all pages.
  </Tab>

  <Tab title="WordPress">
    Use the SiteGPT plugin. It needs only your chatbot ID, not the code.

    1. On the **Installation** page, find **Chatbot ID** and select **Copy**.
    2. In your WordPress admin, go to **Plugins** > **Add New Plugin**.
    3. Search for **SiteGPT**.
    4. Select **Install Now**, then **Activate**.
    5. Go to **Settings** > **SiteGPT**.
    6. Paste your chatbot ID.
    7. Select **Save Changes**.

    The plugin adds the chat to every page of your site. To hide it on some pages, use [Excluded Pages](/docs/guides/install/control-where-it-appears#hide-the-chat-icon-on-some-pages).

    If you cannot use the plugin, paste the embed code into your site footer with a plugin that adds header and footer code.
  </Tab>

  <Tab title="Shopify">
    1. In your Shopify admin, go to **Online Store** > **Themes**.
    2. Next to your current theme, select **Actions** > **Edit code**.
    3. In the **Layout** folder, open `theme.liquid`.
    4. Find the closing `</body>` tag.
    5. Paste the code just before `</body>`.
    6. Select **Save**.

    The chat shows on all pages of your store.
  </Tab>

  <Tab title="Squarespace">
    1. In Squarespace, open the code injection settings for your site.
    2. Paste the code in the footer box.
    3. Save your changes.

    Squarespace offers code injection only on some of its plans. If you do not see it, check your Squarespace plan.
  </Tab>

  <Tab title="Wix">
    1. In your Wix site settings, open the custom code settings.
    2. Add new custom code and paste the code in the code box.
    3. Set the code to load on all pages.
    4. Set the code to load at the end of the body.
    5. Apply your changes.
  </Tab>

  <Tab title="Webflow">
    1. In your Webflow project settings, open the custom code settings.
    2. Paste the code in the footer code box.
    3. Save your changes.
    4. Publish your site.

    To add the chat to one page only, paste the code in an Embed element on that page.
  </Tab>

  <Tab title="Other platforms">
    Most website builders and content management systems have a setting for custom code that loads on every page. It is often called "Custom Code", "Code Injection", or "Header and Footer scripts".

    1. Find that setting in your platform.
    2. Paste the code in the footer or body-end box. If there is only a header box, paste it there.
    3. Save and publish your site.
  </Tab>
</Tabs>

## Check that it works

1. Open your website in a new private browser window.
2. Wait a few seconds. The chat icon shows in the bottom corner of the page.
3. Select the chat icon and ask a question that your content answers. The chatbot answers.

<AccordionGroup>
  <Accordion title="The chat icon does not show">
    * Check that the code is on the page. View the page source and search for `sitegpt`.
    * Check that the chatbot ID in the code matches the ID on your **Installation** page.
    * If you set **Allowed Domains**, check that your website's domain is in the list. The browser console shows a message from SiteGPT if the domain is not allowed. See [Control where the chatbot appears](/docs/guides/install/control-where-it-appears).
    * If the page is in **Excluded Pages**, the chat icon does not show on it.
    * The script does not load if the chatbot is disabled, or if the account has no active subscription.
    * Ad blockers and strict Content Security Policy rules on your site can block the script.

    For more fixes, see [Troubleshooting](/docs/guides/troubleshooting).
  </Accordion>

  <Accordion title="The chat shows on some pages but not others">
    The code must be on every page where you want the chat. Put it in a shared layout, theme file, or site-wide custom code setting.
  </Accordion>
</AccordionGroup>

## Embed code options

You can add options to the end of the script URL in the code. For example, `.../widget/YOUR_CHATBOT_ID.js?mobile=false`. To use more than one option, join them with `&`: `.../widget/YOUR_CHATBOT_ID.js?mobile=false&delay=5000`.

| Option                                      | What it does                                                                                                                                                                |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `hideBubble=true`                           | Does not create the floating chat at all. Use it with the [inline container](/docs/guides/install/control-where-it-appears#show-the-chat-inside-a-page).                         |
| `hideButton=true`                           | Creates the floating chat window but hides the chat icon and the tooltip. Use it when you open the chat from your own button with the [widget SDK](/docs/developers/widget-sdk). |
| `open=true`                                 | Opens the chat when the page loads. If the visitor closed the chat before, it stays closed.                                                                                 |
| `mobile=false`                              | Hides the chat icon on screens narrower than 640 px, and stops auto-open there. The script still loads on those screens.                                                    |
| `delay=<milliseconds>`                      | Waits this long before it adds the chat icon. The default is `2000` (2 seconds).                                                                                            |
| `iconPosition=LEFT` or `iconPosition=RIGHT` | Puts the chat icon on the left or right. This overrides the **Position** setting on the **Appearance** page.                                                                |

To open, close, or control the chat from your own code, see the [JavaScript widget SDK](/docs/developers/widget-sdk). To send chat events to your analytics, see [Tracking events](/docs/developers/tracking-events).
