Step 1 of 4

Find your embed URL

Every SiteBridge install has a unique URL. Paste it into your config to point the widget at your API.

0 / 4 done

0%

Your SiteBridge Embed URL

Copy the URL below and paste it into your window._sbConfig.apiEndpoint config, or use it directly in the embed snippet.

Your embed URL

https://sitebridge-5-196950.polsia.app/widget.js

This is your static widget URL — it never changes. Use it in the <script src="..."> tag. For the API endpoint, use /api/parse-intent (relative) or https://sitebridge-5-196950.polsia.app/api/parse-intent (absolute).

Your full embed snippet

Add this before </head> on every page with product cards.

Embed snippet — paste before </head>

This is a working snippet with your real URLs. Copy it, drop it in your template, and you're done with Step 1.

View live demo

Step 2 of 4

Configure the widget

Tell SiteBridge how to find products on your page. Two settings cover 90% of sites.

0 / 4 done

0%

CSS selector for product cards

SiteBridge scans your page for elements matching this selector. Change it if your product container uses a different class or tag.

productSelector

Default: .product-card — CSS class on each product container

idAttribute

The attribute on each product card that holds the unique product ID

siteUrl (optional — enables SEO structured data)

The canonical URL of your store. Used to inject JSON-LD for Google. Defaults to the current page origin if blank.

siteName (optional)

The name Google should associate with your site. Defaults to the page title if blank.

Your config object

Paste this before the <script src="..."> tag that loads the widget.

Config object

  window._sbConfig = {
    apiEndpoint: '/api/parse-intent',
    productSelector: '.product-card',
    idAttribute: 'data-product-id',
    siteUrl: 'https://example.com',
    siteName: 'My Store'
  };

The two required fields are productSelector and idAttribute. Everything else is optional and will use sensible defaults.

Live preview of your config

Update the fields above and see the config update in real time.

productSelector: .product-card
idAttribute: data-product-id
apiEndpoint: /api/parse-intent
siteUrl: https://example.com
siteName: My Store

Step 3 of 4

Add product markup

SiteBridge reads product data from HTML attributes. Add them to your product cards and the widget will immediately understand your catalog.

0 / 4 done

0%

Required attribute

Every product card must have this one attribute. Without it, the widget can't identify your products.

Attribute Status Value data-product-id Required Unique product ID — SKU, slug, or numeric ID

Optional — better accuracy

Adding data-name and data-tags dramatically improves match quality. The widget uses them to understand what each product is.

Attribute Status Value data-name Optional Product name or title (e.g. "CloudStep Runner") data-tags Optional Comma-separated keywords (e.g. "running, waterproof, wide-fit")

Example — your markup should look like this

Add the attributes to each product card element.

Product card HTML


<div class="product-card" data-product-id="SKU-1234">
  ...your product HTML...
</div>

<!-- Full markup (recommended) — maximum match accuracy -->
<div class="product-card"
     data-product-id="SKU-1234"
     data-name="CloudStep Runner"
     data-tags="running, waterproof, lightweight">
  ...your product HTML...
</div>

If your page already has data-* attributes for other purposes, SiteBridge won't interfere — it only reads attributes configured in your window._sbConfig.

Where to add the HTML

Place the widget container just before </body> — same spot on every page.

Widget container — add before </body>



  
  
    
      
        
        SiteBridge
      
      
    
    
      
        What are you looking for?
        e.g. "running shoes under $100"
      
      
        
        
      
      
        
        Finding matches…

Step 4 of 4

Test & go live

Use the sandbox to confirm the widget activates and adapts product cards correctly before deploying to production.

0 / 4 done

0%

Try it now — live sandbox

The widget below uses your real configuration. Type a query and watch the page adapt.

Mock product page

StrideFoot — Running & Hiking

Tell us what you need. We'll find the right pair.

CloudStep Runner

runninglightweightfoam

$89

★ 4.7

TrailBlaze X

hikingwaterproofrugged

$134

★ 4.5

WideFit Walk

walkingwide-fitcomfort

$74

★ 4.8

SpeedSprint Elite

runningracingcarbon

$189

★ 4.6

Try these queries

Click to auto-fill the widget input. Watch for green highlights and dimmed cards.

The widget adapts your page in real time — it adds .sb-highlight to matching products and .sb-dim to the rest. These classes are defined in the CSS you already copied.

Pre-launch checklist

Confirm each item before going live.

Widget URL is correct

Check that /widget.js is loaded from your actual SiteBridge domain, not a placeholder

All product cards have data-product-id

Use your browser's DevTools to confirm every product card has the attribute

Widget HTML is present on every product page

The #sb-widget container should appear just before </body>

Widget loads and responds to a query

Try a search in the sidebar — product cards should highlight or dim within 2–3 seconds

Mobile layout looks correct

Test on a phone or in DevTools mobile view — the sidebar should not overflow the viewport