Installation Methods

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

Method 1: Floating Bubble Widget

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

  1. Log in to your SiteAssist dashboard
  2. Navigate to Advanced → API Keys
  3. Go to the Publishable Keys tab
  4. 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!

Method 2: Sidepanel Widget

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

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

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

Shopify

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

Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Paste the code in the Header section
  3. Save changes

Webflow

  1. Go to Project Settings → Custom Code
  2. Paste the code in the Head Code section
  3. 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:

  1. Visual Check: You should see the chat button (floating bubble) or panel (sidepanel)
  2. Console Check: Open browser DevTools → Console. No errors should appear
  3. 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