Add Fundraise Up to a Framer website
Fundraise Up can be added to Framer using Framer custom code and Embed components.
Add the Fundraise Up installation code to your Framer site settings so it runs across your site. Then add Element HTML code to Framer Embed components where you want embedded Elements to appear.
Before you begin
Make sure that you have:
- Access to Fundraise Up Dashboard.
- Access to the Framer project settings.
- A published Framer site with either a Framer domain or your own connected domain.
Add installation code to Framer
- In Fundraise Up Dashboard, go to Settings > Installation.
- Copy the installation code.
- In Framer, open your project.
- Open Settings > Code.
- Click Add.
- In Name, enter a clear name, such as Fundraise Up installation code.
- In Placement, choose Start of <head> or End of <head>.
- In Page, choose All.
- In Run, choose On every page visit.
- Paste the Fundraise Up installation code into the Code field.
- Click Add.
- Publish your Framer site.
After you publish the site, the Fundraise Up installation code is active on all pages.
Add an embedded Element to a Framer page
Most embedded Elements, such as Donate Button or Donation Form, use an HTML code snippet from Fundraise Up Dashboard.
Sticky Button and Overlay Elements work differently. They appear based on their display rules in Fundraise Up Dashboard and do not need an HTML Embed component in Framer.
- In Fundraise Up Dashboard, go to Elements.
- Open the Element that you want to add.
- Copy the Element HTML code.
- In Framer, open the page where you want to show the Element.
- Click Add.
- Go to Utility > Embed.
- Select the Embed component on the canvas.
- In the right-side panel, open Style.
- Under Embed, set Type to HTML.
- Paste the Element HTML code into the HTML field.
- Resize and position the Embed component as needed.
- Publish your Framer site.
Test the Element
Fundraise Up Elements may not load in Framer Preview mode. To test the Element, publish your Framer site and open it using a Framer domain or your own connected domain.
If the Element does not appear on the published site, check that:
- Confirm that the Fundraise Up installation code is added to the page.
- Confirm that the installation code is set to run on every page visit.
- Confirm that the Element HTML code is added to an Embed component with Type set to HTML.
- Confirm that the latest Framer changes are published.