This module allows you to add a Flexible PopUp to promote content, a campaign landing page or other link on your website. The documentation will walk you through how to set up and install the Flexible PopUp. Should you have any questions, please click on the support link to get in touch.
After purchasing the module from the HubSpot Marketplace the first step is to set up the module, to do this navigate to Marketing > Files and Templates > Design Manager and select Flexible PopUp from the left hand side menu (It will be listed in a folder named Marketplace).
Select Edit global module from the right hand side to open HubSpot's Global Content Editor.
The options on the left hand side are:
Type Of Module - This option allows you to choose what type of module you wish to include on your page. By default the module is Global but can be changed to a Local module if you wish. Follow the guide at the end of this documentation on how to switch your module from a Global module to a Local module.
Show PopUp - This option acts as a global switch to enable / disable the Flexible PopUp. This option is set to no by default so make sure you set it to yes when you want to make the PopUp live on your website.
PopUp Link - This allows you to choose where your PopUp will link to. The Flexible PopUp can be set to link to a URL, File, Email Address or Blog.
PopUp Headline - This allows you customise the headline that will appear in your PopUp.
Button Text - This allows you customise the button text on your PopUp. The default value is Read More and can be changed to whatever you prefer.
Image - This allows you choose the image that gets displayed within the Flexible PopUp.
Styles - This section contains customisable settings to help you style the module so it falls more inline with your website's brand identity. The options in this panel are:
Layout - This option allows you to set whether you want to have the layout “text /image” or “image / text”.
Position - This allows you to modify how your PopUp is docked to the visitor's screen. The module can be docked to either the top left, middle left, bottom left, top right, middle right, bottom right or centre of a visitor's screen. If Centre is selected as the position an option titled filter colour will appear.
z-index - This option is used if you discover the Flexible PopUp overlaps other elements on your web page. The element with the highest z-index will always display on top of other elements on your website. The default value is "100000000" but you may need to increase this if other elements on your website use a similar high numbered z-index.
Filter Colour - Use this property to customise the background colour of the PopUp's filter when Position is set to Centre.
Filter z-index - This option is used if you discover the filter overlaps other elements on your web page when Position is set to Centre. The element with the highest z-index will always display on top of other elements on your website. The default value is "10000000" but you may need to increase this if other elements on your website use a similar high numbered z-index.
Background Colour - Use this property to customise the background colour of the PopUp panel.
Border Radius - This allows you to customise the CSS border-radius value of the PopUp panel. By default the panel has a Border Radius of 5px.
Headline Colour - This value allows you to customise the colour of the headline within the PopUp panel.
Button Background Colour - This value allows you to customise the background colour of the button within the PopUp panel.
Button Border Radius - This value allows you to customise the CSS border-radius value of the button within the PopUp panel.
Button Text Colour - This value allows you to customise the colour of the button text within the PopUp panel.
Close Button Colour - This value allows you to customise the colour of the PopUp's close button.
Settings - This section contains customisable settings to help you personalise the Flexible PopUp to your website. The options in this section are:
Reset after 'X' days? - This value controls the time it takes for the PopUp to reappear after it has been shown to a visitor on your website. By default when a visitor views the PopUp and closes it to navigates to another page on your website the PopUp will not reappear for 2 days, however, you can set this value to whatever you prefer.
Show after elapsed time? - This value allows you to enable / disable whether or not the PopUp is triggered after a certain amount of time has elapsed. This is useful if a visitor lands on a page but doesn't take any further action such as scrolling, using an elapsed time allows another opportunity to catch their attention.
Scroll Value - This value can be used to control how scrolling affects the PopUp. The option Pixels allows you to show the PopUp after the visitor has scrolled a certain amount of pixels. The option Percentage allows you to show the PopUp after the visitor has scroll a certain percentage of your web page, this value is defined in multiples of 10% e.g. 10%, 20%, 30% etc.
This section allows you to control the pages the module is displayed on. By default the module is set up to appear on every page of your website, however, you have two ways to control this.
The module can be setup using a whitelist meaning that by default the module will be hidden on all website pages except the approved URLs on the whitelist. If the Display Type option is set to Whitelist the module will not appear on any of your website and blog pages except those with the page URLs defined under Page URL.
The module can also be setup using a blacklist meaning that by default the module will appear on all website pages except those restricted URLs via the blacklist. If the Display Type option is set to Blacklist the module will appear on all your website and blog pages except those with the page URL's defined under Page URL.
If you would like to restrict the Flexible PopUp so it doesn't appear on a whole section of your website you can use a wildcard operator to limit this. For example, if you want to turn off the Flexible PopUp in your Services section and every page in the section follows the same URL pattern e.g. www.yourdomain.com/services/service-name you could use the wildcard operator '/*' to easily exclude this section by adding: www.yourdomain.com/services/*
Now you have set up the Flexible PopUp you are ready to make it live on your website. There are several ways to add a HubSpot module into your website but to provide maximum flexibility and ease of control we recommend you follow the process below:
Navigate to Marketing > Files and Templates > Design Tools and select Flexible PopUp from the left hand side menu (It will be listed in a folder named Marketplace).
Right click and select Copy Snippet
Select the Settings icon (⚙) which will load your HubSpot portal's settings
From the left menu select Website to open the submenu...
Paste the module's snippet into the section titled Site footer HTML and click Save.
A Save button will appear and once you click this your Flexible PopUp will be live across the pages you have specified. If you have left the module with the default settings it will roll out across all of your HubSpot pages.
Navigate to Marketing > Files and Templates > Design Manager and select the page template you would like to add a local version of the module to.
From the right hand menu select +Add and then drag Flexible PopUp into the Headersection of your template.
Select the module on the template editor (1) and then select Edit (2) and from the Moremenu select Make a local copy (3).
A window will appear asking if you would like to confirm this action. Select Create copy.
After clicking Create copy scroll to the Default Content section on the right hand toolbar and change the setting for Type of Module to Local and the setting for Show PopUp to No.
Click Publish changes to make the changes live.
Navigate to Marketing > Website > Website Pages and select one of your pages using this template and select Edit.
From the Left hand menu select Flexible PopUp copy and begin editing your settings. Any edits made to the module will appear on only this page as the module is now a local module.
This module has been designed to be as flexible as possible. All the CSS required to style the Announcement Bar is included within the module. It can be edited to suit your needs although we recommend using the built-in styling options as we can’t take responsibility for any CSS edits you make that break the module (or your website).
We have tried to build as much functionality into this module as possible without making it too complicated. If, however, you have specific requirements for your business, please get in touch and we will see if this module can be customised further to meet your needs or if a bespoke module would be more appropriate.