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 Template Builder. If you haven't done this yet, please go to our Template Builder 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 (you might use other plugins to get the same results on your site). 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:
In 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 the "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 to add on your contact form a specific script.

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

To get the code 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 snippets" 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 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.
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 the "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 are 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 the "Update" button to save the changes. Below is an image of 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 of your referral program
Checking the landing page of your referral program on your wordpress
As you can see the URLs are not the same so you must edit your social widgets package in Genius Referrals and replace the one that is with the URL of your landing page in WordPress. 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 at 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 browsers 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 has 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 these 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 the "Update" button to save the changes, and then for seeing the generated page click on the "View Page" button, then the page will be loaded. Take a look at 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 it looks at 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 the 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 at 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 the "Update" button and then on the "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 click on the Register button a new referral should be generated on Genius Referrals.
Capturing new referrals on wordpress registration page
After the form is submitted 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 the 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 has 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 at 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.