Skip to main content
Skip table of contents

Sales tracking and product picking | e-Commerce JS Tags

Document version 3.8.9 - Applies to V3.n Platform


This tutorial explains the integration process of the Popsell service into your e-Commerce platform.

The estimated time of integration should last no more than 2 hours.

Test and production environments

If the tags are to be implemented in a test environment, the web services will be called on instead of in each tag.

The test in domain variable must be replaced by your test server hostname, as described below.

Home page Tag (home.js)

The script must be pasted in the home page, preferably at the end of the code, before the </body> tag.

No change is required in this tag, except the domain variable on a test environment.


1 (do not change)


Replace #TEST_SITE_URL# by your test server hostname (eg:, in order to link to the Popsell test environment when the tag is run on your test platform.

Product page Tag (product.js)

The script must be pasted preferably at the bottom of the product detail page, before </body>

var id_button = “”,
product_id = “#Product_ID#”,

The following variables must be bound:


“” (do not change)


A fixed button will be automatically created on the product page. You can change the default style using CSS attributes

The default values are :

{"right": "0", "top": "300px", "color": "black", "background": "#eee", "title": "Ajouter<br> à ma liste ambassadeur"},


Brand product identifier


Product name


Product description


Unit price tax included


URL (full URL) of the product’s full size image


URL of the product’s page (Optional : if set to “”, current URL will be used)


1 (do not change)


Same as home page tag

These values must be replaced by a JavaScript variable or PHP tag for example. If possible, use Global Variables, so that if the user selects a different SKU, then the values are updated.

Warning: if the variable might contain double quotes or line feeds (eg description), make sure to escape these characters (with a backslash), otherwise the script will produce an error.

Order confirmation page (confirmation.js)

The script has to be pasted at the bottom of the order confirmation pages (pages displayed after the payment has been processed).

Your site may have several pages for each of the available payment methods.

The following variables must be bound, including a JSON list with the order details:


“OK” if order and payment confirmed,

“E-BOOKING” for an e-booking without payment,
or any other label for other cases.


The brand’s order identifier


The total amount paid (or to be paid)


The total amount of the order (including tax and without shipping costs)

If set to 0, it will be automatically set as the sum of the order detail prices.


“” (do not change)


A JSON list containing the product ID, name, unit price and quantity (for each product of the order). [OPTIONAL]
See example below.

firstname, lastname, email

Name and email of the user [OPTIONAL]

Do not fill if data privacy policies do not allow transfer to Popsell.


0: no opt-in, 1: opt-in accepted for Brand communications [OPTIONAL, default = 0] [except for brand ID between 26 & 53, for backward compatibility issues, default = 1]


Same as home page tag

Example of json_list :

