Custom parameters in Bubble let you pass data between pages and workflows using URL parameters and custom states. URL parameters persist in the browser address bar and survive page reloads, while custom states are temporary client-side variables that reset on refresh. This tutorial covers setting up both types, reading them in workflows, and choosing the right one for each use case.
Overview: Setting Up Custom Parameters in Bubble
This tutorial explains the two main ways to pass data in Bubble: URL parameters and custom states. You will learn when to use each, how to set and read them in workflows, and how to combine them for complex page interactions.
Prerequisites
- A Bubble app with at least two pages
- Basic familiarity with Bubble workflows and dynamic data
- Understanding of the Property Editor in the Bubble visual editor
Step-by-step guide
Set up URL parameters for persistent data passing
Set up URL parameters for persistent data passing
URL parameters appear in the browser address bar (e.g., yourapp.com/page?tab=settings&id=123). To read a URL parameter, use the 'Get data from page URL' data source and select the parameter name. Parameters support text, number, date, yes/no, and data type references (passed as Unique IDs). To set URL parameters when navigating, use the Go to page action with 'Send more parameters to the page' checked, then add key-value pairs. You can also construct URLs directly with parameters appended as query strings.
Pro tip: URL parameters are visible to users and can be bookmarked. Use them for filters, tabs, and shareable states. Never put sensitive data in URL parameters.
Expected result: You can pass and read URL parameters between pages, with values visible in the address bar.
Create custom states for temporary page data
Create custom states for temporary page data
Custom states are variables attached to any element (including the page itself). To create one, click the element, go to the Inspector (i icon), and click Add a new custom state. Name it, choose the data type (text, number, yes/no, or any Data Type), and optionally check 'This state is a list.' Set the state value using the 'Set state of an element' workflow action. Read it anywhere on the page using [Element name]'s [state name]. Custom states reset to empty when the page reloads.
Expected result: You have custom states on page elements that store temporary data accessible by any element or workflow on the page.
Use URL parameters for tabbed interfaces and filters
Use URL parameters for tabbed interfaces and filters
A common use case for URL parameters is a tabbed interface. Add a URL parameter called 'tab' that defaults to 'general'. Create groups for each tab (General, Settings, Billing) with visibility conditions: when Get data from page URL parameter 'tab' is 'general', 'settings', or 'billing'. Navigation tabs change the parameter using Go to page (same page) with the new tab value. This way, users can bookmark specific tabs and use the browser back button to navigate between tabs.
Expected result: Tabs are driven by URL parameters, supporting bookmarking and browser back button navigation.
Use custom states for interactive UI components
Use custom states for interactive UI components
Custom states work well for transient UI states like dropdown menus, modal visibility, selected items, and form step tracking. For a multi-step form, create a custom state called 'current_step' (number, default 1) on the page. Each form step group is visible when current_step equals its step number. Next and Previous buttons increment or decrement the state. For a selected item in a list, create a state called 'selected_item' (type: your Data Type). Clicking a Repeating Group cell sets this state, and a detail panel shows the selected item's data.
Expected result: Interactive UI components like multi-step forms and selection panels work using custom states.
Choose between URL parameters and custom states
Choose between URL parameters and custom states
Use URL parameters when: the state should survive page reloads, users should be able to bookmark or share the state, you need to pass data between pages, or the state should be part of the browsable history (back button). Use custom states when: the state is temporary (selected item, open dropdown), the data is sensitive and should not appear in the URL, you need to store complex data types or lists, or the state only matters for the current page session. You can combine both: use a URL parameter for the main page state (which tab) and custom states for transient interactions within that tab.
Expected result: You can confidently choose the right parameter type for each use case in your app.
Complete working example
1CUSTOM PARAMETERS REFERENCE2============================34URL PARAMETERS:5 Reading:6 Get data from page URL → parameter name7 Setting:8 Go to page action → Send more parameters:9 key: 'tab', value: 'settings'10 Result URL: yourapp.com/page?tab=settings11 Types: text, number, date, yes/no, Data Type (as Unique ID)12 Persistence: Survives reload, visible in URL1314CUSTOM STATES:15 Creating:16 Element → Inspector (i) → Add a new custom state17 Name: 'selected_item', Type: Product18 Setting:19 Workflow action: Set state of an element20 Element: Page or any named element21 State: selected_item, Value: [dynamic]22 Reading:23 page's selected_item (in any expression)24 Persistence: Resets on page reload2526COMMON PATTERNS:27 Tabbed Interface (URL params):28 Tab buttons → Go to page with ?tab=[value]29 Group visibility → When param 'tab' = [value]3031 Multi-Step Form (custom states):32 Page state: current_step (number)33 Step groups visible when step = 1, 2, 334 Next: Set state current_step + 135 Previous: Set state current_step - 13637 Selected Item (custom states):38 Page state: selected_item (Data Type)39 RG cell click → Set state to Current Cell's item40 Detail panel → page's selected_item's fields4142DECISION GUIDE:43 URL Parameters Custom States44 ───────────── ─────────────45 Survive reload Reset on reload46 Visible in URL Hidden from URL47 Bookmarkable Not bookmarkable48 Browser history No history49 Text/number best Any data type50 Cross-page Same page onlyCommon mistakes when setting custom parameters in Bubble
Why it's a problem: Using custom states for data that should survive page reloads
How to avoid: Use URL parameters for states that should persist across reloads, like active tab, filter selections, or pagination
Why it's a problem: Putting sensitive information in URL parameters
How to avoid: Use custom states or database fields for sensitive data. URL parameters should only contain non-sensitive identifiers.
Why it's a problem: Creating custom states on elements inside Repeating Groups
How to avoid: Create custom states on the page or a parent group outside the Repeating Group for easier access
Best practices
- Use URL parameters for states that should survive page reloads and be bookmarkable
- Use custom states for temporary UI interactions like dropdowns, modals, and selections
- Create custom states on the page element for easy access from any element or workflow
- Never store sensitive data in URL parameters — they are visible and logged
- Combine URL parameters and custom states: URL for page-level state, custom states for UI interactions
- Use the Ignore empty constraints option when URL parameters are optional
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble.io app with a tabbed dashboard and a detail panel that shows the selected item from a list. Should I use URL parameters or custom states for each of these? Explain the trade-offs.
Create a dashboard page with three tabs (Overview, Projects, Settings) driven by a URL parameter called 'tab'. Add a Repeating Group of projects on the Projects tab, and when a project is clicked, store it in a custom state and display its details in a side panel.
Frequently asked questions
Do URL parameters survive page navigation?
URL parameters persist when the page reloads but are lost when navigating to a different page unless you explicitly pass them again with the Go to page action.
Can I store a list in a custom state?
Yes. When creating a custom state, check 'This state is a list.' You can add and remove items using the 'Set state' action with list operators like :plus item and :minus item.
How do I set a default value for a URL parameter?
URL parameters are empty by default. Use the 'Get data from page URL' expression with a :default operator to provide a fallback value when the parameter is not present.
Can custom states store database records?
Yes. Set the custom state type to any Data Type (e.g., User, Product). You can then store a full database record reference in the state.
Can RapidDev help architect data passing patterns in Bubble?
Yes. RapidDev can design optimal data passing architectures using URL parameters, custom states, and database references to create fast, reliable page interactions in your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation