Home Login/Signup Pricing Examples

Typeform

Typeform allows you to create a dynamic and customizable sign up form while using ReferralHero as your backend to power your referral program! You may want to use Typeform if you are looking to improve the user sign up experience or to collect additional user opt-in data than you can collect with the native ReferralHero widget. This is also a great option if you are not a developer as the set up with Typeform is very easy!

There are two methods to integrate ReferralHero with Typeform:

  1. Use Typeform's 'Redirect to URL' feature

  2. Use Zapier to connect Typeform and ReferralHero

Method 1: Use Typeform's 'Redirect to URL' Feature

You will need a Typeform Plus account or higher to use the Redirect feature.

General user journey:

  1. Referral visits your website and gets cookied

  2. Referral visits your webpage with your Typeform embedded on it or your Typeform hosted site

  3. Referral completes Typeform and is redirected back to your website with their email in the URL parameter

  4. Call RH JavaScript on page load

Setting Up the Redirect URL in Typeform

‘Redirect to URL’ sends respondents to a single link of your choice after they click Submit on your Typeform.

  1. Create a Typeform page to accept the respondent's email address (or another unique identifier)

  2. Add a ‘Redirect to URL’ ending by clicking the + sign next to Endings in the left-hand sidebar of the Create panel

  1. In the settings of the redirect ending, follow these steps to add variable value captured from the ‘unique identifier’ page to the redirect link

i. Add your referral landing page URL in the following format to the Settings: https://mywebsite/myreferralprogram?email=

ii. Click the + sign in the Settings to add the variable value, i.e. the email from the ‘unique identifier’ page, to the end of the redirect URL

iii. Make sure the final redirect URL looks like the following example: https://mywebsite/myreferralprogram?email=subscriberemail@test.com

Adding RH JavaSscript to the Redirect Page

  1. Make sure you have added the ReferralHero Global Tracking script to the <head> tag of your website

  2. In addition, add one of the following scripts to the <head> tag of the Redirect URL page

Use RH.form.submit() to add both organic and track referrals to the referral campaign

<script>
window.onload = (event) => {
  let params = new URLSearchParams(document.location.search);
  var data = {
      email: params.get("email")
  };
  if (RH) {
    RH.form.submit(data);
  }
}
</script>

Use RH.pendingReferral() to track only referrals with ‘Pending’ status to the multi-step conversion event campaign

<script>
window.onload = (event) => {
  let params = new URLSearchParams(document.location.search);
  var data = {
      email: params.get("email"),
  };
  if (RH) {
     RH.pendingReferral(data);
  }
}
</script>

Use RH.trackReferral() to track referrals only on the redirect page

<script>
window.onload = (event) => {
  let params = new URLSearchParams(document.location.search);
  var email = params.get("email");
  if (RH) {
      RH.trackReferral(email);
  }
}
</script>

Use RH.organicTrackReferral() to track referrals OR add organic subscribers on the redirect page

<script>
window.onload = (event) => {
  let params = new URLSearchParams(document.location.search);
  var data = {
      email: params.get("email"),
  };
  if (RH) {
     RH.organicTrackReferral(data);
  }
}
</script>

Method 2: Use Zapier to Connect Typeform and ReferralHero

You will need a Typeform account and a Zapier account before you start.

Creating a Typeform

  1. Log in to your Typeform account

  2. Create a new Typeform that can accept at least two RH required fields: name and email address (turn on the setting ‘Required’)

  3. On the right side panel, go to Logic > Advanced > Hidden Fields

4. Add a Hidden Field then change the name of the hidden field from @hidden1 to @mwr, then click save.

5. Publish the Typeform

Embedding the Typeform

  1. In Typeform, go to the tab ‘Share’

  2. Choose the way you want your Typeform to be embedded in your web page

    • For example, go to ‘Standard’ if you want to present the Typeform as part of your website Click ‘Get the code’, then click ‘Copy code’

  3. Click ‘Get the code’, then click ‘Copy code’

4. Go to your web page, paste the code to where you want your Typeform to appear on the page

5. Add the following to the code between the data-tf-widget and data-tf-hidden parameters: data-tf-transitive-search-params="mwr"

Your code will be slightly different but this can be used as a reference:

<div data-tf-widget="kNf27gP8" data-tf-transitive-search-params="mwr" data-tf-hidden="mwr=xxxxx" style="width: 100%; height: 400px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

6. Save the code

Creating a Zap

  1. Log in to Zapier

  2. Create a new Zap

  3. Search for Typeform as the Trigger App

  4. The Trigger Event is ‘New Entry Triggers when a form is submitted’

5. Connect your Typeform account

6. Choose the Typeform form you set up in the previous step in the Set Up Trigger

7. Search for ReferralHero as the Action app

8. The Action Event is ‘Add Subscriber Adds a new subscriber to a list’

9. Connect to your ReferralHero account by entering the API Key

10. In the Set Up Action, the following five fields are mandatory fields

  • Campaign: your ReferralHero campaign

  • Email address: Typeform email

  • Referral URL: your default referral link address

  • Full name: Typeform name

  • Referrer: Mwr (hidden field)

11. Then Test & Continue

12. Turn on Zap

PreviousTwilioNextWebhooks

Last updated