Step 1

The following code insert in the <head>  section on all subpages where you will use the plugin.

<script type="text/javascript" src="https://widget.100shoppers.com/js/bb-widget.min.js" async=""></script>

Step 2

Put this code in the place where you want to display your plugin.

<div 
   class="bb-widget"
   id="buybox"
   data-bb-id="{your-plugin-id}"
   data-bb-number="{GTIN-number}"
   data-bb-sku="{product-producer-unique-ID}"
   data-bb-name="{product-name}"
   data-bb-category="{product-category-path}"
   data-bb-price="{optional-product-suggested-retail-price}"    
   data-bb-description="{optional-product-short-description}"
   data-bb-image="{optional-product-image-URL}">
</div>
  • {your-plugin-id} is the unique ID of the plugin
  • {GTIN-number} is your product GTIN number
  • {data-bb-sku}    is your unique producer's product ID
  • {data-bb-name}   is your product's name 
  • {data-bb-category}   is the category path of your product 
  • {data-bb-price}   is your product's suggested retail price
  • {data-bb-description}   is your product's description
  • {data-bb-image}   it the URL of the product image 

Exapmle

<div 
   class="bb-widget"
   id="buybox-si8q"
   data-bb-id="1269"
   data-bb-number="8690842351983">
</div>

 

Optional tags

  • data-bb-abpar1, data-bb-abpar2, data-bb-abpar3 - abpar parameters 
  • data-bb-alt - ID of the container with alternative message about lacking any offers 

Alternative message 

Step 1

Use it if you want to display your own message instead of default at the moment when the plugin will not display any offers.

<div id="no-buybox" style="display: none;">
<!-- Your alternative content here -->
</div>

Step 2

In the following code insert Id of element which contains alternative content. 

<div class="bb-widget" id="bb-widget" data-bb-id="1"
data-bb-pid="568747" data-bb-alt="no-buybox"></div>

Other implementation options:

Did this answer your question?