Installing Your Referral Program on WordPress

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

WordPress plugins required on this tutorial

The following plugins are required on this guide. We will show you how to integrate Genius Referrals with WordPress using a contact form or sign up form as the main way to capture new referrals (prospects). Depending on your needs, you must decide what plugin to use to capture new referrals. 

• Contact Form 7
• Profile Builder

Go to the Plugins area in the main menu.

To install the required plugins (Contact Form 7, Profile Builder) click on Add New button above and then look for the plugins names and click on “Install Now” button for each plugin that you need.

Beginning WordPress integration with Genius Referrals

To install the Genius Referrals template and extra tracking codes on your WordPress, you’ll need to add the code snippets in some pages of your website. For instance, to catch new referrals, you need add on your contact form a specific script.

In the following sections, we’ll explain in detail some examples for every scenario you may have on WordPress.

To get the codes snippets, we ask Genius Referrals to generate the scripts needed for this integration. So we need to go to the Design Center section, select a specific template from the list to see the code we need to add on the WordPress pages.

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

The image below shows the code snippets needed to get integrated with Genius Referrals.

Loading the Full Widget Template on your referral program page

To load the Genius Referrals Template, we’ll create a new page on WordPress and name it “Refer and Earn”. Then we’ll add the necessary code snippets to the page. Below is an example of how Genius Referrals generates the code snippets.

Copy the code from Genius Referrals, click on the Text Tab on the WordPress editor and paste the code. Below we show you how to format the code.

Here you can see a zoom of the code.

Once the code is ready, click on the visual tab on the WordPress editor and then click back again on the Text tab, you’ll see how WordPress has finally formatted the code.

To finish the process click on the “Update” button to save the page and then click on “View Page” button and you’ll see finally the Genius Referrals template loaded on your “Refer and Earn” page.

Code Snippet

<span class="gr_full_widget_design" id="gr-my-wordpress-default-2">&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": "my-wordpress-default-2",
        "grCustomerCurrencyCode": "USD",
        "grLanguage": "en"
    });
</script>

Configuring your Landing Page script.

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

Select the Text Tab on the WordPress editor as we show on the picture below.

Finally, click on Visual Tab and then click again on the Text Tab to see how WordPress has formatted the code or simply click on “Update” button to save the changes. Below is an image how the code has been formatted.

Code Snippet

This is my landing page...

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

 

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.

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.

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.  

If you see the cookies, as shown above, your landing page is ready. Congratulations!

Configuring “Registration Page” script

WordPress have his own registration flow. Which is enough for registering a new user on your website. But for making this tutorial easier and cleaner, we’ll use the “Profile Builder” plugin. The next step is to set up the “Login Page” and “Register Page” in WordPress. So first we need to create this pages and then add the necessary script generated by Genius Referrals.

Creating the “Login Page”

Go to the pages section on WordPress and create a page named “Login Page”. This time we're gonna use the tags of the “Profile Builder” plugin to generate the page source. The only thing to do is to add a snippet from the plugin. Below there is an image that shows the final result.

Click on “Update” button to save the changes, and then for seeing the generated page click on “View Page” button, then the page will be loaded. Take a look to the image below.

Creating the “Registration Page”

Likewise you did with “Login Page”, you'll create the “Registration Page”, but this time we’ll add the code snippet generated by Genius Referrals. So when a user is been registered on your system a new referral will be generated for the referrer that was caught previously on the “Landing Page”. Below is an image of the page.

Here is how looks the code of the “Registration Page”. The underline code has three parameters passed to the processCustomer of Genius Referrals. The values are taken from the fields of the registration form generated by Profile Builder plugin. So when the form is submitted (first_name, last_name and email) inputs are taken from the registration form and sent to Genius Referrals to create a new referral.  Let take a look to the source code of the Registration Page to ensure that the ids of the fields are the same passed to processCustomer function. But first we’ll save the page to see how WordPress formats the code.

Here is how the code finally looks. Click on “Update” button and then on “View Page” button to see the final transformations by WordPress on the “Registration Page”. We also will see the source of the form.

Code Snippet

[wppb-register]

<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.processCustomerAndBonus({
        "grTemplateSlug": "my-wordpress-default-2",
        "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) **/
    });
</script>

As you can see, we use in the code above, the ids of the fields to get the values of these parameters and then pass the values to the processCustomer function. Below there is a picture of the Register form. If you complete the form and clic on the Register button a new referral should be generated on Genius Referrals.

After the form is submited a new referral is generated on Genius Referrals. 

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

Configuring a “Contact Page” to catch new referrals

The contact page will be generated by the Contact Form 7 plugin. Basically we'll do the same that we've done with registration page. So when a user sends a message to the sales team the Genius Referrals will generate another referral for the advocate. Let's create the “Contact Page”. See below how the code must be for this page.

This time we can’t pass to the processCustomer function the “first_name, last_name and email” fields from the contact form. This is because the form only have the fields your_name and email. So in cases where you don’t have access to the fields first_name and last_name, you can pass the email as the first_name and last_name. So click on “Update” and “View Page” buttons, to see how “Contact Form” looks.

Code Snippet

[contact-form-7 id="57" title="Contact form 1"]

<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.processCustomerAndBonus({
        "grTemplateSlug": "my-wordpress-default-2",
        "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) **/
    });
</script>

If the code is ok when a prospect sends the message, a new referral will be generated for the advocate. So let take a look on the "Refer and Earn" page to see the statistics.

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.