Embedded view
Insert HTML tag into a web page
The embedded view loads the widget with store listings as soon as the JavaScript starts.
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-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 ID to download in the panel.data-bb-number
- is your product GTIN numberdata-bb-sku
- is your unique producer's product IDdata-bb-name
- is your product's namedata-bb-category
- is the category path of your productid
- unique identifier of the elementdata-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
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 triggering the widget, 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-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 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: