Add a subscriber manually

To add a subscriber manually (for example if you want to use your own sign-up form) simply call ReferralHero's form.submit() function and send the user information such as email address and name.

var form = document.getElementById('form');
form.addEventListener("submit", function(e{
var data = {
name: form.querySelector('#name'),
email: form.querySelector('#email'),
extra_field: form.querySelector('#telephone'),
terms: true // Terms and conditions. Mandatory if your campaign requires the acceptance of T&C
};
if (RH) {
RH.form.submit(data);
}
})

IMPORTANT

email is required and can't be blank.

Sharing screen

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

ReferralHero Sharing screen in a 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.

ReferralHero Sharing screen inline

If you want to display the sharing screen inline, you must add a <div> to your page where you want the sharing screen to appear and give ReferralHero the ID of such div in the Configuration file.

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

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 in the Configuration File to override the default behaviour (which is to display the sharing screen).

<script type="text/javascript">
window.RHConfig = {
callbacks: {
success: function(output) {
// Your custom logic
}
}
}
</script>
<!-- start ReferralHero tracking code -->
<script type="text/javascript"> ...</script>
<!-- end ReferralHero tracking code -->

The success callback receives a parameter, which is an object with two properties: response and data.

Response can have the following values:

  • subscriber_created when a new subscriber is created

  • subscriber_retrieved when an existing subscribers is retrieved

  • subscriber_not_verified when an existing subscriber who has not verified their email address is retrieved

  • subscriber_not_found when no subscribers are found

  • email_not_valid when the email submitted is not valid

  • error if there's has been an error

Data ian object containing the subscriber's data (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 here: https://codepen.io/Manu66/pen/vYYozLG