Installation instructions

Setup an account

Please contact us via info@vergelijkingswidget.nl so we can setup your account for you. 

Add the script

Add the script below to the pages where the widget should appear. Make sure it is included on the pages where the checkboxes are added or they will not work.

<script 
  type="module" 
  data-ws-website-id="<WEBSITE ID>" 
  data-ws-public-key="<PUBLIC KEY>"
  src="https://www.vergelijkingswidget.nl/scripts/index.js" defer>
</script>

Replace <WEBSITE ID> and <PUBLIC KEY> with your personal website ID and public key.

Optional attributes:

• data-ws-currency: If the currency is different from Euro (ISO 4217, for example EUR or AUD).

Add the comparison checkboxes

Add the code below to the products that should be comparable, preferably both in the overview pages and on the product detail pages.

<input
  type="checkbox"
  id="checkbox-compare–<ELEMENT ID>"
  data-ws-widget-type="checkbox-compare"
  data-ws-product-url="<URL PRODUCT>"
  data-ws-product-image="<URL IMAGE>"
  data-ws-product-name="<PRODUCT NAME>"
  data-ws-product-price="<PRICE>" />
<label for="checkbox-compare–<ELEMENT ID>">
  Compare
</label>

ELEMENT ID
Your own unique ID, only used in this example to link the label and checkbox together.

URL PRODUCT
The link to the product detail page.

URL IMAGE (optional)
A link to a product image.
Preferred dimensions: 400 × 300 px

PRODUCT NAME
The name of the product.

PRICE (optional)
The price of the product.
For example: 12.95

The text on the label can be adjusted as desired.

You are done!

The product comparison is now activated and ready to let your customers compare the products on your webshop.