SiteBridge Setup Guide

Drop-in in under 10 minutes

Four steps from copy to live. No framework, no build step, no backend changes required.

Step 1

Add your SiteBridge domain

Every SiteBridge install has a unique domain. Find yours in your SiteBridge dashboard, then add this snippet just before the closing </head> tag of your product page template:

<!-- SiteBridge Widget — replace YOUR_DOMAIN with your actual SiteBridge domain -->
<script>
  window._sbConfig = {
    apiEndpoint: '/api/parse-intent',
    productSelector: '.product-card',
    idAttribute: 'data-product-id',
    siteUrl: 'https://yourstore.com',
    siteName: 'YourStore'
  };
</script>
<script src="https://YOUR_DOMAIN/widget.js"></script>

SEO tip: Setting siteUrl and siteName enables Google's structured data — the widget will inject Organization + WebSite JSON-LD into your page automatically.

        Where to find your domain: Log into sitebridge-5-196950.polsia.app and look for "Your Embed URL" in the integration settings. Replace YOUR_DOMAIN with the value shown there.
      

Step 2

Mark up your product cards

SiteBridge reads product information from HTML attributes on your product cards. You only need to add one required attribute — the rest are optional but improve accuracy.

Attribute	Status	Value
data-product-id	Required	Unique product ID (SKU, slug, number)
data-name	Optional	Product name or title
data-tags	Optional	Comma-separated keywords (e.g., "running, waterproof, wide-fit")

Example product card HTML — add the attributes to your existing markup:

<div class="product-card"
     data-product-id="SKU-1234"
     data-name="CloudStep Runner"
     data-tags="running, lightweight, neutral">
  <!-- your existing product card HTML here -->
</div>

Tip: If your page already has product data in data-* attributes, SiteBridge will auto-detect them. Just make sure your product cards have a consistent CSS class (default: .product-card) that the widget can query.

Step 3

Inject the widget HTML

Add the widget markup to every page that has product cards. Place it right before the closing </body> tag:

<div id="sb-widget" class="sb-widget" role="complementary" aria-label="SiteBridge shopping assistant">
  <button class="sb-toggle" id="sb-toggle" aria-label="Open SiteBridge assistant" aria-expanded="false">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
  </button>
  <div class="sb-panel" id="sb-panel" aria-hidden="true">
    <div class="sb-header">
      <div class="sb-header-left">
        <div class="sb-dot"></div>
        <span class="sb-title">SiteBridge</span>
      </div>
      <button class="sb-close" id="sb-close" aria-label="Close assistant">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
    <div class="sb-body" id="sb-body">
      <div class="sb-empty" id="sb-empty">
        <p class="sb-empty-title">What are you looking for?</p>
        <p class="sb-empty-hint">e.g. "running shoes under $100" or "waterproof boots for wide feet"</p>
      </div>
      <div class="sb-matches" id="sb-matches" style="display:none">
        <div class="sb-matches-header" id="sb-matches-header"></div>
        <ul class="sb-match-list" id="sb-match-list"></ul>
      </div>
      <div class="sb-loading" id="sb-loading" style="display:none">
        <div class="sb-spinner"></div>
        <span>Finding matches…</span>
      </div>
      <div class="sb-error" id="sb-error" style="display:none"></div>
    </div>
    <div class="sb-footer">
      <input type="text" class="sb-input" id="sb-input" placeholder="Describe what you need…" autocomplete="off" autocorrect="off" spellcheck="false">
      <button class="sb-send" id="sb-send" aria-label="Search">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
      </button>
    </div>
  </div>
</div>

Step 4

Test before going live

Use the embed sandbox to test your configuration before deploying to your production site. Paste in a URL or use the built-in mock products to verify everything works.

Minimal config that works out of the box

apiEndpoint'/api/parse-intent' (relative — works if SiteBridge is on the same domain)

productSelector'.product-card' (default — change if your CSS class is different)

idAttribute'data-product-id' (default — change if you use a different attribute name)

Open Embed Sandbox → View Checklist

FAQ

Frequently asked questions

Content Security Policy (CSP) headers block the widget

If your site sends a Content-Security-Policy header that restricts external scripts, the widget .js file will be blocked and the sidebar won't load. Fix: add script-src 'unsafe-inline' https://YOUR_DOMAIN to the CSP header, or ask your host to allowlist the SiteBridge domain. Contact your platform or dev team if you're unsure where CSP headers are configured.

Ad blockers flag the widget as malicious

Overly broad ad-block rules sometimes treat SiteBridge's domain as a tracker and hide the widget. Fix: proxy the widget request through your own domain (e.g., serve /widget.js from your site and fetch from SiteBridge server-side), or add the SiteBridge domain to your ad blocker's allowlist. The widget code itself is benign — this is a false positive from generic tracker filtering.

Widget doesn't load on subdomains

Browser cookie and storage restrictions can prevent the widget from reading data across subdomain boundaries (e.g., shop.example.com vs www.example.com). Fix: ensure the SiteBridge embed snippet is loaded from the same subdomain as your product pages, or switch to a CNAME on a dedicated subdomain (e.g., shop.sitebridge.io) that your site owns and controls.

Checklist

Test your embed

Before deploying to production, work through each item and confirm the widget behaves correctly.

Widget JS loads without 404 — check the Network tab in your browser's developer tools for widget.js requests

Widget toggle button appears in the corner of the page

Clicking the toggle opens the chat panel

Typing a query and pressing Enter highlights matching product cards in green and dims the rest

No console errors appear during normal operation

Works on mobile — sidebar stays within the viewport and is scrollable

Works when the product page is loaded fresh with no cached widget state