Skip to main content

​
Quick Installation

Add the chat widget to any website with a simple script tag.
1

Get your embed code

Go to Settings > Widget in your dashboard and copy the embed code.
2

Add to your website

Paste the code before the closing </body> tag on your website.

​
Embed Code

<script>
  window.__ansa_config = {
    agentId: "your-agent-id",
    apiUrl: "https://api.ansa.so",
    url: "https://widget.ansa.so"
  };
</script>
<script src="https://widget.ansa.so/embed.min.js"></script>

​
Platform Guides

Add to your theme’s footer.php or use a plugin like “Insert Headers and Footers”:
  1. Go to Settings > Insert Headers and Footers
  2. Paste the embed code in the “Scripts in Footer” section
  3. Save changes
  1. Go to Online Store > Themes
  2. Click Actions > Edit code
  3. Find theme.liquid
  4. Paste embed code before </body>
  5. Save
  1. Go to Project Settings > Custom Code
  2. Paste in “Footer Code” section
  3. Publish your site
Create a component:
'use client';

import { useEffect } from 'react';

export default function AnsaWidget() {
  useEffect(() => {
    window.__ansa_config = {
      agentId: process.env.NEXT_PUBLIC_ANSA_AGENT_ID,
      apiUrl: process.env.NEXT_PUBLIC_ANSA_API_URL,
      url: process.env.NEXT_PUBLIC_ANSA_WIDGET_URL,
    };

    const script = document.createElement('script');
    script.src = `${process.env.NEXT_PUBLIC_ANSA_WIDGET_URL}/embed.min.js`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}
Add to your layout:
import AnsaWidget from '@/components/AnsaWidget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <AnsaWidget />
      </body>
    </html>
  );
}

<script setup>
onMounted(() => {
  window.__ansa_config = {
    agentId: 'your-agent-id',
    apiUrl: 'https://api.ansa.so',
    url: 'https://widget.ansa.so',
  };

  const script = document.createElement('script');
  script.src = 'https://widget.ansa.so/embed.min.js';
  script.async = true;
  document.body.appendChild(script);
});
</script>

<template>
  <div></div>
</template>

​
Cache Busting

To ensure your visitors always get the latest widget version, add a timestamp parameter to the script URL: 
<script src="https://widget.ansa.so/embed.min.js?t=1737504000000"></script>
For dynamic sites (React, Vue, etc.), generate the timestamp at runtime: 
const script = document.createElement('script');
script.src = `${process.env.NEXT_PUBLIC_ANSA_WIDGET_URL}/embed.min.js?t=${Date.now()}`;
The dashboard embed code automatically includes a cache-busting timestamp.

​
Verifying Installation

  1. Visit your website
  2. Look for the chat button in the bottom-right corner
  3. Click to open the widget
  4. Send a test message
If the widget doesn’t appear:
  • Check browser console for errors
  • Verify your agent ID is correct
  • Ensure the embed code is before </body>
  • Check that your domain is not blocked