How to install the signup form on Framer
Framer is a website builder that's also an interactive design tool for websites and prototyping. It supports every part of the design process, from visual mockups to interactive prototypes, but what makes it stand out from the rest is in being able to directly publish from the canvas to an actual webpage.
Integrating Prefinery with your Framer website allows you to run your own referral program, or a pre-launch waitlist campaign.
Here's how:
Note: In order to add custom code to your Framer website, Framer requires that you are on any of their paid plans.
1.) In your Prefinery project dashboard, navigate to Installation and copy the JavaScript Snippet like as shown below.
2.) In Framer, while editing your website, click on the Framer dropdown menu like as shown below and navigate to Settings > General.
3.) In the General Site Settings, scroll down until you see the Custom Code section, and in the End of <head> tag box paste in the Prefinery JavaScript Snippet you copied earlier, then Save your changes.
To learn more about how custom codes work in Framer, you can check out their guide here: Custom Code
4.) Back in your Prefinery project and still in the Installation page, copy the signup form embed code like as shown below:
<div class='prefinery-form-embed'></div>
5.) Back in the Framer editor, click on the Insert (+) button, then search for the term "embed" which should return the Embed element. Drag that element into your website page where you want the Prefinery form to appear.
If you'd like to know more about how embedding works in Framer, you can check out their guide here: How to add an iframe or embed script
6.) Select the newly-added embed element in your page, then on the right panel scroll down to find the Embed section. Here, set Type to HTML then in the HTML box paste in the Prefinery signup form embed code you copied earlier.
7.) Publish/update your changes and you should now find your Prefinery project's signup form embedded on your website page.
If you'd like to test out signups, shares and referrals, check out our guide here on how: How can I test referrals?
For other parts of your project that you can customize, please see: Customizing Your Project