Add a subscriber

There are multiple ways to add subscribers to ReferralHero and generate referral links. Below, we walk through two methods using our JavaScript Web API to add subscribers. You might want to use one of these functions if you prefer:

Web Signup Form:

• Integrate the add subscriber function into your own web signup form. This allows you to add subscribers or identify them at the time of form submission.

• This method is ideal for custom signup forms where you want to control the user experience and capture subscriber information seamlessly.

Web Login Page:

• Incorporate the add subscriber function into your web login page to add or identify subscribers during the login process.

• This approach is useful if you want to track users as they log in while also adding them to your referral program automatically.

Note: When you add a subscriber using our JavaScript Web API, you’re leveraging our powerful global tracking script and cookie system.

This means that the default referral link doesn't need to direct potential subscribers to a specific page URL containing the 'add a subscriber' function. Instead, our global tracking script automatically cookies and tracks each user as they visit and browse your website. When a visitor interacts with your form or page containing the 'add a subscriber' function, they will seamlessly convert into an "active subscriber."

Adding a Subscriber (Organic, Pending, or Confirmed)

RH_MFxxxxxxxxxx.form.submit(uniqueIdentifier);

When adding a subscriber to your ReferralHero campaign, you can track different conversion events based on your campaign goals. This guide explains how to use the above function to add subscribers, whether they are Organic, Pending, or Confirmed.

GOAL: One Conversion Event

• Referral: If the user is referred, a referral will be automatically created and set to Confirmed in the appropriate campaign.

• Non-referral: An organic subscriber will be created in the specified campaign UUID.

• Existing Subscriber: If the subscriber already exists in our database, they will be "identified." Existing data will not be overwritten, but additional data will be added.

GOAL: Two or Three Conversion Events

• Referral: If the user is referred, a referral will be created and set to Pending in the appropriate campaign.

• Non-referral: An organic subscriber will be created in the specified campaign UUID.

• Existing Subscriber: If the subscriber already exists in our database, they will be "identified." Existing data will not be overwritten.

Using the RH_MFxxxxxxxxxx.form.submit() Function

To add a subscriber according to the above logic, use the RH_MFxxxxxxxxxx.form.submit() function and pass the user information such as email address, name, etc.

Here's an example of how to implement this in your form:

IMPORTANT

• Replace 'MFxxxxxxxxxx' with your specific campaign UUID.

• The fields '#email', '#phone_number', '#crypto_wallet_address', or any other unique identifiers enabled in your campaign are required and must not be left blank.

• The ReferralHero Dashboard, Signup Widget, Floating Widget, or JavaScript API (RH_MFxxxxxxxxxx.form.submit()) should only be included once per webpage. Do not include multiple instances of these elements on the same page.

JavaScript

<script>
var form = document.getElementById('form');

form.addEventListener("submit", function(e) {
    e.preventDefault(); // Prevent the default form submission

    var data = {
        name: form.querySelector('#name').value, // Optional value but recommended
        email: form.querySelector('#email').value, // Required value as unique identifier
        phone_number: form.querySelector('#phone_number').value, // Required if used as unique identifier
        crypto_wallet_address: form.querySelector('#crypto_wallet_address').value, // Required if used as unique identifier
        other_identifier_value: form.querySelector('#other_identifier').value,// Required if used as unique identifier
        extra_field: form.querySelector('#country').value // Optional value
    };

    if (RH_MFxxxxxxxxxx) {
        RH_MFxxxxxxxxxx.form.submit(data);
    }
});
</script>

Web From

<form id="form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="phone_number">Phone Number:</label>
  <input type="tel" id="phone_number" name="phone_number">

  <label for="crypto_wallet_address">Crypto Wallet Address:</label>
  <input type="text" id="crypto_wallet_address" name="crypto_wallet_address">
  
  <label for="other_identifier">Other Unique identifier:</label>
  <input type="text" id="other_identifier" name="other_identifier">

  <label for="country">Country:</label>
  <input type="text" id="country" name="country">

  <button type="submit">Submit</button>
</form>

Now, if a referral link is not used, the system will create an Organic Subscriber. However, if a referral link is used, the system will first evaluate the conversion events:

• For a campaign with one conversion event, a referral will be created and set to Confirmed upon completion of the event.

Subscriber 2 ( without referral code ) , Referrer 2 ( used subscriber 2 referral code )

• For campaigns with two or three conversion events, a referral will be created and set to Pending until the additional events are completed.

Subscriber 1 ( without referral code ) , Referrer 1 ( used subscriber 1 referral code )

Example: Add a Subscriber (Custom Unique Identifier - Crypto Wallet Address)

If you are utilizing the ReferralHero Blockchain integration, you must also include the #crypto_wallet_provider in your data. To add a subscriber using their crypto wallet address, use the RH_MFxxxxxxxxxx.form.submit() function. This approach is especially useful when integrating with a custom 'wallet connect' system, enabling efficient management and tracking of participants based on their wallet information.

By providing both the wallet address and provider details, you can seamlessly integrate and track subscribers within your referral program.

JavaScript

<script>
  var form = document.getElementById('form');

  form.addEventListener("submit", function(e) {

    var data = {
      crypto_wallet_address: form.querySelector('#crypto_wallet_address').value, // Required
      crypto_wallet_provider: form.querySelector('#crypto_wallet_provider').value // Required
    };

    if (RH_MFxxxxxxxxxx) {    // Replace 'MFxxxxxxxxxx' with your campaign UUID
      RH_MFxxxxxxxxxx.form.submit(data);
    }
  });
</script>

Web Form

<form id="form">
  <label for="crypto_wallet_address">Crypto Wallet Address:</label>
  <input type="text" id="crypto_wallet_address" name="crypto_wallet_address" required>

  <label for="crypto_wallet_provider">Crypto Wallet Provider:</label>
  <input type="text" id="crypto_wallet_provider" name="crypto_wallet_provider" required>

  <button type="submit">Submit</button>
</form>

Important:

If you are using the ReferralHero Blockchain integration, you must include the #crypto_wallet_provider in the following format:

• metamask

• phantom

• coinbase

• ledger

• exodus

• trezor

• myetherwallet

• jaxx

• guarda

• trustwallet

If you need to include additional wallet providers, please email us at [e-mail].

Running Multiple Campaigns

Imagine you are running an e-commerce platform and need to direct new customers and returning customers to different referral campaigns. Follow these steps to set up your ReferralHero integration:

1. Install the Global Tracking Script Ensure that the ReferralHero Global Tracking Script is added to the <header> section of your website. This will enable tracking across all pages.

2. Define Campaigns Identify the campaign UUIDs for new customers and returning customers.

3. Submit Subscriber Information

   • For New Customers: Use the following function to add new customers to the specified campaign:

     Copy

     RH_MFxxxxxxxxxx.form.submit();    // Campaign 1

   • For Returning Customers: Use this function to track returning customers and ensure they are placed in the appropriate campaign:

     Copy

     RH_MFxxxxxxxxxx.form.submit();    // Campaign 2

   Note: Replace MFxxxxxxxxxx with your actual campaign UUIDs.