How to Install the Signup Form on Bubble
With Prefinery, you can run a referral program or a prelaunch waitlist campaign through your Bubble no-code website or webapp.
Installing the Prefinery signup form on your website allows you to quickly and easily provide users a way to join your campaign.
Here's how:
Option 1: Use the Prefinery Plugin
1.) Install and configure the Prefinery plugin on your Bubble app following our guide here: How to Install the Prefinery Plugin for Bubble
2.) To install the signup form on your Bubble app, from the Design tab > UI Builder, look up prefinery then drag the resulting Prefinery Signup Form visual element into your page like as shown below.
Note that the signup form will not be visible from within the app editor/builder, so you'll have to go to Preview to see and test out the embedded form like as shown below.
That's it! You can now deploy these changes when you're ready to go live with your campaign.
Option 2: DIY
Important: For this option, you will need a paid Bubble account as this requires access to paid-only features like header scripts. Because of that, we highly recommend that you go with Option 1 especially when testing, unless your use case calls for not using the plugin.
1.) In Prefinery, after creating your project/campaign and setting it up, in your Prefinery project dashboard go to Installation and copy the provided JavaScript Snippet.
2.) In Bubble, while editing your app navigate to Settings > SEO / metatags and under the SEO settings section paste in your copied Prefinery JS Snippet into the Script/meta tags in header box.
3.) Back in Prefinery and still in the Installation page of your Prefinery project dashboard, copy the Embedded Form code.
4.) In Bubble, switch to the page where you want to place the embedded form. Then, go to the Design > UI Builder tab and add a HTML visual element into the page where you want the form to appear.
5.) After placing the HTML element, in its property editor, under the Appearance tab paste in the copied Prefinery embedded form code.
Note: The embedded form will not be visible from the editor. No worries!
6.) In the top-right corner, click on Preview to see how the embedded form looks on the page.
That's it! You can now deploy these changes when you're ready to go live with your campaign.
If you're looking to customize how your form looks and functions, check out our guide here.