How to Create a Self Referral Roadblock Modal

Using Friendbuy’s self referral redirect feature, you can create a roadblock modal that informs your users that they have been detected referring themselves, and that their conversions will not count as valid and will not generate a reward. The following is a brief guide on how to use our self referral redirect feature in combination with logic on your site to produce a roadblock modal experience for users who attempt to refer themselves.

In Friendbuy navigate to your widget’s fraud settings page. Enable self referral redirect by checking the box on the left hand side.

When the setting is enabled, a text field will appear for the redirect URL. This URL is the page that we will send referred friends to if we detect that they have clicked on their own link. For this example, we will use the homepage of our site and add a query string parameter to the end of the URL to indicate that this is a self referral. The complete URL we will enter into this field is: http://homepage.com/?self-referral=true

The next step would be to create a modal window with the messaging you want to display to the user who has attempted to refer themselves by clicking their own link. There are many ways to do this and the exact steps involved will vary based on your platform and framework. If you are unfamiliar with this process, consult your web developer for help. In our example, we will use a simple Twitter Bootstrap modal with the following code:

 
   
            
        
         
           ×
         
          We’ve detected that you have clicked your own referral link.
         Please note that any purchases made will not qualify for a reward.
         Refer your friends to earn rewards!

After installing this HTML on our homepage, we now need to write some JavaScript code to trigger the modal when we detect a self referral. We are looking for any visitors to our site homepage that have the url parameter of “self-referral=true” in their URL. We are going to use Jquery in our example, but you can use pure JavaScript or any JavaScript framework of your choosing. First, you need to detect the URL parameters using JavaScript. This is one way of doing so, but there are many others and you should choose the method that you are most comfortable with. If your javascript framework includes a built in method for detecting URL parameters, you should use that method.

function getParameterByName(name, url) { 
  if (!url) {
    url = window.location.href; 
  }
  name = name.replace(/[\[\]]/g, "\\buffer_1amp;"); 
  var regex = new RegExp("[?&]" + name + "(=([^]*)|&|#|$)"), results = regex.exec(url); 
  if (!results) {
    return null;
  } 
  if (!results[2]) {
    return'';
  }
  return decodeURIComponent(results[2].replace(/\+/g, " ")); }

Then, you can use some simple jQuery and Twitter Bootstrap javascript to detect the URL parameter and trigger the pop-up modal.


$(document).ready(function() {
  var selfReferral = getParameterByName(‘self-referral’);
  if (selfReferral === ‘true’) {
    $('#myModal').modal('show');
  }
});

Now, when a user clicks their own share link, they will land on the homepage of your site, and the Javascript code above will detect that they are a self referral and display the modal.

Step 1 - Configure a self referral redirect for your widget

Step 2 - Design a modal and install it on your site

Step 3 - Trigger the modal on self referral