Why you need to show a notice to EU visitors

Refermo aims to protect your user's privacy, and offers a way to respect cookie restrictions in the EU.

The ePrivacy Directive states that to comply with GDPR and the ePrivacy Directive you must, among other things:

  • Receive users’ consent before you use any cookies except strictly necessary cookies.
  • Provide accurate and specific information about the data each cookie tracks and its purpose in plain language before consent is received.

In order to track referrals within the attribution period (default 30 days), Refermo creates a cookie in visitors' browsers after they visit a referral link. If the visitor signs up to your app within that period, the cookie is used to determine if there is an active referral and which member's link it was that the visitor clicked.

How to add a dynamic notice to your site

To be compliant with the ePrivacy Directive and GDPR, Refermo can show a notice to all EU visitors to your page, in an HTML element you determine (and have design control over).

Important: if you do not add the HTML element outlined below, referrals within the EU will never be created as cookies will not be set in visitors' browsers.

Here is an example:

A notice like this will be shown to all visitors in the EU (based on their IP address), plus any visitor for whom Refermo cannot determine the exact location (to be safe).

Once a visitor clicks the button a thank you message is displayed, replacing the contents of the element.

To add the cookie notice and stay compliant, simply add an element with the ID refermo-notice to your page (make sure you also add the JavaScript library!).

It's best to show this towards the top of your page and to use colour to highlight the notice to your users, especially if you're offering them a discount for signing up!

Something like this is all you need to add

<div id="refermo-notice"><div>

By default, if the visitor is not in the EU, this element will be removed automatically from the page after page load.

Style the notice to match your site

You can easily style this notice with CSS. This is the HTML once populated:

<div id="refermo-notice">
    <p id="refermo-cookie-message">You've earned $10 off from a referral but to redeem it, please confirm that you're OK using cookies.</p>
    <button id="refermo-cookie-button">Set referral cookie</button>
    <p id="refermo-cookie-info">Clicking the button above sets a cookie in your browser for our privacy-friendly referral system. If you sign up within the next 30 days the person who sent you here will earn a referral reward and you'll instantly get given $10 off.</p>
</div>

When the button is clicked, this is the HTML when the thank you message is displayed:

<div id="refermo-notice">
    <p id="refermo-cookie-thankyou">Thank you! You have set a 30-day referral cookie and earned yourself $10 when you sign up.</p>
</div>

You can style this element by using the CSS classes refermo-cookie-message refermo-cookie-button, refermo-cookie-info and refermo-cookie-confirmation. No CSS is automatically applied to these elements by Refermo so they will pick up styles from your own stylesheet.

<style>
    #refermo-notice { margin: 5rem 0;padding: 1rem; background: #fbebeb; border-radius: 5px; }
    #refermo-info { font-size: 15px; color: #777 }
    button { font: inherit;border: 0; background: #444; color: #fff; padding: 0.5rem 1rem; border-radius: 5px }
</style>

The "$10 off" is dynamic and will reflect the reward available to the visitor determined by the referring member's campaign settings.

If double-sided rewards are not on for the campaign, a slight different message is displayed:

You've just clicked on a referral link. To register the referral and reward your referrer, please allow us to set a cookie.

[Set a referral cookie]

Clicking the button above sets a cookie in your browser for our privacy-friendly referral system. If you sign up within the next 30 days the person who sent you here will earn a referral reward.

(Optional) How to show a reward message to non-EU visitors

By default, the notice HTML element will be deleted from the page if the visitor is not in the EU.

However, you may want to prompt your referred uses to sign up, especially if you are offering double-sided rewards by signing up from a referral; for example 10% off.

Here's an example in the wild of a referral being shown a reward message:

To do the same with Refermo's notice, add data-show-reward to the HTML element, like this:

<div id="refermo-notice" data-show-reward><div>

For any non-EU visitor, this will tell Refermo to display the referral reward to the visitor, instead of deleting the HTML element. (Any EU visitor will still be shown the normal message plus cookie button.)

This will look something like this:

If your campaign does not offer double-sided rewards, the element will be removed from the page as there will be nothing to entice the visitor.