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

# Manual

> Add the homie AI chat widget to any website by pasting the embed script before the closing body tag.

The manual method is the universal way to install homie AI. It works on any site that lets you edit HTML: paste the embed script before the closing `</body>` tag on every page and the chat bubble loads for your shoppers.

<Note>
  Before you start, make sure you have:

  * An assistant created on the platform
  * Your embed script copied from the assistant's **Publish** area
  * The ability to edit your site's HTML
</Note>

## Add the embed script

<Steps>
  <Step title="Copy your embed script">
    Open your assistant on the platform, go to its **Publish** area, and copy the script. It already contains your `chatbotId`.

    <Frame>
      <img src="https://mintcdn.com/homieai/t1ZSM74lXOpzsQLS/images/integrations/connect.png?fit=max&auto=format&n=t1ZSM74lXOpzsQLS&q=85&s=ddc2630812f2d8706ba54bc3b19cb1a3" alt="Platform Publish area showing the copyable script snippet" width="1340" height="978" data-path="images/integrations/connect.png" />
    </Frame>
  </Step>

  <Step title="Paste it before the closing body tag">
    Add the script just before the closing `</body>` tag on every page of your site:

    ```html theme={null}
    <script
      src="https://cdn.yourhomie.ai/embed.min.js"
      chatbotId="YOUR-CHATBOT-ID"
      defer
    ></script>
    ```

    <Warning>
      Replace `YOUR-CHATBOT-ID` with your own `chatbotId` from the platform. Copying the script directly from the **Publish** area does this for you.
    </Warning>
  </Step>

  <Step title="Save and verify">
    Save your file and reload the page in your browser.
  </Step>
</Steps>

## Optional attributes

The script accepts optional attributes to pass extra context to your assistant:

| Attribute  | Purpose                                                       |
| ---------- | ------------------------------------------------------------- |
| `storeId`  | Associate the session with a specific store                   |
| `platform` | Identify the host platform (for example `platform="shopify"`) |
| `lang`     | Force the widget language                                     |
| `country`  | Pass the shopper's country                                    |
| `currency` | Pass the active currency                                      |

```html theme={null}
<script
  src="https://cdn.yourhomie.ai/embed.min.js"
  chatbotId="YOUR-CHATBOT-ID"
  storeId="store-eu-01"
  lang="en"
  defer
></script>
```

For programmatic configuration, methods, and events, see the [Client API](/en/api-reference/client/overview).

<Tip>
  With the embed script, you do not need to pass the current page URL manually. The embed sends it to the chat
  automatically — even when the page changes later.
</Tip>

<Check>
  Reload your site. The homie chat bubble appears in the bottom-right corner. Open it and send a test message.
</Check>

## Direct iframe embed

When you intentionally want to render the chat as a dedicated iframe — for example on in-store terminals, kiosks, or inside a controlled app shell — you can skip the embed script and use the chat URL directly:

```html theme={null}
<iframe
  src="https://chat.yourhomie.ai/YOUR-CHATBOT-ID"
  width="420"
  height="760"
  style="border:0;"
  allow="microphone"
  title="homie AI chat"
></iframe>
```

With a direct iframe, context is appended as regular query parameters:

```html theme={null}
<iframe
  src="https://chat.yourhomie.ai/YOUR-CHATBOT-ID?store=store-berlin-001&currentUrl=https%3A%2F%2Fwww.example-store.com%2Fproducts%2Fcordless-drill-123&disableLink=true"
  width="420"
  height="760"
  style="border:0;"
  allow="microphone"
  title="homie AI chat"
></iframe>
```

| Parameter     | Purpose                                                                               |
| ------------- | ------------------------------------------------------------------------------------- |
| `store`       | Associate the session with a specific store — note the name is `store`, not `storeId` |
| `currentUrl`  | The page the shopper is on, always passed in URL-encoded form                         |
| `disableLink` | Set to `true` if product and content links inside the chat should not be clickable    |

<Warning>
  With a direct iframe URL, `currentUrl` is only the initial context. If the host page changes later, you need to
  update the iframe URL yourself. The embed script handles this automatically.
</Warning>

## Troubleshooting

* **Widget not showing?** Check that your `chatbotId` matches the one on the platform, that the script sits before the closing `</body>` tag, and that your content security policy allows the embed script from `cdn.yourhomie.ai` and the chat to load from `chat.yourhomie.ai`.
* **Script or iframe not loading?** Open the browser console and look for network or error messages, and verify the domain in the URL.
* **`currentUrl` not recognized?** Check that the URL is passed in encoded form.
* **Still stuck?** See the [Client API troubleshooting guide](/en/api-reference/client/troubleshooting).

## Next steps

<CardGroup cols={2}>
  <Card title="Client API" icon="code" href="/en/api-reference/client/overview">
    Configure the widget and call methods from your site.
  </Card>

  <Card title="Troubleshooting" icon="bug" href="/en/api-reference/client/troubleshooting">
    Resolve common installation and runtime issues.
  </Card>
</CardGroup>
