Installing Your Referral Program on Drupal

If you are in this section, we are assuming at this point that you have already personalized a referral template for your referral program on our Design Center. If you haven't done this yet, please go to our Design Center and customize your referral template before continuing with this tutorial.


Who should read this tutorial?

This tutorial is for customers with a Drupal website. If you want to install a referral program on your Drupal website, please continue reading. 

Your Drupal website homepage where we will install a referral program


Beginning Drupal integration with Genius Referral

To load on your Drupal's website the Genius Referrals template and tools for the referrals program, you’ll need to add scripts in some pages of your site or add some snippet on your Drupal's theme code. For instance if you want to track new referrals when prospects complete a contact form, you need add on your contact form a specific script. You must do something similar when you got user registration in your website and want to track new referrals when new customers sign up in your website.

In the next sections, we’ll explain in detail some examples for every scenario you may have on your Drupal website.

To get the needed scripts we ask Genius Referrals to generate the code snippets needed to install your referral program on Drupal. So we need to go to the Design Center section, select a specific template from the list to see the scripts we need to add on the Drupal contents.

Getting the code snippets for your referral program

Now click on the “Get me the code” button.

Getting the script to install your refer and earn program on Drupal

The image below shows you the code snippets needed to install a refer and earn program on Drupal.

Genius Referral code snippets to install on Drupal for your referral program


Loading the Full Widget Template on you referral program page

To load the Genius Referrals Template we’ll create a new Basic Page and name it “Refer and Earn” and then add the necessary snippets to the page. Below is how Genius Referrals generate the code.

Installing your referral template on your website

Below we show you how finally the code looks. For pasting the generated code in the editor, you need select Text format “Full HTML”.

Genius Referrals installed on your Drupal

Here you can see better a zoom of the code.

Codes snippets needed to install a referral program on drupal


Code Snippet

<span class="gr_full_widget_design">&nbsp;</span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.0.6.js" type="text/javascript"></script>
<script type="text/javascript">
     var toolbox = new grToolbox();    
     toolbox.loadTemplate({
          "grUsername" : "demo@geniusreferrals.com",
          "grTemplateSlug": "my-drupal-default"});
</script>
    

Once you have your code ready, you'll need to click on “Save” button and load the “Refer and Earn” page, then you'll see your Genius Referral template.

Look how your refer a friend program is been loaded on your referral program


Configuring your Landing Page script

For the Landing Page configuration, we'll create a new Basic Page and name it “Landing Page”. Below is the scripts generated by Genius Referrals for the “Landing Page”.

Code snippet needed to catch new referrals on your refer an earn program

Remember, for pasting the generated code, you need to select Text format “Full HTML”. The image below shows the page.

Catching new referrals on your website with your refer and earn program



Code Snippet

<p>This is my landing page.</p>

<script src="https://www.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.0.6.js" type="text/javascript"></script>
<script type="text/javascript">
    var toolbox = new grToolbox();
    toolbox.catchReferrer();
</script>    


There is something more to check on the “Landing Page”. The landing page URL that you've set up on your widget package (where your advocates will land on) on Genius Referrals must match the WordPress “Landing Page” URL.



Choose the proper landing page for your refer a friend program

Picking up the perfect landing page for your refer and earn program

As you can see the URLs are the same. So when someone clicks on a shared URL it will be redirected to your landing page, then the referrer will be caught by the system to generate a future referral. For this example, we’ll take the personal URL of one of the advocates.


Choosing the proper referral tools on your refer a friend program

If we take the personal URL of the advocate and paste it on the browser Genius Referrals will redirect you to the landing page, then the referrer will be caught and stored by the System on a cookie. Let take a look to this process.

Checking the advocate data on your Drupal website

Until now the flow of the landing page is working. As you can see you have been redirected to the landing page. So the next thing is to check if the System has caught and save the referrer data in a cookie. Open the browser's inspect element tool (for Google Chrome is this case) and check if the cookies are been created.  


