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

# Embed script

> Add the InboxMate chat widget to your website with a JavaScript snippet.

## Basic embed

Add this snippet before the closing `</body>` tag on any page where you want the widget to appear:

```html theme={null}
<script
  src="https://app.psquared.dev/widget.js"
  data-config='{"agentId": "your-agent-id"}'
  async
></script>
```

Replace `your-agent-id` with the ID from your agent's deploy settings.

## Configuration via script tag

Pass configuration as JSON in the `data-config` attribute:

```html theme={null}
<script
  src="https://app.psquared.dev/widget.js"
  data-config='{
    "agentId": "your-agent-id",
    "primaryColor": "#10b981",
    "theme": "auto",
    "position": "bottom-right",
    "uiLang": "multi"
  }'
  async
></script>
```

See [widget control](/developer-guide/widget-control) for all available configuration options.

## Loading behavior

* The script loads asynchronously and initializes the widget after the page is ready
* The widget does not affect page load performance
* On slow connections, the widget trigger button appears once the script is loaded

## Single-page applications

For SPAs (React, Vue, Next.js, Nuxt), load the widget dynamically:

```javascript theme={null}
const script = document.createElement('script');
script.src = 'https://app.psquared.dev/widget.js';
script.async = true;
document.body.appendChild(script);

// Initialize after script loads
script.onload = () => {
  window.PSquaredChat.init({
    agentId: 'your-agent-id',
    primaryColor: '#10b981',
    theme: 'auto'
  });
};
```

## Platform guides

<AccordionGroup>
  <Accordion title="WordPress">
    Add the embed snippet to your theme's `footer.php` or use a plugin like **Insert Headers and Footers** to add it site-wide.
  </Accordion>

  <Accordion title="Webflow">
    Go to **Project Settings > Custom Code > Footer Code** and paste the snippet.
  </Accordion>

  <Accordion title="Wix">
    Use the **Embed HTML** element or add custom code via **Settings > Custom Code**.
  </Accordion>

  <Accordion title="Shopify">
    Go to **Online Store > Themes > Edit code** and add the snippet to `theme.liquid` before `</body>`.
  </Accordion>
</AccordionGroup>