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. 

Your wordpress website homepage where we will install a referral program


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

WordPress version

On this tutorial, we are using WordPress 4.9.4

Required WordPress plugins

Even though we'll show you how to integrate Genius Referrals with WordPress using both plugins Contact Form 7 and Profile Builder, most of the time you will need only one plugin. You should also be able to install your referral program on WordPress using similar plugins. 


Go to the Plugins area in the main menu.

required plugins to install the a referral program on Wordpress

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.


getting the code snippets from the wordpress installation


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



code snippets for your wordpress instalation


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

List of code snippets to be installed on your wordpress for your referral program



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.


codes snippets needed to install your referral program on wordpress


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.


installing your refer and earn program on your WordPress with Genius Referrals code snippets



Here you can see a zoom of the code.

details of the codes snippets to be place on your wordpress editor



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.


final code snippet on your wordpress referral program



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>


Look how beautiful looks your referral program template on your wordpress website


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

Getting the code snippet to place on the landing page of your referral program


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

Configuring the landing page for your referral program on wordpress


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.


Checking the landing page for your referral program

 

checking the landing page for your referral program on your wordpress


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.

Use the following referral tools to refer your friend on wordpress


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.

matching the genius referral landing page with the wordpress landing page


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.  

Tracking new referral on your refer a friend program with wordpress


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.

setting up a login page for the referral program


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.

login page for wordpress referral program


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.

creating a registration page for wordpress referral program


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.

capturing new referral on your wordpress referral program


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>


Getting the fields from the form



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.

capturing new referrals on wordpress registration page

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

confirmation page for wordpress 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.

Check your new referral generated on wordpress


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.

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.  

contact page snippets for your refer and earn program on wordpress

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>


get field from contact form on your wordpress refer a friend program



complete the contact form to generate a new referral for your word referral program


referral generated on wordpress referral program


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.

New referral generated on your wordpress 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