Adding personalized greetings to your Bubble app

Personalizing Your Bubble App with Dynamic Greetings

Web apps don't have to be boring. You can make them more personalized and more friendly by adding a greeting to your SaaS app that you're building with Bubble, such as "Good morning, first name, good afternoon, first name, or even good evening, first name." 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 advance, it's all there. Hundreds of Bubble tutorial videos.

Setting Up the Dynamic Greeting

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 "Matte". 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.

Adding Conditional Statements for Time-Based Greetings

And now we need to add in conditional statements based on whether... well, 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.

Understanding Time Zones in Bubble

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 so there's no confusion between time zones. But when Bubble renders it to your users and 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.

Implementing the Afternoon and Evening Greetings

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 5pm and I'll say "Good evening" and then add in the current user first name.

Understanding Conditional Statement Hierarchy

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 going to 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.

Conclusion: Personalized Greetings in Your Bubble App

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.