Slide-In CTA PopUp - Documentation

Slide-In CTA PopUp

This module can be used to display a Slide-in CTA PopUp on your website. It is a global module meaning it can be added to multiple pages on your website but only needs to be updated once for the change to apply across the whole site.

The documentation will walk you through how to set up and install the Slide-in CTA PopUp. Should you have any questions, please click on the support link to get in touch.

Setting Up The Slide-in CTA PopUp

1. 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 Slide-In CTA PopUp from the left hand side menu (It will be listed in a folder named Marketplace).

   

2. Select Edit global module from the right hand side to open HubSpot's Global Content Editor.

3. 

Customising the Slide-in CTA PopUp

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 Slide-in CTA 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.

Call To Action - This option allows you to select which of your HubSpot Call To Actions you would like to use in the module.

Settings - This section contains customisable settings to help you personalise the Slide-in CTA PopUp module to your website. The options in this section are:

• Choose The Pages Your Module Is Displayed On

  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.

  

  Whitelist
  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.

  Blacklist
  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.

  Wildcards

  If you would like to restrict the Slide-in CTA 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 Slide-in CTA 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/*

How To Install The Slide-in CTA PopUp

Now you have set up the Slide-in CTA 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:

1. Navigate to Marketing > Files and Templates > Design Tools and select Slide-in CTA PopUp from the left hand side menu (It will be listed in a folder named Marketplace).

   

2. Right click and select Copy Snippet

   

3. Select the Settings icon (⚙) which will load your HubSpot portal's settings

   

4. From the left menu select Website to open the submenu...

   
   ...and then select Pages
   

5. Paste the module's snippet into the section titled Site footer HTML and click Save.

   

6. A Save button will appear and once you click this your Slide-in CTA PopUp will be live across the pages you have specified.

   

How To Convert The Slide-in CTA PopUp Into A Local Module

1. 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.

2. From the right hand menu select +Add and then drag Slide-in CTA PopUp into the Headersection of your template.
   

   

3. Select the module on the template editor (1) and then select Edit (2) and from the Moremenu select Make a local copy (3).

   

4. A window will appear asking if you would like to confirm this action. Select Create copy.

   

5. 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.

   
   

6. Click Publish changes to make the changes live.

7. Navigate to Marketing > Website > Website Pages and select one of your pages using this template and select Edit.

   

8. From the Left hand menu select Slide-in CTA 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.

   

CSS Styles

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).

Final Thoughts

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.