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 plugin for your needs.

Step 1

In the place where the plugin 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-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 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-popover-event - wybierz sposób wyświetlania pluginu:
    hover - wyświetlanie po najechaniu kursorem
    click - wyświetlanie po kliknięciu

Optional parameters:

  • data-bb-price

  • data-bb-description

  • data-bb-image

  • data-bb-abpar1, data-bb-abpar2, data-bb-abpar3 - additional abpar parameters passed along with the transaction.

  • data-bb-alt - the ID of the container with your alternative content about lacking any offers in the plugin, e.g.

    <div id="{identifier}" style="display: none;">Your message here</div>.

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

Step 2

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

An example:

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

☝️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>

An 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="Wanna prostokątna COMFORT PLUS" data-bb-category="Wanny/Wanny prostokątne">
<button class="btn">Buy online</button>
</span>


Important !

On screens below 500px we do not show call to action in the plugin.

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 ways to display the plugin:

Did this answer your question?