30 mins Setting up a referral system similar as the one you can see in Airbnb, Dropbox, Fiverr and use your existing user base to enlarge it.
In this video we are going to build a referral system, something similar to what you can see in Dropbox or Airbnb sites. You might have received an invitation from one of your friends, something similar to that link. Basically what they are doing is they give some credit to you and they give some credit to the friend that invite you.
And Dropbox has a similar strategy: they give you some more megas of storage in their application (and they will give also some extra gigas for your friend too) for those users that referred their platform. Referral programs are a way of taking advantage of their current user base in order to enlarge it. These two businesses take advantage of the fact that they have already your email address (the one you used to signup), so they can request access to your contacts stored in your own email client (Gmail, Hotmail, etc.)
If you check this example with Gmail for instance, there is one section within your email inbox that is called Contacts, it’s a bit hidden but it’s present in any account.
That section is like an archive of all of the email addresses that you have been in touch with in the past years. So those are the email addresses that Dropbox and Airbnb are looking for: You give them permission in order to access your email account, and they are going to send email to all of the people in your email account. That way you can invite them and you can earn some credit.
Our project in this video will be to build something similar to that. And the process is simple. If you want to see how does it look like, go check Dropbox referral site, just click in it, and invite your Gmail contacts from there.
They open a modal, a window where we have to select the account where we are going to give them access to. In this case I’m going to select my own email account.
And in this point, they will direct you back to their landing page. After this point, they start a backend process in order to load all of the Gmail contacts. So basically, they grab all of these contacts and they place them in this modal.
From here, you can determine who’s going to receive your invitation. If we want to invite to all of these contacts, we will scroll till the bottom and select all of them from there.
Airbnb referral site has the same flow. They open a modal, then they take you to Gmail and so on. This has been a really successful strategy… marketing strategy, in order to make these online businesses bigger. And even Dropbox in the past year, since something like 2014, 2015, they had a space race, something like a contest between universities, just in order to see who was the one earning more credits. So it can give you some ideas for your online business.
Fiverr has also a similar strategy, every time that you invite someone, you get 5 dollars back. In this case, I signed up with a Hotmail account, so that’s why they are just giving me the option to sync directly with my Hotmail account, not my Gmail contacts.
The hack we are going to build in this video is to create a referral system for petithacks. And we are going to do pretty similar to what we can see in the Dropbox page, like every time that someone refers, he brings a friend, we are going to give them something. We are going to give them, for instance, five exclusive hacks. We could use it maybe to provide a discount, we could use it for exclusive content, whatever.
So, this is going to be our main landing page. We have a button and we have a footer, and that’s all. The button right now makes nothing. It’s just a button telling them to invite their contact to Gmail.
The way that we are going to do it is with a tool that is called Cloudsponge. And if it is the first time that you heard about this guys, it’s a tool that allows you to sync your email to third-party email providers with LinkedIn, Outlook, Gmail, Yahoo, many of them. They give you a script that you can take advantage to get into your contact’s email addresses. Basically, they do the dirty work for you. They make it super easy to get into the email account, they make it a really smooth process.
It has a two weeks trial so for this project is more than enough. If it’s the first time that you are going to create an account in their site, you are going to see something similar to this, basically like an overview screen where they are telling you, “Okay, either add your snippet or send it to someone in your team that can add it for you.”
The installation process of the code, it’s pretty simple – it might be a bit more trick to set the integration with the Google contacts API but we are going to do it step by step.
Either you can copy just the code provided by Cloudsponge in the step 2 and 3, or you can just include the HTML classes within your own HTML.
At this point, we have all that they have asked us to configure. But if we try to import the contacts, it will indicate us that there is something here that is not complete yet. You would see something similar to this:
If we follow their instructions, they are indicating that we just have to configure our Developer credentials so we can access the Google Contatcs API. If you have never done it, it might look tricky. These are all the steps:
- Go to the Google APIs site and create your Google Developer account if you didn’t have one yet https://console.developers.google.com/apis
- Create a new project
- Search for Contacts API
- Enable the API
- If the Enable API button is already available:
- Click on it to use this API.
- Click on “Go to Credentials” button (or “Credentials” link at the left).
- At Step “1 – Find out what kind of credentials you need”, fill the questions with the following answers:
- Which API are you using: Contacts API.
- Where will you be calling the API from: Web server.
- What data will be you accessing: User data.
- Click on “What credentials do I need?” button.
- At Step “2 – Create an OAuth 2.0 client ID”:
- Fill Name with your app name.
- Fill Authorized redirect URIs with your Proxy URL.
- Click on Create client ID button.
- At Step “3 – Set up the OAuth 2.0 consent screen”:
- Check if email address is correct.
- Fill Product name shown to users with the app name that will be displayed to your users.
- Click on Continue button.
- At Step “4 – Download credentials”, click on “Done” button.
- Click over your app credentials in order to view details.
- Take note of your Client ID, Client secret.
- Sign in to your CloudSponge account and add a new Gmail OAuth Credentials.
- Enter the Client ID, Client secret and Redirect URI values from Google and click on Save button.
- Open your Account Settings page.
- Click the OAuth Credentials Settings button for the desired domain:
- For Gmail, select the newly inserted credential and click on Done button: