Installing Your Referral Program on Joomla

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 Joomla website. If you want to install a referral program on your Joomla website, please continue reading. 

Your Joomla website homepage where we will install a referral program


Joomla requirements for this integration guide

For security reasons when you create an article, Joomla does not allow tags to be placed in the content area of Articles. So every script, email address, applets, iframe, will be removed. To evade this, we’ll need to do some changes on the Joomla configurations.


NOTE

Even though we'll show you on this tutorial how to integrate Genius Referrals with Joomla using a Registration form and a Contact form to catch new referrals, most of the time you will need only one way for catching new referrals. Depending on your business needs, you must decide whether to process new referrals using the Registration form or the contact form. 


Setting up the Global Configuration to allow JavaScript

Go to the Global Configuration area under the System dropdown. Click on the Text Filters tab. For the User Group that will be adding content that might need an <script> tags, change (or verify) the setting to No Filtering. For security reasons, change only the necessary User Groups. We recommend only to make changes to the group Super Users. The images below show the process.

Configuring Joomla for your refer a friend program


Configure Joomla to install the refer a friend program

Next, you need to click on button “Save & Close”.


Enabling JavaScript in TinyMCE

There is another configuration to consider to allow script in your articles. Go into the Plugin Manager under the Extensions dropdown menu. It the search box, type in TinyMCE. This should show the “Editor – TinyMCE” plugin. Click on the plugin name to open up the settings for the plugin.

Enabling javascript so that we can install the refer a friend program


Enabling Javascript so that we can install the referral program on Joomla

In the Plugin tab, towards the bottom is a list of Prohibited Elements.

Allow scripts on Joomla for your refer a friend program


Enabling script on Joomla to install a refer a friend program

Remove the word script (and the comma) from the list in the text box. Then click on button “Save & Close”.


Disabling Content - Email Cloaking plugin

If you going to use email address in your JavaScript snippets, you’ll need to disable Content - Email Cloaking plugin. So, we need to go into the Plugin Manager under the Extensions dropdown menu. It the search box, type in Email Cloaking. This should show the “Content - Email Cloaking” plugin.

Enabling plugins for your refer and earn


Now click on the “Disable” button to disable the plugin as we show you in the image below.

Disabling contents so that we can install your referral program


Beginning Joomla integration with Genius Referral

To load on your Joomla's website the Genius Referrals template and tools for the referrals program, you’ll need to add scripts in some articles of your site or rewrite some contents of your Joomla template. For instance if you want to track new referrals when prospects compleate a contact form, you need add on your contact form a specific script. You must do the same when you got a user registration in your system 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 Joomla website.

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

Getting the code snippets for your referral program


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

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

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

Genius Referral code snippets to install on Joomla 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 article and name it “Refer and Earn” and then add the necessary snippets to the article. 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 click on “Toggle editor” button.

Genius Referrals installed on your Joomla

Here you can see better a zoom of the code.

Codes snippets needed to install a referral program on joomla

Code Snippet

<span class="gr_full_widget_design" id="gr-referral-program-home-page-252">&nbsp;</span>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script>
<script type="text/javascript">
    grToolbox.loadTemplate({
        "grTemplateSlug": "referral-program-home-page-252",
        "grCustomerCurrencyCode": "USD",
        "grLanguage": "en"
    });
</script>‚Äč    

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


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



NOTE

If when performing the above actions you can not see your referral template, check in the article if the code fragment has been saved using "Toggle editor". In case it does not work, you can try changing the editor.  Below we explain the steps you should follow. 


Change editor


  • Go to the Global Configuration area in the System drop-down menu.
  • Click on the Site Tab.
  • Look for the Default Editor option and select Editor-CodeMirror.

The image below shows the process.


Now try to load the Full Widget template on your page for the referral program again.


Configuring your Landing Page script

For the Landing Page configuration, we'll create a new article 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 click on “Toggle editor” button. The image below shows the article.

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


Code Snippet

<p>This is my landing page...</p> 
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script><script type="text/javascript">
    grToolbox.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. Otherwise, you must edit your widget package in Genius Referrals and replace the one that is with the URL of your landing page in Joomla. 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 Joomla 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 the referrer 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

Joomla have his own registration flow. Which is good enough for registering new users on your website, but by default Joomla doesn't have this functionality enabled. To enable it, go to the Global Configuration area under the System dropdown. Select Component tab under User Manager Menu, and then activate “Allow User Registration” by clicking on the “Yes” button. Finally click on “Save & Close” button. You can check the process in the image below.

Global configuration for installing your refer and earn program


