In this Bubble tutorial video, I'm going to show you how to add a timezone dropdown to a registration flow. And this can be very useful if anything in your app requires you to, say, hard, like coding, a timezone for a user.

Becoming a Planet No Code Member

But before we get started, did you know you can be a Planet No Code member? That we've got over a hundred Bubble tutorial videos. Many of them are member exclusive. They can only be found on our website. And if you like videos like this, it just helps our cause if you can like and subscribe.

Using the Timezone API

So let's jump into a timezone API. And for that, I'm going to be using the API provided by timezonedb.com. And so the endpoint is here. I'm going to copy that. I'm going to go into my plugins. And add a new API, name this timeZone DB. The authentication is a private key in the URL, and I'm going to use a get call and say, get list of timezones. And then I'm going to go and get my API key, paste it into the key value box.

Retrieving Timezone Data

Right, I think I can test it now. Oh, invalid API key. I think that's because they want key is the parameter name. Let's change that to key. Return to non object and you pick JSON. Okay, I think that is because if I look at the documentation here, I should say format equals json in the URL. So let's do that. We could probably just add it as a parameter. Let's try that. Format json. Cool, here we go.

Working with Timezone Data

So we get all of this timezone data back, tons of data. And one of the advantages of using the API call is that we don't just get the zone name. And that's what I mean by this part here. And that's what is essential for feeding back into dynamic timezone positions in Bubble. If you've gone into settings general and you've enabled timezone overrides, that's the label for the timezone that you'll need. But it also provides you with all of these GMT offsets. So that can be again, helpful for doing calculations of converting different timezones for your users. But do remember that if countries have got daylight savings, or the hours, it shifts by an hour here or there, then the GMT offset is going to change depending on the time of year that you save it from this API call.

Implementing the Timezone Dropdown

But anyway, it's still very useful. And so we can now go in noticing that use ad is data, and we can go into the design one, we can say dynamic choices, and we can say get list of timezone. And then we get data from external API. List of timezones. I think we need to have timezone, timezone, zones. Yes, there we go. Current options, zone name. Then if I click on this preview, and now I get my list of timezones that I can pick.

Enhancing the Timezone Dropdown

And again, the advantage of using the API is that we can not only save the zone name, but I can then take data out, the extra data that the API provides. So I can say dropdown timezones value GMC offset. So then if I go back here and I choose Fiji, that tells me the GMT offset of Fiji. So there you have it. That is a very quick way of using a excellent API to get a list of timezones, which can be very helpful for adding in a timezone dropdown picker to the registration flow of your Bubble app.