Installation

Installation Methods

SiteAssist offers three installation methods to fit your needs. Choose the one that works best for your website.

The floating bubble is the most popular integration method. It adds a chat button in the corner of your website that expands into a full chat interface.

Step 1: Get Your Publishable Key

Log in to your SiteAssist dashboard
Navigate to Advanced → API Keys
Go to the Publishable Keys tab
Copy your project’s publishable key

Step 2: Add the Script

Add this code snippet to your website’s HTML, preferably in the <head> section or just before the closing </body> tag:

<!-- SiteAssist chat widget script -->
<script type="text/javascript">
  !(function (t, e, c, n, s) {
    if (t[s]) return;
    const i = (t[s] = function () {
      i._q.push(arguments);
    });
    i._q = [];
    const o = e.createElement("script");
    ((o.async = !0),
      (o.src =
        "https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js"),
      e.head.appendChild(o));
  })(window, document, 0, 0, "SiteAssist");
</script>

<script type="text/javascript">
  // Initialize the SiteAssist widget with your API Key
  SiteAssist("init", {
    apiKey: "YOUR_API_KEY_HERE",
    theme: "auto",
  });
</script>

Step 3: Replace the Publishable Key

Replace YOUR_API_KEY_HERE with your actual publishable key from the dashboard.

Step 4: Test

Visit your website and you should see the chat button appear in the bottom right corner!

The sidepanel widget integrates as a fixed panel on the side of your website, perfect for web applications and dashboards.

Installation

<!-- SiteAssist sidepanel widget -->
<script type="text/javascript">
  !(function (t, e, c, n, s) {
    if (t[s]) return;
    const i = (t[s] = function () {
      i._q.push(arguments);
    });
    i._q = [];
    const o = e.createElement("script");
    ((o.async = !0),
      (o.src =
        "https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js"),
      e.head.appendChild(o));
  })(window, document, 0, 0, "SiteAssist");
</script>

<script type="text/javascript">
  SiteAssist("init", {
    apiKey: "YOUR_API_KEY_HERE",
    type: "sidepanel",
    theme: "auto",
    appContainerSelector: ".main-container", // Optional: container to push when panel opens
  });
</script>

Container Configuration

The sidepanel can push your main content when opened. Add the siteassist-container class to your main content container:

<div class="siteassist-container">
  <!-- Your main content here -->
</div>

Or specify a custom selector:

SiteAssist("init", {
  apiKey: "YOUR_API_KEY_HERE",
  type: "sidepanel",
  appContainerSelector: "#app-content", // Custom selector
});

Method 3: Iframe Embed

For full control over placement and styling, use the iframe embed method.

Basic Iframe

<iframe
  title="SiteAssist Chat"
  src="https://widgets.siteassist.io/chat?apiKey=YOUR_API_KEY_HERE&theme=auto"
  style="border:none;width:420px;height:768px;"
  allow="clipboard-write"
></iframe>

Responsive Iframe

For a responsive iframe that adapts to different screen sizes:

<div style="position: relative; width: 100%; max-width: 420px; height: 768px;">
  <iframe
    title="SiteAssist Chat"
    src="https://widgets.siteassist.io/chat?apiKey=YOUR_API_KEY_HERE&theme=auto"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allow="clipboard-write"
  ></iframe>
</div>

Iframe URL Parameters

The iframe URL supports these query parameters:

apiKey (required) - Your SiteAssist API key
theme (optional) - light, dark, or auto (default: auto)
externalId (optional) - User identifier for personalization

Example with all parameters:

<iframe
  src="https://widgets.siteassist.io/chat?apiKey=YOUR_API_KEY&theme=dark&externalId=user123"
  style="border:none;width:420px;height:768px;"
  allow="clipboard-write"
></iframe>

Platform-Specific Instructions

WordPress

Go to Appearance → Theme Editor
Open header.php or use a plugin like “Insert Headers and Footers”
Paste the code before the </head> tag
Save changes

Tip: Use a plugin like “Code Snippets” or “WPCode” for safer code injection.

Shopify

Go to Online Store → Themes
Click Actions → Edit Code
Open theme.liquid
Paste the code before </head>
Save and preview

Squarespace

Go to Settings → Advanced → Code Injection
Paste the code in the Header section
Save changes

Webflow

Go to Project Settings → Custom Code
Paste the code in the Head Code section
Publish your site

React / Next.js

For React applications, add the script in your main HTML file or use next/script:

import Script from "next/script";

export default function Layout({ children }) {
  return (
    <>
      <Script id="siteassist-loader" strategy="afterInteractive">
        {`
          !function(t,e,c,n,s){if(t[s])return;const i=t[s]=function(){i._q.push(arguments)};i._q=[];const o=e.createElement("script");o.async=!0,o.src="https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js",e.head.appendChild(o)}(window,document,0,0,"SiteAssist");
        `}
      </Script>
      <Script id="siteassist-init" strategy="afterInteractive">
        {`
          SiteAssist("init", {
            apiKey: "${process.env.NEXT_PUBLIC_SITEASSIST_PUBLISHABLE_KEY}",
            theme: "auto",
          });
        `}
      </Script>
      {children}
    </>
  );
}

Vue.js

Add the script in your index.html or app.html:

<!DOCTYPE html>
<html>
  <head>
    <!-- Your head content -->
    <script>
      !(function (t, e, c, n, s) {
        if (t[s]) return;
        const i = (t[s] = function () {
          i._q.push(arguments);
        });
        i._q = [];
        const o = e.createElement("script");
        ((o.async = !0),
          (o.src =
            "https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js"),
          e.head.appendChild(o));
      })(window, document, 0, 0, "SiteAssist");

      SiteAssist("init", {
        apiKey: "YOUR_API_KEY_HERE",
        theme: "auto",
      });
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Verification

After installation, verify the widget is working:

Visual Check: You should see the chat button (floating bubble) or panel (sidepanel)
Console Check: Open browser DevTools → Console. No errors should appear
Interaction Test: Click the chat button and try sending a message

Common Issues

Widget not appearing?

Check that your API key is correct
Verify the script is loading (check Network tab in DevTools)
Ensure no ad blockers are interfering
Check browser console for errors

Script loading but widget not initializing?

Make sure you’re calling SiteAssist("init", {...}) after the loader script
Verify your API key is valid and active
Check that your domain is authorized in the dashboard

Need help? Contact us at support@siteassist.io

Next Steps

Configure the widget - Customize appearance and behavior
API Reference - Control the widget programmatically
Advanced Features - Explore powerful capabilities

Installation

Installation Methods

Method 1: Floating Bubble Widget

Step 1: Get Your Publishable Key

Step 2: Add the Script

Step 3: Replace the Publishable Key

Step 4: Test

Method 2: Sidepanel Widget

Installation

Container Configuration

Method 3: Iframe Embed

Basic Iframe

Responsive Iframe

Iframe URL Parameters

Platform-Specific Instructions

WordPress

Shopify

Squarespace

Webflow

React / Next.js

Vue.js

Verification

Common Issues

Next Steps