fbpx

Bubble URL Parameters: Everything you need to know

Follow me:

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:

CleanShot 2021 06 21 at 19.47.53
The debug_mode=true key is used to show and hide Bubble’s built in debugger at the bottom of the screen.

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:

CleanShot 2021 06 21 at 19.01.20@2x
The type=page tells Bubble that you’re working on a page, the name=index is the name of the page, the id=example is the name of the app and the tabs=1 is the Design tab

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

CleanShot 2021 06 21 at 22.32.02@2x

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

Key

URL bar showing the keys in a URL parameter.

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

URL bar showing the values of URL parameter keys.

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.

How to send URL parameters in Bubble with the Go to Page action
Check the Send more parameters to the page box to add new keys to the URL parameter

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:

CleanShot 2021 06 21 at 23.11.26@2x

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:

image
In this example, we’re passing the Unique ID of the Current User to a URL parameter.

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:

URL bar with two keys in a URL parameter

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
CleanShot 2021 06 22 at 22.40.21
By setting User as the type, we let Bubble know what kind of data we’re looking for. With a valid Unique ID in the URL, Bubble will find the right User for us.

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

CleanShot 2021 06 22 at 22.50.53

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.

What are Bubble URL parameters?

URL parameters are a way to store and read data in the URL bar of your browser. URL parameters are separated from the regular URL by a question mark (?), and if you have more than one parameter each entry are separated by an ampersand (&).
You can read more about using them in our Bubble URL parameter guide.

What does “Get data from page URL” do?

The Get data from page URL operator let’s you read the value of a URL parameter in Bubble. It can be set up to read simple data like text and numbers, but you can also set it up to find records in your database (by referencing the Unique ID of that record) and Option Sets (by referencing the Display value of that set).

You can also use this feature to read the path of the current URL, such as www.myapp.com/page/path, and even to return the path as a list if you have multiple values after the page name.

What does “Send current page parameters” do?

The Send current page parameters option in Bubble makes sure that URL parameters are not lost when you use the Go to page action. If you use that action to pass a new parameter, Bubble will wipe any parameters currently present in the URL.

If you check this box, existing parameters will retain their value and the new parameter will simply be added to it.

Are URL parameters compatible with all browsers?

Yes, you can safely use URL parameters in Bubble without worrying about compatibility. Theoretically, the total length of a URL can become too long and lead to a 414 Request-URI Too Long error, but you would need to pass an (unrealistically) massive string for that to happen.

Can URL parameters be used for navigation in Bubble?

Yes, and there are several upsides to using URL parameters instead of custom states and actions. Most importantly, using URL parameters will allow your users to use the browsers back button to navigate. This guide shows you how to set up navigation with URL parameters in Bubble.

How do I pass a URL parameter?

Passing a URL parameter with the Go to Page action in Bubble.

The easiest way to set up URL parameters is by using the Go to page action and checking the box Send more parameters to the page. This will allow you to set up a key (the name of the parameter) and a value (the data you want to store in the URL). You can use this action on a page without reloading it, leading to an instant change in the URL.

You can also link to a URL that includes a URL parameter. Bubble will recognize this also.

How do I read URL parameters?

Reading URL parameters in Bubble using the Get Data from Page URL operator

You can access the content of URL parameters by using the Get data from page URL operator. In the parameter name input, you choose the key (name) you gave the parameter, and in the type dropdown you select what kind of data you are trying to read.

Database Things are identified with their Unique ID, and Option Sets by their Display field.

Support the site and keep it free ❤️

I love tech startups and the Bubble community, and have made it my mission to try and create content that’s valuable, easy to follow and entertaining.

Creating content next to full-time consulting work is time-consuming; if you’d like to support it and keep the site free for everyone, please consider buying me a coffee or becoming a supporting member.

Buy Me A Coffee

Follow me:
Bubble.io books

Learn Bubble the right way

Our professional Bubble books teach you how to plan, structure and build your applications right from the start.

5-star review stars

More Posts

Leave A Reply

Your email address will not be published. Required fields are marked *

*

Email icon

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

We don't share your email address with anyone, and you can unsubscribe at any time.

You have successfully subscribed