Adding Jingo to your storefront

Jingo can't recommend products it hasn't seen, so this comes first. Send us a product feed URL — if you already advertise on Google Shopping, that same URL is fine. We accept Google Merchant Center XML or CSV, and poll it hourly.

Add item_group_id, size and color if your products have variants.

Put this in your site's global template so it loads on every page. The footer is fine. Google Tag Manager works identically.

<script async src="https://cdn.jingo.app/embed/loader.js"
        data-jingo-shop="YOUR_SHOP_KEY"></script>

That's the whole installation. It loads asynchronously and blocks nothing.

Content Security Policy

If your site sends a CSP header, allow these three:

script-src  https://cdn.jingo.app
frame-src   https://api.jingo.app
connect-src https://api.jingo.app

The script needs somewhere to render. Put an empty div on your product page template, wherever you want the assistant — under the buy button is the usual spot.

<div id="assistant-slot"></div>

It has no styles of its own and fills the width of its container. The assistant renders in an iframe inside it, so your CSS can't break it and it can't break your page. data-jingo-slot works too if an id is inconvenient.

At this point you're live. Load a product page and the assistant should appear.

By default Jingo works out which product a page shows by reading the page's <link rel="canonical"> URL — matched against your feed's link field — and then the schema.org/Product JSON-LD block if one is present.

That's enough on most stores. If your pages have no canonical tag, or your JSON-LD has no sku, say so explicitly:

<script>
  window.jingo = window.jingo || function () {
    (jingo.q = jingo.q || []).push(arguments)
  }

  jingo('page', { type: 'pdp', productId: 'OV-MRS-0142' })
</script>

The first two lines are a queue stub — include them once, above any jingo() call. They let you call jingo() before the script has loaded; the calls replay once it does. productId should match the id in your feed.

Single-page storefronts

If selecting a size or colour changes the URL without a page reload, Jingo picks it up automatically — it watches pushState, replaceState and popstate. Nothing for you to do.

Tell Jingo when your consent banner resolves:

jingo('consent', true)   // shopper accepted analytics
jingo('consent', false)  // shopper declined

Or set a global that Jingo reads on its own:

window.__consent = { analytics: true }

If you use a CMP — OneTrust, Cookiebot, Osano — you'll need to add Jingo to your vendor list. At larger companies that takes longer than the code does, so start it early.