Rewriting the Registration Page in the Joomla template

Sometimes instead of creating an article we are going to overwrite the Joomla template. In this case, we're going to modify the registration page and add the Genius Referrals script. To do this, go to the Template Manager under the Extensions dropdown menu. Then for editing the template, click on the template in your site, for this example we are using "Protostar". Look the image below.

Rewriting Registration Page in the Joomla template


Once in the editor, select the "Create Overrides" Tab. Under "Components" column select the folder "com_users" and click on registration file link.

Setting up configurations in Joomla for your refer and earn program


Now go to Editor Tab in the same page you are and navigate to "registration" folder (html/com_users/registration) in the tree folder sidebar. Then click on "default.php" file to edit it. We'll add the corresponding Genius Referrals code snippet at the end of this page.

Processing new referrals in your refer and earn program

 

Code Snippet

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script><script type="text/javascript">
jQuery( document ).ready(function( $ ) {       
jQuery('#member-registration').submit(function( event ){
          grToolbox.processCustomer({
            "grTemplateSlug": "referral-program-home-page-252",
            "grCustomerFirstname": jQuery('#jform_name').val(),
            "grCustomerLastname": jQuery('#jform_name').val(),
            "grCustomerEmail":  jQuery('#jform_email1').val(),
            "grCustomerCurrencyCode": "USD",
            "grCanRefer": false    });
             event.preventDefault();
         var form = this;
         setTimeout(function(){ form.submit(); }, 1500); });
});
</script>


Here is how the code of the Registration Page should look. The underline code are three parameters that are passed to the processCustomer function of Genius Referrals. The values are taken from the fields of the registration form. So when the form is submitted, the input (jform_name and jform_email1) are taken from the registration form and sent to Genius Referrals to track new referrals.


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.

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 on 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

Joomla 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 create a Category, a Contact that belong to it and a Contact form. Once you have a contact form ready, we add the code snippet from Genius Referrals to it.  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.  


Go into the Contacts under the Components dropdown menu and then select the submenu item Categories.

Configuring the contact form for your referral program


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

Create a new category


Next create a new contact. So go into the Contacts under the Components dropdown menu and then select the submenu item Contact.

Setting up a contact form


Create a contact and name it “Manager”. Then click on button “Select user” and link the current contact with a Joomla user. Next in the category field choose the “Managers” category we created before. Finally fill the other fields like email, Address etc. Once you have finish click on button “Save & Close”. Check the image below.

Creating a new manager in Joomla


Now, we are ready to create the Contact Form. So the next thing we need to do is to create an item on the Main menu. So, go into the Main Menu under the Menu dropdown menu and then select the submenu Add New Menu Item.

Creating a new contact form


Create a new menu item and name it “Contact Us”. On the “Select” button of the field “Menu Item Type” select Single Contact from the Contac Categories in the modal windows. In the “Select” button of the field “Select Contact” choose the contact “Manager” we already created before. Then click on “Save & Close” button.

Create new contact form for your referral program


Rewriting “Contact Us” in the Joomla template

At this point we already have a Contact Form, but still need to add the Genius Referrals script. So we'll rewrite it like we did with the Registration Form. To do this,  go again to the Template Manager under the Extensions dropdown menu. Then for edit the template click on the template you are using in your site, remember, for this example we are using "Protostar".

Once you are in the editor, select "Create Overrides" Tab. Then under "Components" column select the folder "com_contact" and click on contact file link.


Now go to Editor Tab in the same page you are and navigate to the "contact " folder (html/com_contact/contact) in the tree folder sidebar. Then click on "default_form.php" file to edit it. We'll add the corresponding Genius Referrals snippet at the end of this page.

Processing new new customer in your refer a friend program


Code Snippet

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript" src="https://template.geniusreferrals.com/bundles/portal/js/geniusreferrals-tool-box_1.1.3.min.js"></script><script type="text/javascript">
jQuery( document ).ready(function( $ ) {
       jQuery('#contact-form').submit(function( event ){
              grToolbox.processCustomer({
            "grTemplateSlug": "referral-program-home-page-252",
            "grCustomerFirstname": jQuery('#jform_contact_name').val(),
            "grCustomerLastname": jQuery('#jform_contact_name').val(),
            "grCustomerEmail":  jQuery('#jform_contact_email').val(),
            "grCustomerCurrencyCode": "USD",
            "grCanRefer": false    });
             event.preventDefault();
         var form = this;
         setTimeout(function(){ form.submit(); }, 1500); });
});
</script>



Here is how the code of the “Contact Us” 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 (jform_contact_name and jform_contact_email) 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