URL parameters are a great way to open different popups after the page has loaded.
This could be to show an image, display a message, video or popup etc. You can use URL parameters to do A/B testing and schedule email broadcasts.
If you're interested in using URL parameters, then keep reading this short tutorial.
Say a visitor lands on a specific page and you want to show a popup with a payment alert or a message from the admin. In this Bubble tutorial, I will go over how you can create a workflow which will show a popup on landing on a specific page.
URL parameter and key
We need to decide a URL parameter that we'll be passing. Bubble will check the URL for this parameter, and if found, will trigger a workflow. I've named my parameter as open and the key will be yes.
You can keep anything as the parameter name and the key. It's upto you. Here's a guide that'll get you up to speed on URL parameters.
Himanshu Sharma
Triggering the workflow
To trigger the workflow everytime a user lands on the page, we'll be using the "Page is loaded" event.
This workflow will be triggered everywhere the page is loaded or refreshed.
Next, we need to put a condition on this workflow as we want it to be triggered only when the URL contains our selected parameter.
Now unless the URL has this parameter, this workflow will not run. We could've defined this condition at the Step level as well rather than the workflow level, but it is always better to have different workflow for different scenarios.
What if we remove this parameter from the URL?
If you remove this parameter from the URL, either manually or using some workflow, the popup will not open. As the Only when condition that we've defined at the workflow level will not get fulfilled, all the steps in that workflow will be disregarded.
How to remove the URL parameter using workflows?
Let's say that you ask the user to fill in some information in the popup and press a button to save it to the database.
You can add another step in the workflow where you're saving the data to your database. That step will be to simply take the user to the same page where they are currently, but without sending this parameter.
Himanshu SharmaEditor - https://bubble.io/page?type=page&name=url_param_popup&id=nocodeassistant-tutorials&tab=tabs-1
Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/url_param_popup?open=yes
If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.
Join the conversation.