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 an existing custom HTML module or making your own module

Some Theme providers while package in their own custom HTML modules. You can test those to see if they allow you to embed our Elements (and reach out to us for assistance if not!), or you can use this pre-made HTML module from the Hubspot Asset Marketplace.

If you want to control this more in-house, you can make your own module. To make a new module, go to Marketing, then Files & Templates, then Design Tools. From there, click the File menu, and click New File.

Screen Shot 2021-03-11 at 1.20.54 PM

When making your new file, make sure to choose to make a new Module.

Screen Shot 2021-03-11 at 1.21.00 PM

The new Module should be available on your Pages at least, so that you can easily add it to Pages of your public website. 

Screen Shot 2021-03-11 at 1.21.39 PM

Once it's been added, you'll land on this screen. You don't need to make any further edits here!

Screen Shot 2021-03-11 at 1.22.19 PM

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!