How to use URL parameters in Bubble.io

Database Aug 03, 2020

If you want to send data between pages in Bubble, you can either set the 'Type of content' of the page, or you can use URL parameters to send information. It is a common method to send information between not only pages but also for same page navigation.

It is advisable to use URL parameters over custom states. More on this below.

To keep it simple, we'll focus only on sending data between pages.

Workflow structure

Let's say that you want to send an input's value and a dropdown's value to some other page.

How to send URL parameters

I created the two input elements on a page and a button to trigger the navigation workflow. In the workflow, apart from specifying the page, we need to check the 'Send more parameters to the page' checkbox. When you check the box, you'll be asked the 'key' and 'value'.

'q' and 'q2' are the keys or the identifier of the parameters and the keys should be unique. We can keep the value dynamic but the identifier should be unique.

How to read URL parameters

Now to read the URL parameters, I've created a text element. You don't need to create a text element to read the URL parameters as they can be used wherever you can enter dynamic text.

When you're entering dynamic text, scroll down to the bottom to find 'Get data from URL'. Selecting the option will open another box where you need to define the key of the URL parameter.

As I had mentioned the key of the URL parameter as 'q', I am telling Bubble to find and display the value associated with q. You also need to define that the data type of the parameter. A text will work for most of the cases.

To see the editor and demo of this, you can see the implementation here.

Editor - https://bubble.io/page?type=page&name=param&id=nocodeassistant-tutorials&tab=tabs-1

How else can you use URL parameters?

You can them for all sorts of things. Let's say that you have a marketplace and you the user enters their query, location and category on one page. You want to structure your site in a way to display the results on a different page. There is no other way to send this information to the next page without using URL parameters.

On the second page, you can filter your repeating group using data from URL. For example, in the constraints the location constraint will be Location = Get data from URL.  

Another way you can use it is in a dashboard. You want to hide and unhide groups. So, you can navigate to the same page you're at and send URL parameters. And to hide/unhide the groups, you can tell Bubble to display the groups based on the data from URL.

The biggest benefit of using URL parameters over custom states is that the user can use their browser's back button which is not possible with custom states. URL parameters will enable your users to share their URL and Bubble will open will show the correct data/group.


I hope you understood and found it easy to replicate. You can also send the data as a path but I'll write another tutorial for that later.


If you need some help with your Bubble app, hit me up at [email protected] or follow me on Twitter

Tags