var json_list = [
   {“id_product”:”MT680”,”name”:”Hooded sweater”,
   {“id_product”:”AD231”,”name”:”Graphic tee”,

In case there is no confirmation page (ie: the external payment site does not return automatically to your ecommerce site), please contact the Popsell support for a specific implementation.


Once the tags are integrated into the platform, Popsell will test and activate the service for your brand.

Do not forget to change the domain value in all the tags while deploying them into production.

Technical support

You can check other available options on page 2 and 3 of this document.

For any support, please contact Popsell at:


Several specific options are available, that brings added functionalities, or might solve technical limitations encountered in the standard process.

Product page Button (product.js) [OPTIONAL]

In order to improve the design of your product page, you can replace the fixed button automatically generated, by any custom button of your choice.

The selection button has to be inserted, usually near the “add to basket” button in the product page. It can be freely customized to fit your page style. Example:

The button must be initially set to « display: none ». It will only be displayed if the current user is a brand promoter. Example:

<a id="popsell_add" href="javascript:void();" style="display: none;">
<img width="35" height="35" border="0" alt="" src=""></a>

The id of the button must be “popsell_add”, or otherwise its name must be bound in the button_id variable of the product.js tag.

Data Hash encryption [OPTIONAL]

Popsell offers an option to enforce the security of the data passed to Popsell during the order confirmation process. The objective is to avoid a hacker to pass fake order information trying to get more cash in its Popsell account.

Popsell will provide you with a KEY during the setup process. The key will be used to generate a sha1 hash of a string composed of the concatenation of the order ID, the order payment status, the amount paid (converted in cents) and the key.

This hash has to be generated on the server side, and bound into the “hash” javascript variable in the confirmation.js tag.

Example of a hash generation in PHP for #Order Hash#:


Check out Tag (order.js) [OPTIONAL]

If not all the data required in the confirmation page is available at that stage, it is possible to insert another tag in a checkout page, before the payment process.

The script has to be pasted at the bottom of the checkout page, i.e. the page which displays the cart or the order summary. Make sure the tag is on a page where the order cannot be updated anymore by an AJAX script (eg quantities, promo), otherwise the data sent by the tag will be wrong (data sent during page load).

Several variables have to be bound there instead of being bound in the confirmation tag:


The brand’s order identifier


The total amount of the order (including tax and without shipping costs)


A JSON list containing the product ID, name, unit price and quantity (for each product of the order). [OPTIONAL]

firstname, lastname, email

Name and email of the user [OPTIONAL]




“//” (production) or

“//” (test)

Display of the promo code on a checkout pop-in [OPTIONAL]

If a promotion (with a web promo code) is available for the customer, it will be displayed by default on the welcome popin (scenario = 1).

This behaviour can be changed, in order to automatically display a popin with the promo code on a checkout page (scenario = 2).

To do so:

  • The checkout tag (order.js) must be installed.

  • Ensure that this tag is on a page where the user can enter the promo code.

  • Set var scenario = 2, in the home page tag and in the product page tag.

Product picking on a multiple products page [OPTIONAL]

It is possible to add a product picking button on a page which displays a list of products (products in a category, search result page, wish list page …).

1/ The product_list.js script must be pasted at the bottom of the product list page.


Replace “Popsell_list_add” by the class name used for the picking buttons


Same as home page tag

2/ Add a button on each product of the list:

  • The button style must be set initially to “display: none”

  • Add the following click event to each button:

onclick =

Bind each values with the corresponding product data.

Warning: you must be able to get the url of a large size image of the product. Recommended minimum size is 486px for landscape photos, 236px otherwise.


In order to collect the data entered by a user in a form on your website, two additional tags are provided.

The first tag contact.js will be used on the page containing the form, where the user is redirected from the Popsell website.

The second tag contact-confirm.js will be used on the form confirmation page, when the user has entered and submitted his data.

These tags will enable to collect the data entered by the user, and send it back to Popsell. Popsell will insert the data in the database, to add the contact to the ambassador’s contact list, and to the gamification program.

Contact form tag (contact.js)

Paste this tag preferably at the bottom of the form page, before </body>

Only one variable has to be bound:


Same as home page Tag

Auto fill of the sales rep ID

The Popsell tags create a cookie popsell_data which contains a JSON List with several values (depending on scenarios).

{ "RC":"GP00001567", "PC":"HUY879" }

You can query that cookie for the “RC” value, which contains the value of the Sales Representative ID.

It is possible to automatically fill in a specific field of your form, with the ID number that identifies the ambassador (i.e. the sales representative) into your platform.

An example of the code to fill a field is given in contact.js :

var popsell_data = JSON.parse(this.getCookie(‘popsell_data’));
// Insert extra code below (executed after popsell’s tag loading)
var my_input = document.getElementById(“client_id”);
my_input.value = popsell_data.RC;
// End of extra code

Contact validation tag (contact-confirm.js)

Call this script when the contact clicks on the button to submit the form, and bind the following variables:





M or F


1 : Hostess, 2 : Client, 3 : Prospect, 4 : Sales representative


ID of t


Date of birth,
use the format “YYYY-MM-DD”


0 : no opt-in, 1 : opt-in accepted

(default is 0)


free comments (no length restriction)


Url of the contact’s photo


128 characters max





128 characters max


128 characters max




International locale, eg : fr_FR


A JSON list containing extra data for specific usage [OPTIONAL]
All values must be bound as an attribute name - value pair

See example below.

Example of extra_data JSON list :

var extra_data = {
    “Organization level”:”Sales leader”,
    ”Number of children”:3,
    ”Hair color”:”Blond”

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.