You are a Developer/Product Manager, and have just released a new feature, now you want to market it. You will be sending SMS/emails regarding your new feature. You have created tracking funnels to track user journey on your site. The only issue that you are facing right now is that there are too many clicks for the user to perform till they reach the targeted page (and this include the unavoidable login screens). You know the rule of thumb in the software industry, every click is a drop in user number. You want as many users as you can to reach the targeted page. How can you do this?
If the user is logged into the browser, then it will be quite simple for you to just redirect the user to the target screen and be done with it (Just one click and bingo!). But that is not always the case, in fact, most of the times (if you are not Google/Facebook), the user won’t be logged into the browser at all for your page. What can you do to solve such a problem?
Magic Links is one such solution to the above problem. Slack is doing it, and a lot of other startups as well. And if you are not doing it, you are missing out a huge chunk of consumers/users for your software products.
What exactly is a Magic Link?
Well, Magic Link is kind of an authenticated URL, which you send to the consumer in form of SMS/email that helps them to log in to the system with just one click of the link without any human interaction (no need for the user to enter username+password). It removes all the friction points of the user to dropout of the system.
Quite impressive, right? Yes it is, we at Practo used it and it has done wonders to us. The overall conversion rate of SMS/emails skyrocketed.
We used the same to make the user login to the system, creates their session, set their cookies, and redirects them to the targeted screen. All of this with one click of a URL (and no other human intervention).
But How does it work? How can you make such a system?
Well now you know what exactly is a magic link, and what it can do for you. But you don’t exactly know how does it work. In the upcoming sections, I will be explaining the logic and will be writing pseudo code to make you understand the inner workings of the same.
Step 1 : Create a magic link
We will call the function createMagicLink passing the mobile number of the user and the target screen URL. Refer the pseudo code to get the hang of the logic.
The user will get a shortened URL — https://bit.ly/2O2WQ0c, which will expand to “https://www.mysite.com/magic_link_signup?token=abcd1234”. The reason we have shortened the URL is to save characters in SMS.
Step 2: Handle the Magic Link when user clicks on it
In this step, you need to create an API endpoint “/magic_link_signup” in your application which will handle the link when user clicks on it.
In short, this API endpoint is performing the following -
- Get the query parameter token from the URL, this is the same $randomString which is generated in Step 1.
- Use this token to generate $maskedRandomString using the function generateMaskedRandomString defined in Step 1.
- Since this $maskedRandomString was stored in the DB under the table “magic_links”, we will search this table to get the info about the user to whom this token belongs to.
- We will get the mobile number from the magic link table for the corresponding $maskedRandomString.
- Use this mobile number to get the User’s info from your user accounts table of the database.
- With this user info, set the sessions and cookies for the user. The user is now logged into the system.
- Once the user is logged in the browser with session set, redirect the user to the target screen with $targetURL obtained from magic_links table.
VOILA!!! Mind = blown?
Yes, this was somewhat my reaction when I get to know about this technique! Just one click, and user reached the targeted screen of your choice! Seems like a fairy tale, hence the name “Magic Link”.
To sum it all up, its nothing but -
I have left a lot of intricacies out of the pseudo code, and that depends upon your implementation of the same. I have just written the core logic behind what we call today as Magic Links. This pseudo code might be having some security issues which will be taken care of once you start implementing in your own way. I have left that part to keep the post simple.
The conversion ratio that we have seen post this implementation is quite impressive and if only I could share the exact numbers with you. But you can figure this out from the fact that my Product Manager absolutely loves me now! These links have made our lives a lot easier.
In the end, I just want to end with a question -
What is Engineering?
According to Wikipedia -
Engineering is the creative application of science, mathematical methods, and empirical evidence to the innovation, design, construction, operation and maintenance of structures, machines, materials, devices, systems, processes, and organizations.
In my own words -
Engineering is nothing but finding solutions to the problems out there, its about helping people lead a better life, its about optimising solutions that already exist. Its about inventions, its about discoveries and then building on top of it, and for me Engineering is life :)
So the next time, you are faced with a problem, just give it a thought.
PS : I hope you like my article, correct me if I am wrong anywhere.