Inspecting how the advocate data is store on your cookies

If you see the cookie that was shown above in the image, your landing page is ready. Congratulations!

Configuring the Registration Page for Catching new Referrals

Drupal have his own registration flow; which is good enough for registering new users on your website, so the only thing left to do is adding the code snippet to the registration page. To do that we need to modify the source of the current theme and add some function to it. The only duty of this function is to load the necessary script that is subscribed to the registration form submission and generate a new referral on Genius Referrals.


Creating the Script

For creating the script, we've to go to the current theme directory of Drupal (c:\xampp\apps\drupal\htdocs\themes\bartik), then once we are there we'll create a folder "js", then inside it we are going to create a JavaScript file and we name it "genius.referrals.js". Below you can see "genius.referrals.js" content.


NOTE

For this example we are using "xampp", that is the reason why we are working on a local directory, but if you are using a public domain, you should create this file on your remote hosting. Also, for this example, the name of the Drupal's theme is "bartik", so you must use the name of the theme you have active in your Drupal.


genius.referrals.js


jQuery( document ).ready(function() {
    
    /*
    * Subscribing to Register Form Submit
    */
    jQuery("#user-register-form").submit(function(event){
        
        var toolbox = new grToolbox();   
         toolbox.processCustomer({         
                "grUsername" : "demo@geniusreferrals.com",         
                "grTemplateSlug": "my-drupal-default",         
                "grCustomerName": jQuery('#edit-name').val(),         
                "grCustomerLastname": jQuery('#edit-name').val(),         
                "grCustomerEmail": jQuery('#edit-mail').val(),         
                "grCustomerCurrencyCode": "USD",         
                "grCanRefer": false    });    
         event.preventDefault();          
         var form = this; 
         setTimeout(function(){form.submit(); }, 2500); 
    });
});


NOTE

The processCustomer function defines the parameters (name, last name and email) but if these parameters are not captured on the registration form, you can pass the email instead.


 

Loading the Scripts

To load Genius Referrals Script and the above script we need to add a function inside (c:\xampp\apps\drupal\htdocs\themes\bartik\template.php) file located on "bartik" folder. So, add the following snippet inside this file.

........

function bartik_preprocess_page(&$variables) {
    
  /**
  * Adding custom javaScript
  */
  
  drupal_add_js('https://www.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.0.6.js', 'external');
  drupal_add_js(drupal_get_path('theme', 'bartik') .'/js/genius.referrals.js');
}
........

NOTE

If Drupal don't load the scripts when you load the registration page, then we recommend you to clear the Drupal Cache making click on "Clear all caches" button located (Administration > Configuration > Development > Performance).


So when a user is been registered on your website a new referral will be generated for the referrer captured previosly on the “Landing Page”. Let take a look to the source of the Register Page to ensure that the ids of the fields are the same passed to processCustomer function.

Finding out what parameters to use on your referral program

As you can see, in the code we use the ids of the fields to get the values and then pass the values to the processCustomer function. See in the image below how the data is captured on the registration form.

Register form for catching new referrals on your referral program

Registration confirmation


So if all goes well, the “Refer and Earn” page must have a referral for the corresponding advocate. The image below shows the statistics.

checking the amount of referral the advocate has generated


Configuring “Contact Page” to catch new referrals

Drupal has a contact form already. The only thing you need to do is to set it up so that it captures new referrals. So, for this process we need to enabled the contact Module, then create the categories you need and set the permissions to define who can use the Contact Form. Once you have a contact form ready, we add the code snippet from Genius Referrals to the "genius.referrals.js" script to subscribe to the form submission. Then, when a user sends a message using the contact form, Genius Referrals will generate a new referral (if needed) for the advocate.


Using the Contact form to catch new referrals

As we have explained before, you can catch new referrals using any form, and you only need to catch referrals using one form. In accordance with your needs you must decide whether to use a registration form or a contact form or any other type of form to catch your referrals.  


