Widget

Home / Widget

Easy installation

Our widget allows easy integration with any web store.
Customers can start watching the price of a product in your store
without leaving the page.

<div id="pricewatch-widget"></div>
<script type="text/javascript">
    (function(d, s, id) {
        var js, pwjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://cdn.pricewatch.io/js/widget.min.js?lang=en";
        pwjs.parentNode.insertBefore(js, pwjs);
    }(document, "script", "pricewatch-widget-js"));
</script>

Widget

How it works?

Just embed our widget on your web store and you're done.

Choose a product

A button to watch the price of the selected product appears on the product page.

Type email address

The customer provides his email address to which notifications should come.

Receive notifications

If the price of the product changes, the customer will receive an email notification. He can also resign at any time.

Optional settings

The widget can be customized to suit your needs in many ways.

Modification of texts

If you want, you can customize almost all the texts that the widget displays.

1. Choose the texts you want to change

The text configuration is done via the data-*attributes. You can choose from these attributes:

  • data-text-init
  • data-text-title
  • data-text-placeholder
  • data-text-save
  • data-text-success
  • data-text-error

2. Embed the texts in the HTML tag

Now just embed the texts in the selected attribute, in the div tag. Example: 

<div id="pricewatch-widget" data-text-init="Click to watch the price"></div>

Changing the appearance

The widget can be adapted entirely to the appearance of your own web store. We have 2 options available:

1. Style overwriting

You change some parts of styles properties that will override the default settings.

2. Your own styles

You create your own styles without having to load default ones. You must then provide your own styles with id="pricewatch-widget-css". Example: 

<link type="text/css" rel="stylesheet" id="pricewatch-widget-css" href="path/to/my/own/styles.css">

Feedback