How to install Upflowy through Hubspot CMS

To add code to your Hubspot webpages, blogs or landing pages, ensure that you have been granted Superadmin access within your Hubspot account. If you do not have Superadmin access, you will be blocked from entering any code into your website.

There are two ways to inject an Upflowy flow into Hubspot:

When you want it to launch from a Trigger

When you want it to be embedded into a website page

This article goes through both!

When you want your flow to launch from a trigger

First, we'll need to sign into Hubspot CMS. Once you've logged in, select:

"Marketing > Website > Website Pages".

Once you land here, click on the "Settings" icon in the top-right corner:

This will lead to you a "Pages" page. To ensure that Upflowy works across all domains, ensure the settings are set to "Default settings for all domains".

Now, let's go into your Upflowy flow! In the Flow Plan, click on the "Integrate" tab in the left-hand toolbar:

Once you click into the Integrate tab, you'll see the code snippet available to post on your website. Click "Copy to clipboard", and then return to the Hubspot page.

Copy-paste this line of code into "Site header HTML".

Finally, click the "Save" button in the bottom-left corner.

Congratulations! You have integrated Upflowy with your Hubspot CMS, and now all websites linked to your Hubspot will be able to launch Upflowy flows.

When you want your flow to be embedded into your website page

We're going to the same place to start: "Marketing > Website > Website Pages". Click on the page that you want the flow to appear in.

Once you are looking at the right page, click "Edit" and add in a Custom Rich Text (Or Rich Text):

When that is drag n dropped into your website page, click on "Edit in Expanded view" at the bottom of the Content section:

This will bring up the toolbar in the "expanded" section. Click on Insert, and then Embed:

Now, we'll go back into Upflowy! You'll need the code snippet that can be found in the Integrate tab in the "Embed your flow" section. Click on "copy to clipboard".

When this code is copied into the "URL or embed code", you'll be able to see a preview appear below. Click "Insert".

Hubspot will then let you customise your flow and how it looks on the page by using their prompts or adding custom sizing. Note: for smaller sizes, the Upflowy flow will default to the mobile view to make the most of the space that's been allocated! For the desktop view to display, larger sizes for the embed are recommended.

Go back to the page view and enjoy your embedded flow!