Setting Up Magic Links in Bubble
In this Bubble tutorial video, I'm going to take inspiration from this blog post which describes how you can reduce friction with email confirmations. And in this case we're actually going to be using magic links in Bubble to do so. But it's describing a way in which when you take a user's email address, you can then present them with a button that opens them up in the right email client. So let's dive into the Bubble app that I've got built here and I'm going to put the finishing touches to my magic link login. So I've just got a page here and all I've done is added an input with a button and then that's all grouped together and I've called that step one.
Setting Up the Basic Structure
And then this is all grouped together and I'm going to call this step two. So let's put the basics of a magic link in place. But before I do that, you're watching this video because you've got an idea and you're wanting to build it with Bubble. And if you want to accelerate that process and get access to hundreds and hundreds of resources, click the link down in the description to join our community over on planetnoco.com dot. But let's set this up with magic link.
Creating the Magic Link Workflow
So I'm going to add in a workflow and say that this user send email login, magic link, match this up with my login email. I'm going to say that it lasts for an hour. I'm going to just navigate them. This is a demo app, but you send them to your dashboard page, one of your logged in pages, send them back to index. If it fails, that's all good, but I also need to move them on from step one to step two.
Configuring Visibility Settings
So first thing I'm going to do is on step two, say that this is not visible on page load because I want to only to be visible. If I say show step two, I also want it to be collapsed when hidden. That just means that when it isn't visible, it doesn't take up any space on the page. So on step one I'm going to do the same thing, say collapse when hidden. Because I don't want step two to appear below step one.
Refining the Workflow
I want it to appear in place of step one. So we'll go back into the workflow, edit workflow. And you could do this with custom states, I think. Indeed, if you have multiple steps and you would kind of go through step one, step two, step three, maybe multiple steps to a login, you could use custom states and then conditional statements on each element to say if it's still step two in your custom state, move along. But we'll keep things really simple here.
Implementing Step Transitions
We're just going to show, we'll hide first, we'll hide step one and then we will show step two. Okay, so that's going to send the email, hide step one, show step two. Now here's where I'll just show you what this looks like.
Transactional Email Providers
And remember, if you want to do this well and with good nicely styled emails, you'll probably want to set up a different transactional email provider to Sendgrid. We recommend postmark, but loops is also really good. So yeah, you then see the email address here. But the next thing we want to do is to show people the right button. But let's first set the buttons up.
Setting Up Email Client Buttons
So if opening Gmail is clicked, what we'll do is say here and we will navigate to an external website, probably open a new tab. Just if it goes wrong they can come back to this page and then the destination, I believe it's probably going to be somewhere HTTPs mail dot google.com obviously I should have double checked this. In fact the blog post here has got it written down. Yeah, mail dot google.com. dot mail dot google.com.
Extracting Email Domains in Bubble
okay, and then for the other one, which is outlook, we can say external, open external website and I'm not 100% sure on this one, so I'm just going to say www.outlook.com. okay, now did you know that Bubble actually has a built in way of extracting different parts of an email address? And I'm going to demonstrate that by placing in a text element. And then I'm going to get the data from email value and then formatted as I think this is the right one. No, no, no, it's not formatted as it is going to be.
Understanding Email Components
Extract, yeah, yeah, there we go. Data type email. And so I can say domain, top domain or alias. So the alias is the bit that appears before the act. So for our website, for example, that could be testing at no code.com and it would be testing is the alias.
Demonstrating Email Domain Extraction
You've then got your domain and you've got your top domain. And I think it's easiest to illustrate the difference here. So if I go with domain first and then we refresh this page.
Handling Different Email Formats
So if I say test on itnocode.com, okay, it extracts planetnocode.com as the domain. But if we were sending from a subdomain, say mail, that would be mail at that noco.com so domain is taking everything that is after the sign. If I just want to take the root domain I would say top domain.
Setting Up Conditional Display for Buttons
And this is basically going to be good enough for your standard like outlook Gmail hotmail addresses. So here we go. We would say test at planet at mail dot planetnocode.com and it should extract just planet no code. And then if we get rid of the subdomain it's still just planet no code. So the let's now set up some conditional display settings on these buttons.
Configuring Button Visibility
So I think the easiest way to do this is to say that both of them are collapsed when hidden and not visible on page load. Because for one thing we only want to show them if it is helpful. So on Gmail we will add in a condition and say when input emails value extract domain we can just say is I think, yeah@gmail.com.
Handling Multiple Email Domains
then we'd say it's visible. Now I'm going to copy and paste this, but Outlook is going to have a series of other conditions because actually this is a very google thing of starting up new services and shutting them down. But actually Gmail has been consistent. So you could have outlook.com and then what we can do is just copy this and so we could say@hotmail.com and you could do, you know, there's Live.com comma, there's all sorts of other email domains that are used. But I, yeah, so what we're saying here is that if the input contains this value we will show either of these buttons.
Testing the Magic Link Functionality
So let's run this through as a little test. Probably just going to use a fake email.
Final Demonstration
So let's try test@hotmail.com and there we go, we've got outlook and if we were to click on that it would take us straight into outlook and you'd see my inbox. So there you have it. That's how you can really enhance your magic links in Bubble.