Custom form

To use your own sign-up form you simply need to call ReferralHero's form.submit() method and send the user information such as email address and name.

var data = {
  name: "John Smith",
  email: "john@smith.com",
  extra_field: "+1 123456789",
  extra_field_2: USA",
  terms: true
};

RH.form.submit(data);

NOTE: "email" is required and can't be blank.
IMPORTANT: You must include the ReferralHero Tracking Code to the page for this to work. 

Below you can find an example of how to use ReferralHero with your own form.

Full example

Let's assume you're currently using a sign-up form like the one below:

<form action="#" method="POST" id="my-form">
  <input type="text" id="name" name="name" placeholder="Your name">
  <input type="email" id="email" name="email" placeholder="Your email">
  <input type="submit" value="Submit">
</form>

You could then send the sign-up data to ReferralHero like this:

<script type="text/javascript">
  document.getElementById("my-form").addEventListener("submit", function(e) {
    e.preventDefault();
    data = {
      name: document.getElementById("name").value,
      email: document.getElementById("email").value
    };

    RH.form.submit(data);
  });
</script>

After you submit the data you probably want to give people their referral link and display other useful information. Below we explain the different options you have.

Sharing screen in popup

If you have selected "Open sharing screen in popup" in your campaign settings (which is the default option), then the default sharing screen will automatically pop up. This option is perfect for those who want to use their own sign-up form but don't to spend too much time on the customization and are happy to use ReferralHero's default sharing screen.

Sharing screen inline

If you want to display the sharing screen inline, things are slightly more complicated because ReferralHero does not know where to display the sharing screen. Luckily you can tell ReferralHero where you want the sharing screen to appear using ReferralHero's Configuration file.

<script type="text/javascript">
  window.RHConfig = {
    defaults: {
      sharing_screen_container_id: "maitre-sharing" // The ID of the HTML container
    }
  }
</script>

Custom sharing screen

Alternatively, you can decide to create your own sharing screen and customize the whole experience.
Be aware that this approach will take considerably longer to implement (although it will give you greater flexibility).

To create your own sharing screen you must use the Success callback to completely override the default behaviour (which is to display the sharing screen).

To use a callback you must initialize the ReferralHero Configuration File BEFORE the ReferralHero Tracking Code. In our case we want to use the callback success, which is triggered after the form is submitted or  RH.form.submit() is called:

<script type="text/javascript">
  window.RHConfig = {
    callbacks: {
      success: function(response, data) {
        // Your custom logic
      }
    }
  }
</script>

<!-- start ReferralHero tracking code -->
  <script type="text/javascript"> ...</script>
<!-- end ReferralHero tracking code -->

As you can see the callback success has two parameters: "response" and "data".

"response" is a string that can have one of the following values:

  • "subscriber_created" (when the call creates a new subscriber)
  • "subscriber_retrieved" (when the call retrieves an existing subscribers)
  • "subscriber_not_verified" (when the call retrieves a subscriber who has not verified their email address)
  • "subscriber_not_found" (when the call returns 0 results)
  • "email_not_valid" (when the email submitted is not valid)
  • "error" (if there's has been an error).

"data" is a JSON object containing the data of the subscriber (unless "response" is error).

You can then use the subscriber's data (especially the "referral_link") to create your custom UI; for example, you can display a button to share on Twitter with a pre-composed tweet or store that information into your own database to send an email later.

You can see a working example of such implementation here: https://jsfiddle.net/6nca4572/5/

Still need help? Contact Us Contact Us