Using Fundraise Up on HubSpot CMS

HubSpot CMS is a way to power your website! Make the most of HubSpot's tools to add your Fundraise Up installation code and Elements and start taking donations today.


Add your Fundraise Up Installation Code to your HubSpot CMS

First, log into your Fundraise Up dashboard and copy the code from the Installation section under Settings.

Next, add the copied code to the <head> section of every page served by your HubSpot CMS.

HubSpot has a few ways to add code to that section:

  • To add your Fundraise Up Installation Code globally, go to Settings, go to Website, then Pages.
    • On the HTML tab, you'll find a Site header HTML editor box. That'll allow you to paste in the Installation Code, and once you save your changes, it'll be loaded for visitors to every page your HubSpot CMS provides. 
  • To only add our code to pages served by a certain Theme for your HubSpot CMS, go to Marketing in the top bar, then Files & Templates, and then Design Tools.  
    • In the left-hand menu, you can navigate to your theme's header file. You can paste in the Installation Code there, and once you publish your changes, any Page that uses that Theme will load your Installation Code for all visitors. 

 


Add Elements to your HubSpot CMS

Certain Elements, specifically global ones like Sticky Button, Reminder, Social Proof, and such will show up just fine without further edits in HubSpot CMS, because they're shown on your website directly by the Installation Code you just added!

However, HubSpot CMS' stock rich text editor sadly seeks to format Fundraise Up's embedded Elements (such as Donate Button, Impact Slider, and Goal Meter), and in doing so, makes them non-functional.

As such, it's often best when setting up Fundraise Up to make a custom module in your HubSpot CMS that you can drag-and-drop anywhere in your HubSpot CMS pages to add the placeholder code for one of our Elements directly.

Using the Hubspot HTML module 

We recommend using HubSpot's own HTML module for adding our element code to your website.

Using your new Module to add Elements to your Pages

When editing any Page of your website, you should now be able to drag your new Module from the left-hand bar into the place on your website you'd like one of our Elements to appear. 

In Fundraise Up, when you made any embeddable Element, we'll have provided you a small piece of HTML code to copy. Simply add that code into your module, and when the page loads, it'll load in the actual Element as you designed it in Fundraise Up!