Web apps don't have to be boring. You can make them more personalised and more friendly by adding a greeting to your SaaS app that you're building a Bubble, such as "Good morning first name", "Good afternoon first name" or even "Good evening first name".

Learn Bubble

I'm going to show you how to do that in this Bubble tutorial. But before I get started, did you know that we've got hundreds of Bubble tutorial videos? You can find them on our YouTube channel, like and subscribe for more, but you can also find many more that you cannot find on YouTube on our website at planetnocode.com. So head over there if you're learning Bubble and you're a beginner to advanced, it's all there, hundreds of Bubble tutorial videos.

Current User's First Name

Right, let's dive into this and start making it dynamic, because at the moment it's always going to say "Good morning" and it's always going to say "Matt". So first of all, we just need to decide on like a default, and so I will say the default is going to be "Good morning", and I'll say in order to add in the name, I'll go "Current user first name because when I signed the user up I got them to enter their first name. So I'm going to click preview and we should see that that updates. Good morning Matt, brilliant.

Conditional statements using Current Date/Time

And now we need to add in conditional statements based on what time of day it is to make the greeting much more personalized. So I will say 'when current date time extract hour is equal to or greater than 12', and then I would change the text and I will say 'good afternoon and insert the current user first name again. We've got other tutorials about current date time, about date and time pickers, and about time zones. Whenever you refer to current date time, on the technical side it's using a Unix timestamp. That's like a universal way across the internet that websites measure time. Yeah, so there's no confusion between time zones. But when Bubble renders it to your users, when you preview it, it's going to show you time based on the time zone that the user's web browser declares that they're from. So it's always going to be relevant to your user unless of course they're using some sort of plug-in, perhaps a VPN, although I still think the browser is going to give a particular time zone. Anyway, that's what's going on here and I can preview what happens with the conditional statement if it's true by clicking there and I can see that it swaps to good afternoon.

Now I need to add in another one. In fact, I will copy the statement here and I'll say equal to or greater than, not five, because it's 24 hour clock, it'll be 17. So 5 p.m. and I'll say good evening and then add in the current user first name. Okay, we've got some other videos too about conditional statements but I'm going to recap it here which is I don't need to say extract hour is equal to or greater than 17 but yeah I don't need to account for both because there is an order of operation with conditional statements and I can preview that by using the toggle here.

So if it is after 12, then I'm gonna get afternoon, but if it is also after 17, I will get good evening, okay, because the hierarchy kind of goes down. So my later statement, my lower down statement, takes precedent over the higher statement, as you can see there. So there you go, that's how you can add in a more personalized greeting. You can add a good morning, a good afternoon, and a good evening message to your users, including their first name of your user.