Predictive Overlay Installation

1) First Step: Meet the requirements


1.1) Followprice button installed
For the predictive overlay feature to work, you need to have the Followprice button code installed in your product page. You can find the button installation guide here. This will allow the predictive overlay script to record the user's activity.

1.2) Followprice conversion tracker installed (Optional)
Optionally, If you wish to remove previously purchased products from the predictive overlay, simply add the conversion tracker script to your checkout page. You can find the conversion tracker installation guide here.


Note: If you wish to use the predictive overlay while having the Followprice button deactivated, you can simply remove the script tag that is mentioned on the button installation guide.
The div tag however is required.

2) Second Step: Install the script


The installation just takes few minutes since you just have to add 1 line of code in your pages. Just write down the script after the </body> tag of the following pages:
  • Product page (same page where the button code is - allows the script to record visited products)
  • Landing page (recommended) or any other page where you wish to show the overlay

2.1) Product Page


This will allow us to record the users' activity and later on to show them a predictive overlay with the products they are interested.

For that you just have to copy and paste the predictive overlay script:
<script id="fp-popentry-script" src="https://followprice.co/js/popentry.js" async></script>
Reminder: It's a requirement to have the Followprice button script installed, even if it's hidden.

2.2) Pages where Predictive Overlay must show up


This will allow us to show our predictive overlay to the users with the products with changes (price drop) that they are interested on. 

In the pages you want to launch the Predictive Overlay you have to copy and paste the exact same script of the product page and adding the parameter  data-launcher=true to it, so this results in:
<script id="fp-popentry-script" src="https://followprice.co/js/popentry.js" async data-launcher=true></script>

3) Customization: other options


We have different options that will allow to customize the behavior of the predictive overlay in your store. All of these options are independent, so you can set each one without setting all the others.

3.1) Language


If you want your overlay in another language please change the  data-lang  attribute to one of the following supported languages:
  • English: "en_US" (default)
  • Portuguese: "pt_PT"
Setting format: data-lang:<language>

This will result in the complete script:
<script id="fp-popentry-script" src="https://followprice.co/js/popentry.js" async data-launcher=true data-lang="pt_PT"></script>

3.2) Remotion


If you want to avoid to show products the users already purchased we have different options to do it:
  • "product-only" (default) - It will remove only the product(s) the user already purchased.
  • "category" - It will remove the product(s) the user already purchased and all the others with the same category.
  • "sub_category" - It will remove the product(s) the user already purchased and all the others with the same sub_category.
Setting format: data-remotion:<option>

This will result in the complete script:
<script id="fp-popentry-script" src="https://followprice.co/js/popentry.js" async data-launcher=true data-lang="pt_PT" data-remotion="sub_category"></script>

If the user visits the purchased product page again and it has a change, the mentioned product will be show in the predictive overlay again.

Requirement: In the Followprice button installation (1.1) you have to guarantee you set correctly the div fields "data-product-category" and "data-product-subcategory"

3.3) Expiration

           
If you want to avoid to show in the predictive overlay products that were visited by the user for more than a specific time (ex.: 2 months) we have an option to set it:
  • <number of days> (default=90) - You have to pass the number of the days, for example, two months is about 60.
Setting format: data-expiration:<number_of_days>

This will result in the complete script:
<script id="fp-popentry-script" src="https://followprice.co/js/popentry.js" async data-launcher=true data-lang="pt_PT" data-remotion="sub_category" data-expiration=60></script>

3.4) Show


If you want to limit the number of times a user sees the Overlay within a time interval, even if he has eligible products to show, you can set the data-show parameter in hours:
  • <time interval in hours> (default=0) - You have to pass the number in hours, for example, three hours is 3, half an hour is 0.5.
Setting format: data-show:<interval_in_hours>

This will result in the complete script:
<script id="fp-popentry-script" src="https://followprice.co/js/popentry.js" async data-launcher=true data-lang="pt_PT" data-remotion="sub_category" data-expiration=60 data-show=3></script>








Feedback and Knowledge Base