In this video, we'll teach you how to use IP address geolocation to detect your user's country and enhance your Bubble apps experience.

Install IP address plugin

To do this, we'll start by installing a plugin. I'm going to search for ip and we can see that there's a free plugin here available for retrieving. In fact, we'll use this one here. Get the ip address and country code, time zone, etc. So we add the plugin and then to access the data, we need to add an element to the page. And I'm just going to create a text field here to start to print the details from the plugin.

Add plugin element to page

So as with many plugins with Bubble, if they need to take an action within the page, you often need to add an element in order for the right code library to be installed. So I'm going to begin by going for country name and let's put one other piece of data in just so we can check that it's working. Let's go with currency and I'll click preview. Okay, I can confirm that that's correct. I'm in the United Kingdom and the currency here is the Great British Pound. So let's just enhance this a little bit and I'll demonstrate how this can be useful to you and your users. So we could approach this like having an input. So imagine this is part of a registration flow on a page. So we could, in here, this could be a country, and at the moment it's just a free input someone could type anything they like in there, but we could decide to pre-populate that based on the country name. So if I click on preview now, the initial content for the input is set to the country name that is retrieved from the IP address geolocation plugin. Now, let's do this a slightly different way. There's this resource I found with a quick Google for a list of countries to put in a drop down and so I'm just going to select all of them, copy. This way we're not allowing someone to enter a country that doesn't exist. And so in the choices I'm going to paste in all of the countries there as static choices and then default value I can again refer to to the plugin for geolocation country name and let's preview that.

So you can see it's automatically selected the correct country and I would advise if you're building a registration form if you need to to gather a user's country data or any form of geolocation to just be aware that using an IP address can be a bit rough. In my experience, unless they're using a VPN or some sort of privacy protection, which is becoming more common, the country is likely to be correct. But cities can be way off. I mean, here in the UK, I often see that my IP address is maybe 60, 100 miles away from where I actually am according to similar tools to this which use the IP address to generate a location. So we have a drop-down which automatically populates with the country. I'm going to show you one other thing which is to use an option set. So here we go, I've already got an option set in this demo app called currency and I'm going to add in another drop-down. Make it smaller this time. Just to demonstrate that we can do the same thing we've done with country, we can do it with currency. So I'm going to refer to my option set currency, choices are all of my currencies, and then display name. And I can stress the default value and I quite like this. Let me try. I don't think this is going to work because it's expecting an option set. No. So here we go.

This is the way you would do it. You would bring in all your option sets, all options and we now need to filter them so that Bubble picks out the right value based on the currency code that our plugin here provides. So I say "this currencies display is the plugins currency" and then it's the first item. So Let's try that. Okay, so once again, we can see that it's automatically picked out the Great British Pounds GBP because it is populating the initial value, the default value based on the currency code that the plugin provides. So there you have it. Those are some kind of advanced tricks that you can use an IP address geolocation plugin to do that can improve your registration flow, can gather key details such as country and currency for your users that allow you to greater personalize the experience of your users in your Bubble app.