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.

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="overlay"
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

Optional parameters:

  • data-bb-price

  • data-bb-description

  • data-bb-image

  • 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>.

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

Step 2

Insert your HTML tag trigeering 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-type="overlay" 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">Kup 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?