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

Who Should Read this Tutorial?

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 to the Joomla configurations.

i
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 a <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.
Next, you need to click on the 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.

In the Plugin tab, towards the bottom is a list of Prohibited Elements.
Remove the word script (and the comma) from the list in the text box. Then click on the button "Save & Close".

Disabling Content - Email Cloaking Plugin

If you going to use an 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 complete a contact form, you need to 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 on your website.

In the next sections, we'll explain in detail some examples of 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. 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 article and name it "Refer and Earn" and then add the necessary snippets to the article. Below is how Genius Referrals generate the code.
Below we show you how finally the code looks. For pasting the generated code in the editor, you need to click on the "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
Once you have your code ready, you'll need to click on the "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
i
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.
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
For the Landing Page configuration, we will create a new page and name it "Landing Page". Below are the scripts generated by Genius Referrals for the "Landing Page".

Configuring your Landing Page script.

<!-- 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 -->
Remember, for pasting the generated code, you need to click on the "Toggle editor" button. The image below shows the article.

Catching new referrals on your website with your refer and earn program
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.

Checking the advocate data on your Joomla website

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

Joomla has his own registration flow. This 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 the Component tab under User Manager Menu, and then activate "Allow User Registration" by clicking on the "Yes" button. Finally, click on the "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 at the image below.
Rewriting Registration Page in the Joomla template
Once in the editor, select the "Create Overrides" Tab. Under the "Components" column select the folder "com_users" and click on the registration file link.
Setting up configurations in Joomla for your refer and earn program
Now go to Editor Tab on the same page you are and navigate to the "registration" folder (html/com_users/registration) in the tree folder sidebar. Then click on the "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

<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerFirstname": "CUSTOMER_FIRSTNAME",
     "grCustomerLastname": "CUSTOMER_LASTNAME",
     "grCustomerEmail": "CUSTOMER_EMAIL",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "REFERENCE",  /** could be the order id, timestamp, etc. **/
     "grPaymentAmount" : "PAYMENT_AMOUNT" /** optional (float) **/
},
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.processCustomerAndBonus(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
Here is how the code of the Registration Page should look. The underline code represents the 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.
i
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 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 on the image below how the data is captured on the registration form.
Finding out what parameters to use 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 to create a Category, a Contact that belongs 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.
i
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 contact and name it "Manager". Then click on the 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 the 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 Contact 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 the "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 as 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 the "Create Overrides" Tab. Then under the "Components" column select the folder "com_contact" and click on the 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

<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerFirstname": "CUSTOMER_FIRSTNAME",
     "grCustomerLastname": "CUSTOMER_LASTNAME",
     "grCustomerEmail": "CUSTOMER_EMAIL",
     "grCustomerCurrencyCode": "USD",
     "grCanRefer": false,
     "grReference" : "REFERENCE",  /** could be the order id, timestamp, etc. **/
     "grPaymentAmount" : "PAYMENT_AMOUNT" /** optional (float) **/
},
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.processCustomerAndBonus(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
Here is how the code of the "Contact Us" looks like. 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 a referral will be generated for the referrer. 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.

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