As you’re learning to use Bubble, you’re gonna come across URL parameters. What are URL parameters, and how can you set up URL parameters in Bubble?

In essence, URL parameters let you store and retrieve information from the URL bar in your browser. Just like a custom state, you can save text, integers (numbers) and any kind of Bubble data type directly in the URL, and this brings up a lot of interesting use cases.

What URL parameters look like

URL parameters follow a set pattern that you can easily whether they’re used in Bubble or another page/app. Once you know it, you’ll start recognizing it in all apps you use. In fact, you can already recognize one from Bubble:

If you have a look at the editor, you’ll also see that Bubble uses URL parameters there to tell the editor what to show on the screen:

How URL parameters are structured

URL parameters are separated from the page URL with a question mark (?). Each separate entry after the first one is separated by an ampersand (&).

URL Parameter

Each URL parameter consists of a key and a value. In the example above, we have four parameters.

Key

The key is the name of the entry you are storing. In the example above, Bubble uses four different keys to identify them. They keys need to be uniquely named to work as expected.

Value

The value is the content of the key, and is separated from the key with an equal sign (=).

Setting up URL parameters in Bubble

To pass a URL parameter to the browser, you can use the Go to page action. If you’re going to the same page as you’re currently on, the URL will update without having to reload the page, making the change available immediately.

Whenever you use the Go To Page action, all existing URL parameters will be wiped, so make sure to check Send current page parameters if you want to maintain them. Keep in mind also that Bubble counts any Go to Page action as a new page load, so any Page load workflows you have set up will trigger – even if you’re staying on the same page.

The example above would make your URL look like this:

Great! So we’ve now passed a simple text value to our URL. But what other kinds of data can you use? You can actually reference most kinds of things in a URL parameter, but you sometimes need to know which field to pass to the URL for Bubble to recognize it. Let’s look at some examples:

Passing database Things in the URL

Database Things are referenced by their Unique ID. From a database perspective, this is the database record’s primary key – it’s a unique string of text that guarantees we’re looking at the correct entry. To pass a Thing to the URL, simple pass that Things Unique ID as the value. You can name the key whatever you want:

Passing Option Sets in the URL

Option Sets behave a bit differently from the database, since they are stored as JSON. Option Sets only have one built-in field: the Display field. This is the field we’ll be referencing. Set up a Go to Page action and set the Option Set’s Display as the value.

Remember that the Display field needs to be unique to return the expected results. Unlike with the Unique ID’s in the database, Bubble doesn’t force you to set unique values.

Reading URL Parameters

Reading a text value

In the first URL Parameter, we passed a parameter with the key navigation and value users:

Next, let’s use this parameter in a condition to show a group.

1. Select the group that you want to show when this parameter is present
2. Click on the Conditions tab
3. Add a new condition and enter the Get data from page URL into the expression builder
4. Set the Parameter name to navigation and leave the type as text
5. Finish the expression by typing in users

Reading a database Thing or Option Set value

As we’ve explored, database Things (like Users) are identified by their Unique ID. But we also need to make a key change in our expression to let Bubble know what kind of thing we’re looking for. This time, let’s set up a group to get its Data Source from the URL:

1. Select the group you want to load the User into
2. Make sure you set its data type to User
3. As the data source, use the Get data from page URL
4. Set the Parameter name to user, and change the Type to User

To do the same thing with an Option Set simply switch the Type:

As you can see, URL Parameters are an incredibly flexible feature that doesn’t just store text, but all kinds of data.

You can also check out or other Basic Bubble tutorials.

Bubble URL Parameter FAQ

This section contains frequently asked questions about URL Parameters. If you have questions or comment, do let us know in the comment section below.