To enable the contact module go to (Administration > Modulesand enable it by checking the box and saving your change. 

Enabling drupal contact module


You only get one contact form but it can display a dropdown list of "Categories" for the types of issue that the user need to contact you about. The results of the form for each category can be emailed to a different address. To use categories, click on (Administration > Structure > Contact form)

Configuring the contact form for your referral program


Create a new category and name “Manager”. Click on “Save”. Check the image below.

Create a new category

In order to allow people to use this contact form, you will need to give them permissions to do so. Click (Administration > People > Permissions), locate the "Contact module" entry and enable it for the roles that will use Contact. Save your changes. The menu link (next step) will not be visible to anyone not having access.


Setting contact form permissions

If you want your contact form to appear in a menu, go to (Administration Structure > Menus > Navigation > List links). Click on the "enable" checkbox at the right of the contact item, click on "Save" at the bottom. Then click on "edit" at the right of the contact item, and in "Parent link" choose Main menu. Thanks to the "weight" you can choose at what place the item will appear in the menu.

Adding contact form to Main Menu

The only thing left to do is update the "genius.referrals.js" file with the snippet for the contact form. Below you can see the last version of the file.

genius.referrals.js

jQuery( document ).ready(function() {
    
    /*
    * Subscribing to Register Form Submit
    */
    jQuery("#user-register-form").submit(function(event){
        
        var toolbox = new grToolbox();   
         toolbox.processCustomer({         
                "grUsername" : "demo@geniusreferrals.com",         
                "grTemplateSlug": "my-drupal-default",         
                "grCustomerName": jQuery('#edit-name').val(),         
                "grCustomerLastname": jQuery('#edit-name').val(),         
                "grCustomerEmail": jQuery('#edit-mail').val(),         
                "grCustomerCurrencyCode": "USD",         
                "grCanRefer": false    });    
         event.preventDefault();          
         var form = this; 
         setTimeout(function(){form.submit(); }, 2500); 
    });

    /*
    * Subscribing to Contact Form Submit
    */
    jQuery("#contact-site-form").submit(function(event){
        
        var toolbox = new grToolbox();   
         toolbox.processCustomer({         
                "grUsername" : "demo@geniusreferrals.com",         
                "grTemplateSlug": "my-drupal-default",         
                "grCustomerName": jQuery('#edit-name').val(),         
                "grCustomerLastname": jQuery('#edit-name').val(),         
                "grCustomerEmail": jQuery('#edit-mail').val(),         
                "grCustomerCurrencyCode": "USD",         
                "grCanRefer": false    });    
         event.preventDefault();          
         var form = this; 
         setTimeout(function(){form.submit(); }, 2500); 
    });
});
Here is how the code looks. As we did with the Registration Form we are going to take the fields from the contact form to pass them as parameters to the processCustomer function from Genius Referrals. So when the form is submitted, the input (edit-name and edit-mail) are taken from the form and sent to Genius Referrals. Then when a message is been sent, a referral will be generated for the referrer catched previously on your “Landing Page”. Let's take a look to the source of the Contact Us to ensure that the ids of the fields are the same passed to processCustomer function.

Fishing the referral data from the form on your refer a friend program

As you can see, in the code we use the ids of the fields to get the values and pass them to the processCustomer function. Below there is an image of the Contact form.


capturing new referrals in your contact form on your refer a friend program

capturing new referrals on your refer and earn program

If the code is ok when a message is sent, a new referral will be generated (if needed) for the referrer. So let take a look on the “Refer and Earn” page to see the statistics. Below there is a picture that shows you the referrals generated by the advocate.

Checking the amount of referrals the advocates has generated for your referral program

Here you got the second referral generated. So, as you can see the integration with Genius Referrals is easy. Basically whenever you want to catch new referrals, you just need to call the function processCustomer and the referral will be created if the prospect is been referred by an advocate.




Resource Extension Size



Please leave your comments/questions below