Here's how to embed a referral program into your WordPress website and allow people to sign up to it using Hubspot Form.

Here is what you will learn in this tutorial.

    Connect your website to your iRefer account.
    Specific campaign settings required.
    Connect Hubspot Form to your referral campaign.
    Embedding the sharing widget into your website page.
    Testing your campaign

Here is the flow the user will take when signing up and participating in your referral program and where you will need to integrate our code outlined in the steps below.

1. Connect your website to your iRefer account

Navigate to your campaign by clicking on the "Edit" button in your Dashboard.

In the left navigation, click on the "Installation" button, then "Custom website" as shown in this screenshot.

Copy the line of code as shown in "Step 1" of this screenshot. 

Install this script on your website site by pasting in before the closing </body> tag of the page.

Refresh the home page of your website. Then refresh this page. If installed correctly, you should see a green check here.

2. Specific campaign settings required

There are some specific campaign settings you need to set.
On the "Initial setup" page choose the "Embedded" form style and change the shortcode from <div id="shortcode"></div> to <div id="sharewidget"></div>

Click on "Advanced Options" and choose "Yes" for "Automagically sign-up new participants?"

Click Save and Continue.

For this type of campaign, you can skip the following page - "Sign-up form"  as you will be using your form.

3. Connect your Hubspot Form to your referral program

We need to pass the user's email address into your referral campaign when they submit your Hubspot Form form and store this as a cookie in their browser. 

For this we need to update the Hubspot Embed code that you have in your website. We need to add some extra code to it to save the email to a cookie when the form is submitted.

You need to add the onFormSubmit section to your existing embed code if its not already there, and then add the IREFER SCRIPT inside it as shown below. 

Please remember to change the "your-website-name.com" to your website domain address. Also change "your-email" to the form field name for email field, if its different than "your-email".


hbspt.forms.create({
      portalId: 'XXXXXXX',
      formId: 'XXXXX-XX-XXX-XXXXXX',

      onFormSubmit: function($form) {

            // IREFER SCRIPT START
            //var user_email = $form.email;
            var user_email = $form.find('input[name="email"]').val();
            var user_fname = $form.find('input[name="firstname"]').val();
            var user_lname = $form.find('input[name="lastname"]').val();
            var user_name = user_fname + ' ' + user_lname;

            var domain_name = "your-website-name.com";

            var days = 365;    
            var date = new Date();    
            date.setTime(date.getTime() + (days*24*60*60*1000));
            var expires = "; expires=" + date.toUTCString();
            document.cookie = "vsu_ref_email=" + user_email + expires + "; domain=." + domain_name + "; path=/";
            document.cookie = "vsu_ref_name=" + user_name + expires + "; domain=." + domain_name + "; path=/";
            // IREFER SCRIPT END

        }

});


**Important** You need to make sure that you change "yourdomain.com" to your domain name.

4. Embedding the sharing widget into your website. 

Create a new page (you could call it "Refer Friends") on your website where you would like to display the sharing widget to those who have signed up for your referral campaign.

Then insert the shortcode below into the HTML part of this page.

<div id="sharewidget"></div>

After submitting your Hubspot Form, they will then see this widget embedded into your "Refer-a-Friend" page. You should place content around this widget to explain what rewards they will get for referring friends etc.

5. Testing your campaign

Now let's test your campaign to make sure everything is correctly setup.

When someone signs up through your form and submits, their email address will be stored in their browser as a cookie. When they visit your "Refer-a-Friend" page, they will see the sharing widget. 

    

Did this answer your question?