The view displays the list of stores in a separate window on a tinted background. This method is the second most preferred view by manufacturers.

IMG

Step 1

In the place where the widget should display, insert the following HTML tag.

Provide an appropriate value for the given parameters for each product.

<div 

class="bb-widget" 
id="{unique_id_element}" 
data-bb-type="overlay" 
data-bb-id="{your-plugin-id}" 
data-bb-add-source-params="1"
data-bb-number="{GTIN_number}"data-bb-sku="{product_manufacturer_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}" 
data-bb-alt="{identifier_container_with_your_alternative_content}" 

><!-- your html tag triggering the plugin --></div>

Requires parameters:

  • your-plugin-id – unique plugin(widget) ID to download in the panel.
  • data-bb-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
  • id – unique identifier of the element
  • data-bb-add-source-params=”1″ – the source is extracted from the utm_source parameter of the page on where the widget is displayed. This is the name of the source the user came from, e.g., facebook, instagram.

Optional parameters:

  • data-bb-price – suggested list price
  • data-bb-description – product description
  • data-bb-image – your image of the product
  • data-bb-abpar1 – additional abpar parameter passed along with the transaction.

An alternative content if there is no offer to show

  • data-bb-alt – the ID of the container with your alternative content that will be displayed if the listings are not available in the plugin, e.g.
<div id="{identifier}" style="display: none;">YOUR MESSAGE HERE</div>.

HTML Tag example:

<span class="bb-widget bb-button" id="where-to-buy-1" data-bb-type="overlay" data-bb-id="13524" data-bb-number="5906976217204" data-bb-sku="XWP1460000" data-bb-name="Bathtub COMFORT PLUS" data-bb-category="Bathtubs/Rectangular bathtubs">
    <button class="btn">Kup online</button>
</span>

Step 2 The widget trigger

Insert your HTML tag triggering the widget, e.g. , <a>, <div>, <span>, <img>,<button>.  Match the element to your web page (e.g. color, font).

The example:

<button>Find out, where to buy</button>

CSS style

If your website already has a button, you can use the same css classes and copy the css classes, e.g.

<button class="{your css class}">Find out, where to buy </button>

The example with CSS 

<button class="{your css class}">Find out, where to buy </button>

Important

  • On screens below 500px we do not show call to action in the widget. If you want to display call to action, you should override your own custom styles.
  • If your website already has a button, you can use the same css classes and copy the css classes, e.g.
.buybox-widget .bb-go-to-store { display: block !important; 
}

Other type of the widget:

  • Embedded
  • Popover
  • Multivariate
  • JSON