Product Locator
Locator widget
Embedding the widget

Embedding the widget

The widget comes in the form of a 'Shop nearby' button which you can display within your product pages. Clicking this button will open a modal window that lets the user enter their location and see a list of nearby stores selling this product.

The widget remembers the user's location, to make subsequent product searches easier. The list of stores will include only stores currently selling the product, with labels indicating "In Stock" or "Low Stock".

Embed code

Embedding the widget involves two steps:

1. Add NearSt script tag

This loads the NearSt Javascript SDK and allows widgets to be rendered on the page. Include this on your page once, ideally right after the opening body tag.

<script src="https://product-locator.near.st/embed.js" async defer></script>

2. Add button

Place this code wherever you want the button to appear on your page.

<div 
    class="nearst-locator-button"
    data-license-key="{license_key}"
    data-barcode="{barcode}"
></div>

Make sure to replace {license_key} with your license key.

Replace {barcode} with the GTIN/EAN/UPC of the product. Note that depending on the type of license key, you might only be whitelisted for certain barcode ranges.

And that's it, you should have a product locator button showing on your site!

Embed button

Debugging issues

Not seeing anything? Go into DevTools/Inspector to check for the following:

  • If NearSt failed validating your license key or failed retrieving data for the barcode you entered, an error message will be shown in the console.
  • Check your cross-origin policy, which might be preventing loading external scripts.
  • Is the element present on the page when it initially loads? If not (ie. you're adding it dynamically through Javascript), you might need to call the nearst.renderWidget(el) function manually.
  • Is the barcode search not working? Check that you are passing through the same GTIN/EAN/UPC supplied in your stock feed integration. If your website is using SKUs to identify products, you might need an additional mapping between SKUs and the barcodes sent to NearSt.

Next steps

Where to go from here?

  • If you want to create your own button rather than relying on NearSt's button, you can open the product locator modal by calling a method called nearst.showStores().
    Read more about the Javascript API →
  • You can customize the text displayed, the units and language used, and add your custom styling to make the widget feel like it's part of your website.
    Read more about customisation →
IntroductionCustomization