Getting Started

React Native API Integration

Overview

The ReferralHero API is organized around REST. Our API has predictable, resource-oriented URLs. JSON is returned by all API responses, including errors.

Base URL

Calls for ReferralHero API are relative to the URL

For Staging:

https://dev.referralhero.com/api/sdk/v1/

For Production:

https://app.referralhero.com/api/sdk/v1/

Request Headers

1. Authorization - Your access token

2. Accept - application/vnd.referralhero.v1

3. Content-Type - application/json

To summarize, your request headers should look like this

{ 

   'Content-Type': 'application/json',
   'Accept': 'application/vnd.referralhero.v1',
   'Authorization': 'xxxxxxxxxx'

 }

Getting started

Step 1: Set Up Your Project

1. Open your React Native project.

2. Install a library for making HTTP requests, such as axios or use the built-in fetch API.

Step 2: Make Your First API Call

1. Import your HTTP library:

import axios from 'axios';

1. Set up your API call:

const apiUrl = 'https://app.referralhero.com/api/sdk/v1/';
const apiToken = 'Your-api-token';

axios.get(`${apiUrl}endpoint`, {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/vnd.referralhero.v1',
    'Authorization': apiToken
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error making API call', error);
});

Step 3:

1. Get your API_TOKEN from the ReferralHero Dashboard -> API: ReferralHero Dashboard.

1. Back in the ReferralHero overview, click to edit your desired Campaign.

1. Then the Installation tab, then Mobile App Installation.

1. Get your UUID: The 12-letter ID that starts with ‘MF’ in Edit Campaign > launch > Mobile app installation, e.g. MF15298bba6d.

1. Add the Campaign Token obtained from the campaign, and UUID from the installation Tab.

Step 4:

In the Goal section of your Campaign settings, ensure you have added the Google Play and Apple App Store links and a default referral link for desktop web users.

Well done! You should now be able to build and run your campaign. Before using the more advanced features of the API, you should learn about a couple of important concepts.

Tracking Referrals

Now that you have implemented the SDK, you can start identifying and tracking referrals!

For that, you will need 2 things:

1. Universal Link

2. Your Integrated App

The RH SDK Pulls information from your Device, like this:

final referralParams = {
  'email': '[e-mail]', // Capture this from user
  'domain': 'https://a.domain.co/', // Optional value, and set as default by admin
  'name': 'User Name', // Capture this from user
  'referrer': 'referrerCode', // Optional value, only necessary if you want to capture the referrer code from user
  'uuid': 'MFcd4113d4bf', // Get this from RH Dashboard
  'device': getDeviceType(), // Get device type
  'ip_address': await getIpAddress(), // Get IP address
  'os_type': getOperatingSystem(), // Get operating system type
  'screen_size': transformResolution(getDeviceScreenSize()), // Get screen size
  'status': 'custom_event_pending' //Use 'custom_event_pending' to set the referral status to pending
};

Helper Functions

Get Device Type

You can use the react-native-device-info library to get the device type.

import DeviceInfo from 'react-native-device-info';

function getDeviceType() {
  return DeviceInfo.getDeviceType(); // Returns 'Handset', 'Tablet', 'Tv', etc.
}

Get IP Address

You can use the react-native-network-info library to get the IP address.

import { NetworkInfo } from 'react-native-network-info';

async function getIpAddress() {
  return await NetworkInfo.getIPAddress(); // Returns the IP address as a string
}

Get Operating System

You can use the Platform module from React Native to get the operating system type.

import { Platform } from 'react-native';

function getOperatingSystem() {
  return Platform.OS; // Returns 'ios' or 'android'
}

Get Device Screen Size

You can use the Dimensions module from React Native to get the screen size.

import { Dimensions } from 'react-native';

function getDeviceScreenSize() {
  const { width, height } = Dimensions.get('window');
  return `${width} * ${height}`;
}

Transform Screen Resolution

The format for screen sizes is not native to RH, and the format should be parsed to RH accepted, such as:

function transformResolution(input) {
  const dimensions = input.split('*').map(e => e.trim());
  return `${dimensions[0]} x ${dimensions[1]}`;
}

Adding the Subscriber Data

With this information, you should be able to add the subscriber data using the addSubscriber method to automatically identify or track a referral:

function formSubmit() {
  axios.post(`${apiUrl}addSubscriber`, referralParams, {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/vnd.referralhero.v1',
      'Authorization': apiToken
    }
  })
  .then(response => {
    console.log('Subscriber added successfully:', response.data);
  })
  .catch(error => {
    console.error('Error adding subscriber', error);
  });
}