How to Add Referral Links to Your Page
Tags: javascript, react, webdev, startup
Published: 2019-10-16 19:00:07

Have you ever seen one of those links you get after signing up with Airbnb or riding with Uber that you can share and get credits or a VIP invitation to use a product? They're part of what is known as a referral campaign or invitation program, and they may look like this to a John Doe:

```

https://yourawesome.app/invite/johndoe

```

When John shares his unique link, for every user who converts (or signs up) through clicking it, John gets some kind of reward. Most often, the user he invites also gets it.


The main point of referrals is to create growth for your product. Some app uses an invitation-only tactic to drum up its VIP-ness (only those invited by current users will get access). The early [Product Hunt](https://www.producthunt.com/) and [Superhuman](https://superhuman.com/) used this tactic. Others have used it to gain more users and vendors. [Uber](https://uber.com) uses a referral program to acquire both riders and drivers alike.

![Uber referral code](https://web-tips.co.uk/wp-content/uploads/2018/02/uber-refferal-code-discount-invite-first-uber-ride.jpg)
<figcaption>Uber referral links allow friends to invite and gift each other with ride credits.</figcaption>

Since it is natural for people to trust an app or product a friend refers to, it is one of the most effective and organic ways to get traction. 

One less talked about but arguably very important benefit of a referral program is finding [early adopters or lighthouse customers](https://en.wikipedia.org/wiki/Early_adopter), a unique group of people who are vastly different from mainstream adopters who will play a central role in a product's early growth (or its demise). We call them the **Alphas**.


## Alphaseek.io
There are currently a few options to add the referral campaign workflow into your current signup, but they are infamously geared toward marketing and often scares developers and early-stage founders away.  [Alphaseek.io](https://jochasinga.github.io/alphaseek.io/) is the most developer-friendly, customizable cloud referral engine. It provides easy-to-use API endpoints to generate referral links and track users' referral scores as users start inviting others onboard. It's currently beta-launching and accepting signups [HERE](https://alphaseek.typeform.com/to/kBUVWb).


Alphaseek does exactly these:

- Create referral links for your users to share
- Track how users refer/invite friends to join/subscribe to your product.
- Keep track of a generic scores system that’s easy to integrate to your own reward system

## Getting started

Once you have retrieved your access token for your product from [Alphaseek.io](https://alphaseek.typeform.com/to/kBUVWb), you can start making calls to the API server.

Here is how you can send a request to our API in JavaScript:

### Creating a referring link

```javascript

// For example only, don't use this.
const accessToken = '1e6acc57-95f4-4928-997a-32f0571cc933'
const productId = 'awesomeapp-1234'

async function getAlphaseekUrlFor(userEmail) {
  const res = await fetch(`https://api.alphaseek.io/v0/${productId}/users`, {
    method: 'POST',
    headers: new Headers({
      'Authorization': 'Bearer ' + accessToken,
      'Content-Type': 'application/json'
    }),
    body: JSON.stringify({
      // Your user's email. This is required.
      email: userEmail,
      // Where you want the referral link to bring the referred user to.
      redirectTo: 'https://yourawesomeapp.com/signup',
    }),
  });

  res.then((res) {
    return res.json();
  }).catch((err) {
    log.error(err);
  });
}

```

If you’re using React, then you’ll likely place this function call in a method of the signup form component:

```javascript

class SignupForm extends React.Component {

  state = {
    email: '',
  };

  onFormSubmit() {

    // Save your user to your own database.

    // Call to get your user his/her referral link when
    // the signup form has been submitted.
    const data = getAlphaseekUrlfor(this.state.email);

    // You get a url like 'https://alphaseek.io/invite/32e0542'
    window.alert(`Thank you for signing up, here is your link to invite friends: ${data.url}`);
  }

  handleEmail = (e: any) => {
    this.setState({
      email: e.target.value,
    });
  }

  render() {
    return (
      <div>
        <form action="" onSubmit={this.onFormSubmit}>
          <input
            type="email"
            placeholder="Your email"
            onChange={this.handleEmail}
            value={this.state.email}
          />
        </form>
      </div>
    );
  }
}

```

### Getting user data

Of course we want to be able to query a user to see his/her referral data and how he/she is faring. Most alphas don't stop at signup. They advocate by sharing and sharing relentlessly. It is likely that you want to reward these users with something like a free coupon or free trial period. [Airtable](https://airtable.com/) offers $10 worth of credits for every user its alphas successfully convert.

To get an alpha’s data:

```javascript

async function getUser(userEmail) {
  const res = await fetch(`https://api.alphaseek.io/v0/${productId}/users/${userEmail}`, {
    method: 'GET',
    headers: new Headers({
      'Authorization': 'Bearer ' + accessToken,
      'Content-Type': 'application/json'
    }),
  });

  res.then((res) {
    return res.json();
  }).catch((err) {
    log.error(err);
  });
}

```

and here is the JSON response you will expect:

```json

{
  "data": {
    "user": {
      "email": "janedoe@gmail.com",
      "referredBy": "mikhaela@gmail.com",
      "referredTo": ["johndoe@gmail.com", "elonmusk@space.x"],
      "score": 2
    }
  }
}

```

You can also request users sorted based on points:

```javascript

async function getFirstTenUsers() {
  const res = await fetch(`https://api.alphaseek.io/v0/${productId}/users?page_size=10&desc=score`, {
    method: 'GET',
    headers: new Headers({
      'Authorization': 'Bearer ' + accessToken,
      'Content-Type': 'application/json'
    }),
  });
  res.then((res) {
    return res.json();
  }).catch((err) {
    log.error(err);
  });
}

```

## Announce your invitation campaign

This is where the fun begins as you start thinking about your offering strategy to provide incentives to alphas to cross the friction gap to sign up and use your product. It could be secretive invite-only beta access if you have a VIP product or some credit offering if you have a social product.

As a developer, it is sometimes tempting to write code for everything just because you can, but it is important to resist that urge and save your time to work on what's more important--your app.

You are building something to ship super fast with limited resources and help, every minute counts in building and iterating on what's core to your product. So [save time writing referral logic and reinventing the wheels](https://alphaseek.typeform.com/to/kBUVWb)!