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 Templates Builder. If you haven't done this yet, please go to our Templates Builder and customize your referral template before continuing with this tutorial.

INSTALLING YOUR REFERRAL PROGRAM ON DRUPAL

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

Who should read this tutorial?

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 to add on your contact form a specific script. You must do something similar when you got user registration on your website and want to track new referrals when new customers sign up on your website.

In the next sections, we'll explain in detail some examples of 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. For that we need to go to the Integrations- Code Snippets-Installation section.

Integration section through which you will install your referral program
On the installation section, note that we have 4 options to install the program: Embedded Code, Modal Window, Floating Bubble, and Slider. Considering the requirements of your store, choose the option that best suits your needs. Once you select one of the options, you will have access to the corresponding code snippet to install the Program template.
The Modal Window, Floating Bubble, and Slider options, they include a setting section where you can customize some details, for example, style and location.
Installation options.
Follow the instructions, and you will get the code corresponding to each case.
Embedded Code

<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page-1646">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page-",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.0.0.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
Modal Window

<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page-1646">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page-",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.0.0.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
Floating Bubble

<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page-1646">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page-",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.0.0.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->

Loading the Advocate Portal Template on your 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 we show you how finally the code looks. For pasting the generated code in the editor, you need to 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
Once you have your code ready, you'll need to click on the "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
To obtain each of the specific scripts we need to go to the Integrations-Code Snippets-Conversion Tracking-Scenarios section. In this section, you can find a selection of various scenarios that can be tailored to your needs depending on which one applies to your website.Depending on which one is chosen, the steps to follow and the fragments to install vary. Scenario E004 was chosen for this guide.

Configure the Tracking and Conversion scripts

Getting the code snippet to place on the landing page of 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 are the scripts generated by Genius Referrals for the "Landing Page".
Remember, for pasting the generated code, you need to select Text format "Full HTML"
Catching new referrals on your website with your refer and earn program

Code Snippet


<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     grCookieLifeTime:"180"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.catchReferrer(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
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 at 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 browsers 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 has 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.
i
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.
i

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 doesn't load the scripts when you load the registration page, then we recommend you clear the Drupal Cache making click on the "Clear all caches" button located (Administration > Configuration > Development > Performance).
i
So when a user is been registered on your website a new referral will be generated for the referrer captured previously on the "Landing Page". Let take a look at 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.
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 enable 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.
i
To enable the contact module go to (Administration > Modules) and 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 issues that the user needs 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 permission 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 the 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 caught previously on your "Landing Page". Let's take a look at 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.
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 at 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.

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.
Español
LANGUAGE