Skip to main content

​
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

Add the embed snippet to your theme’s footer.php or use a plugin like Insert Headers and Footers to add it site-wide.
Go to Project Settings > Custom Code > Footer Code and paste the snippet.
Use the Embed HTML element or add custom code via Settings > Custom Code.
Go to Online Store > Themes > Edit code and add the snippet to theme.liquid before </body>.