Brand Guide

Standard Widget ​

The Standard Widget shows visitors where to buy one product. It opens from a button on your page, such as "Where to buy" or "Buy now". Any clickable element works.

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.

To identify the product, use one of the following attributes, not several:

  • its Widget key (WIDGET_ID), provided by your Customer Success Manager or available in our back office: data-widget-id
  • its EAN-13 code: data-widget-ean
  • its UPC code: data-widget-upc

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-widget-element data-widget-id="WIDGET_ID">
  <!-- your button -->
</div>
html
<div data-widget-element data-widget-ean="EAN">
  <!-- your button -->
</div>
html
<div data-widget-element data-widget-upc="UPC">
  <!-- 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-inline-trigger data-inline-href="REF" data-widget-id="WIDGET_ID">
  <!-- your button -->
</div>
html
<div data-inline-trigger data-inline-href="REF" data-widget-ean="EAN">
  <!-- your button -->
</div>
html
<div data-inline-trigger data-inline-href="REF" data-widget-upc="UPC">
  <!-- your button -->
</div>

Step 3: add the container ​

Add the following tag where the widget should open:

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

INFO

data-inline-href links the button to the container with the same data-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-inline-container-auto-open data-widget-id="WIDGET_ID"></div>
html
<div data-inline-container-auto-open data-widget-ean="EAN"></div>
html
<div data-inline-container-auto-open data-widget-upc="UPC"></div>

Set the visitor's location with a postal code ​

By default, the widget locates the visitor, by IP address or with an address they enter, to show the closest retailers.

If you already know the visitor's postal code, for example because they entered it earlier on your website, pass it in the optional data-widget-zipcode attribute. The widget then uses it as the starting location instead of asking for it.

html
<div data-widget-element data-widget-id="WIDGET_ID" data-widget-zipcode="ZIPCODE">
  <!-- your button -->
</div>

Good to know:

  • Only add this attribute when you have a reliable postal code for the visitor.
  • The postal code must be valid in the country of the widget.
  • If the visitor has already chosen a location in the widget, that location is used instead.

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 ​