How to Integrate with Webflow
Important: In order to integrate Prefinery with your Webflow project you will need a paid Webflow account as this requires access to paid features like Custom Code.
With Prefinery, you can run a referral program or a prelaunch waitlist campaign through your Webflow website.
Whether you prefer to use the Prefinery form, show it in a popup, or your own native Webflow form, here are different ways on how you can integrate your Prefinery project into Webflow:
Option 1: Embedding the Prefinery Form
1.) In your Prefinery project dashboard, go to Installation and copy the provided JavaScript Snippet.
2.) In your Webflow account, go to Project settings > Custom Code, paste the Prefinery JavaScript code into the Head Code section and save the changes. Webflow also provides instructions on how to do this, here.
3.) Back in the Installation page of your Prefinery project dashboard, copy the Embedded Form code.
4.) Paste the copied Prefinery form code into a Webflow Embed component. Webflow also provides instructions on how to do this, here.
5.) That's it! Publish your changes on staging to preview things and when ready push this change to production.
Option 2: Showing the Prefinery Form in a Popup
The steps are the same as Option 1 above, except that instead of doing steps 3-4 you only have to add or edit a Button element on your Webflow page and in the Styles tab > Style selector simply add a new class prefinery-form-cta like as shown below.
For more information about how the Prefinery popup form works, you can also check out our detailed guide here: Showing the Signup Form in a Popup
Option 3: Using Your Own Webflow Form with JavaScript Web API
This is a more advance integration method that may require you to write your own code, or get the help of a Webflow developer for a more complex integration.
1.) Like with Option 1 above - steps 1-2 in particular - you'll first need to install the Prefinery JavaScript Snippet in the Head Code section.
2.) In Webflow designer, edit the page where your Webflow form is at. Find and select the Form element (the direct parent of the form fields and submit button, not the form wrapper/container) like as shown below then go to its Settings tab and set an ID for it like signup-form (no spaces, but you can use letters and numbers with dashes and underscores).
3.) Then, select the Email field, and set an ID for it (or change the one that's already there) to something more descriptive like email-address as shown below.
4.) Navigate to the Pages menu then go into the Settings section of the page where your form is at and scroll down to the Custom Code section.
5.) As described in the "Custom code in your Page settings" section of this Webflow guide add the following script into the <head> tag of your page:
<script type="text/javascript">
window.addEventListener('load', function() {
// Listen for submissions to the form
var form = document.getElementById('signup-form');
if (form.attachEvent) {
form.attachEvent('submit', processSubscriptionForm);
} else {
form.addEventListener('submit', processSubscriptionForm);
}
});
// Callback function that is invoked when the form is submitted
function processSubscriptionForm(event) {
// Prevent the default form action
event.preventDefault();
var email = document.getElementById('email-address').value;
prefinery('addUser', email, function(user) {
// Pop-up the referral page on submit
prefinery('popupReferralPage');
});
}
</script>
If you'd like to learn more about the above script and how to use the Prefinery JavaScript Web API, you can check out our full documentation here: https://www.prefinery.com/api/docs/js
6.) That's it! Optionally, if you want to redirect the user to a standalone referral page instead of a popup one, you can remove the line prefinery('popupReferralPage'); in the script above, then in your Form settings like as shown below set your Redirect URL to the page you want to redirect the user to after submitting the form, then follow our guide here on how to embed the referral widget on that page: Embed the Viral Referral Page on my Site
