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 pricedata-bb-description
– product descriptiondata-bb-image
– your image of the productdata-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>
☝️You can insert any content or other element, such as a banner by inserting HTML code.
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>
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.
.buybox-widget .bb-go-to-store { display: block !important;
}
Other type of the widget:
- Overlay view
- Embedded view
- Multivariate
- JSON