What is the Preview Mode and how do I use it

What is the Preview Mode

The BDK Native app can also be used as a 'previewing' app for your own bubble app in a native environment, before purchasing your own app build from us.
You can even build the native workflows and test before ordering your app build if you install the Native apps (bdk) plugin from the bubble plugin store ($16), .

That's awesome. How do I preview my bubble app

First, install the BDK Native app on your mobile device if you haven't already. You can install it by scanning the above QR code, or by opening https://thebdk.page.link/install on the browser on that mobile device (safari on iOS, chrome on Android).
Launch the app and sign in. You can create an account for free.
Go to Preview section. Click the 'Configure' button.


Provide Your Webpage link

Now enter your bubble site url (not the bubble editor url). Just like you would in a web browser to visit the page.
- For example https://yourapp.bubbleapps.io/pagename or https://yourappdomain.com/pagename (if your bubble app is linked to domain)
In the app domain field, enter the domain name of the site
- For example yourapp.bubbleapps.io or yourappdomain.com (if your app is bubble app is linked to domain)
That's it. Now click 'Save Changes' and then the 'Launch Preview' button.

You'll see the app do a native transition to your provided site url.
Note: If you are using password protection on your bubble app, the page wont display inside the native app until you remove it.

Here's a screen recording of us previewing sites like 'airbnb.com' and 'google.com' in the preview mode.

How do I change that loading screen and status bar color

Design loading screen
Our default transition screen would show up as the loading screen while your bubble page finishes loading behind it.
You can customize this (e.g. color, image, dimensions) via the 'Configure' button too in order get a better feel.
When you start your bdk native project, you will be asked to provide the design of the splash, loading and transition screens for your own app build exactly this way in the project form.

Update status bar color
Our default status bar color (light grey) would continue to show up in your bubble page
You can update this at any time in your bubble page by using the workflow step 'BN - Update Status Bar color' as per the plugin documentation

Do I need to keep deploying my changes live to test

No you don't
Just change the webpage link to the version-test link of the page in the configuration section.
You can also provide additional data as url parameters e.g. https://yourappdomain.com/version-test/yourpagename?myname=gaurav

Do I always have to use BDK Native app's preview mode for testing

Once you order your own app build, you can directly use that for testing instead of having to use the BDK Native app for testing!

Can I test my app build before submitting to Apple and Google for review

Yes you can!
Like every other native app, you will be able to test your app on your devices, beta testers etc.
When you're done testing, you can submit the build along with your other business & marketing information (e.g. screenshots, T&C, app description etc.) to Apple and/or google for review
Apple has a testing period limitation of 90 days per build. So to avoid a rebuild fee, we recommend you use the preview mode for testing your app until you are less than 90 days from your targeted launch date

Updated on: 07/06/2022