Embed script - InboxMate

Basic embed

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

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

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

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

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.

Webflow

Go to Project Settings > Custom Code > Footer Code and paste the snippet.

Wix

Use the Embed HTML element or add custom code via Settings > Custom Code.

Shopify

Go to Online Store > Themes > Edit code and add the snippet to theme.liquid before </body>.

Developer overview Widget control

​Basic embed

​Configuration via script tag

​Loading behavior

​Single-page applications

​Platform guides

Basic embed

Configuration via script tag

Loading behavior

Single-page applications

Platform guides