Register people into your referral program through your Unbounce form.
Here is what you will learn in this tutorial.
- Connect your website to your iRefer account.
- Connect your Unbounce form to your referral campaign.
- Embedding the sharing widget into your "Thank You" page.
- Specific campaign settings required.
- Testing your campaign
Here is the flow of a SaaS 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. Connect your Unbounce form to your referral campaign
Once you have created your Unbounce form, there are a few settings you need to update.
Click on the email field in your form and from the right side settings click Properties > Edit form fields
Then click the email field and uncheck "Auto-generate from Field Label" and enter the following ID "vsu_ref_email" into this field as shown below and click "Done"
Note: If you connected your Unbounce form with Zapier to other applications, make sure you also update the email mapping field to "vsu_ref_email".
Next, in the Properties panel on the right of your screen under "Form Confirmation" choose the following fields:
Confirmation: Go to URL
URL: Enter the URL of your Thank You page after the form has been submitted
Target: Parent Frame
Make sure the "Append form data to URL" is checked.
Click the blue "Save" button at the top of the page.
Complete the setup on Unbounce for "Targeting" your form.
Copy the Embed Code from the Installation section and paste it into your website using the options Unbounce provide you with.
3. Embedding the sharing widget into the "Thank You" page, after the user has submitted your Unbounce form.
Now we need to insert the shortcode below into the HTML part of the Thank You page you will redirect the user to after they have submitted your Unbounce form.
After submitting your Unbounce form, they will then see this widget embedded into your "Thank You" page. You should place content around this widget to explain what rewards they will get for referring friends.
4. 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 Unbounce form.
5. Testing your campaign
Now let's test your campaign to make sure everything is correctly setup.
When someone signs up through your Unbounce form and submits, their email address should have been passed in the URL as a query string like the following example:
They are then redirected to your "Thank You" page, where they will see their unique referral link which they can start sharing right away. A Welcome email will also have been sent to their inbox.