Help Center

Written by Joanna Kaczmarek

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


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:

Categories: