The popover view displays a list of stores when you click or hover over a button or text link. Use the instructions below to customize the widget for your needs.

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="popover" 
data-bb-popover-event="{value}" 
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.
  • data-bb-popover-event – choose how to display/trigger the widget:
    • hover – displayed by hovering the cursor
    • click – displayed by clicking

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-popover-event="click" data-bb-type="popover" data-bb-id="13524" data-bb-number="5906976217204" data-bb-sku="XWP1460000" data-bb-name="Bathtub COMFORT PLUS" data-bb-category="Bathtubes/Bathtube rectangle    <button class="btn">Kup online</button>
</span>

Step 2

Set the widget trigger.

Insert your HTML tag triggering the widget, e.g. span, div, a, img, button. Match the element to your webpage, 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:

<span class="bb-widget bb-button" id="where-to-buy-1" data-bb-popover-event="click" data-bb-type="popover" data-bb-id="13524" data-bb-number="5906976217204" data-bb-sku="XWP1460000" data-bb-name="Bathtub COMFORT PLUS" data-bb-category="Bathtubs/rectangular    <button class="btn">Buy online</button>
</span>

Achtung

  • 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.
.buybox-widget .bb-go-to-store { display: block !important; 
}

Other type of the widget:

  • Overlay view
  • Embedded view
  • Multivariate
  • JSON