Brand Guide

MultiProduct Widget ​

The MultiProduct Widget shows visitors where to buy several products from a single button, for example a product range or the ingredients of a recipe.

Technical requirements

Check the technical requirements first, especially if your website uses a Content Security Policy.

Display modes ​

The widget can open in 3 ways:

Modal

Clicking the button opens the widget in a window over your page.

Inline

Clicking the button opens the widget inside your page, in a block you choose.

Inline auto-open

The widget is displayed inside your page as soon as the page loads, with no button.

The widget is identified by its MultiProduct Widget key (MULTIPRODUCT_WIDGET_ID), provided by your Customer Success Manager.

Step 1: load the script ​

Add our script to the <head> of every page that displays a widget:

html
<script async src="https://widget.clic2buy.com/c2b.js?locale=xx-XX"></script>

Replace xx-XX with the language and country of your page, for example fr-FR. See the supported locales.

Step 2: wrap your button ​

Wrap your button in the following tag:

html
<div data-multiproduct-widget-element data-multiproduct-widget-id="MULTIPRODUCT_WIDGET_ID">
  <!-- your button -->
</div>

Inline ​

Step 1: load the script ​

Add our script to the <head> of every page that displays a widget:

html
<script async src="https://widget.clic2buy.com/c2b.js?locale=xx-XX"></script>

Replace xx-XX with the language and country of your page, for example fr-FR. See the supported locales.

Step 2: wrap your button ​

Wrap your button in the following tag:

html
<div data-multiproduct-widget-inline-trigger data-multiproduct-widget-inline-href="REF" data-multiproduct-widget-id="MULTIPRODUCT_WIDGET_ID">
  <!-- your button -->
</div>

Step 3: add the container ​

Add the following tag where the widget should open:

html
<div data-multiproduct-widget-inline-container data-multiproduct-widget-inline-name="REF"></div>

INFO

data-multiproduct-widget-inline-href links the button to the container with the same data-multiproduct-widget-inline-name. You can keep REF, unless you display several inline widgets on the same page: then give each button and its container their own value.

Inline auto-open ​

In this mode, there is no button: the widget is displayed as soon as the page loads.

Step 1: load the script ​

Add our script to the <head> of every page that displays a widget:

html
<script async src="https://widget.clic2buy.com/c2b.js?locale=xx-XX"></script>

Replace xx-XX with the language and country of your page, for example fr-FR. See the supported locales.

Step 2: add the container ​

Add the following tag where the widget should be displayed:

html
<div data-multiproduct-widget-container-auto-open data-multiproduct-widget-id="MULTIPRODUCT_WIDGET_ID"></div>

Widget design ​

The widget is hosted by Click2Buy, and we configure its design (shapes, colors, fonts, etc.). To match it to your brand guidelines, contact your Customer Success Manager.

Next steps ​