Integrations
      Back to home
      1. | Help Center
      2. Integrations

      Learn how to create a custom cookie banner using Hubspot

      How to use the Hubspot integration to show a custom cookie banner on your Flipsnack profile and flipbooks

      Table of contents

      Hubspot cookie banner

      Overview

      HubSpot’s built-in consent manager allows you to implement a cookie banner via Google Tag Manager (GTM), offering similar results to third-party solutions like Cookie Pro by OneTrust.

      Note: This setup is necessary only if you have a custom domain. If you are using a standard Flipsnack account, our built-in cookie banner will handle cookie consent for you.

      Requirements

      Before proceeding, ensure that Google Tag Manager (GTM) is installed on your Flipsnack profile and flipbooks. Google Tag Manager will serve as the central tool for installing and configuring the cookie banner and any other scripts required for compliance.

      Follow these guides to set up GTM:

      Once Google Tag Manager (GTM) is set up, you can proceed with integrating the HubSpot cookie banner. Additionally, ensure that HubSpot is integrated with Flipsnack for full functionality.

      Follow this guide to set up the integration:

      Caution: Make sure no other cookie banners are active on your website to prevent conflicts.

      Steps to integrate the HubSpot cookie banner

      For detailed instructions on configuring your HubSpot cookie banner, refer to HubSpot’s official guide.

      Integrate cookie banner

      1. In HubSpot settings, navigate to Privacy & Consent and select the Cookies tab.

      2. Add your domain and click on it to manage Consent Banners.

      3. Click Create Consent Banner and configure it according to your needs. 
      4. Select the style and position of your banner.  
      Create your first cookie banner

      Create cookie banner

      Publish cookie banner

      After completing these steps, the cookie banner will appear on your Flipsnack profile page and any associated flipbooks.

      Style cookie banner

      Testing your setup

      To ensure your banner is active and working:

      • Open your flipbook in a new tab.

      • Reload and display the latest version of the page.

      Configuring Google Tag Manager for Consent Updates

      Once the cookie banner is installed and appears on your Flipsnack profile and flipbooks, the next step is to ensure Google Tag Manager (GTM) updates the consent settings when users accept cookies. Make sure you've checked Enable consent overview in the Container Settings (Admin page).

      Add a tag to update Consent States

      1. Log in to Google Tag Manager and navigate to your Flipsnack-associated container.

      2. Click Tags, then select New to create a new tag.

      3. Click Tag Configuration and choose Custom HTML.

      4. Copy and paste the following script into the HTML field:

        Download file: Hubspot Consent Configuration Tag

      5. Click Triggering and select Consent Initialization to ensure the script runs at the right time.

      6. Click Save, then Publish the container.

      This tag ensures that Google Tag Manager automatically updates Google Consent Mode based on the user's cookie preferences set through the HubSpot banner.

      For more details, refer to Google Consent Mode for HubSpot Cookie Banner and Google Consent Mode Overview.

      Test with GTM Preview Mode

      1. In Google Tag Manager click Preview.

      2. Enter the URL of your Flipsnack profile or flipbook and click Connect.

      3. Interact with the HubSpot cookie banner and click Agree to cookies.

      4. In the GTM Debug Mode panel, verify that the Consent Mode updates correctly based on user selections.

      Consent granted

      Configuring Tags for Consent in Consent Overview

      Once the consent update tag has been added and published, the next step is to configure Consent Overview in Google Tag Manager to ensure that all tracking tags respect user consent preferences.

      Steps to configure consent in Google Tag Manager:

      1. Log in to Google Tag Manager and navigate to your container.

      2. In the left menu, go to Admin > Consent Overview > Container Settings > Additional Settings.

      3. Enable Enable consent overview to ensure Google Tag Manager automatically enforces consent settings.

      4. For each tag requiring consent (Google Analytics, Ads, Facebook Pixel, etc.):

        • Open the Consent Overview tab.

        • Select the tags in the Consent Not Configured section.

        • Select No additional consent required if the built-in are set correctly or Require additional consent for tag to fire if there is no built-in consent mode.

        • Choose one of the following consent types (e.g., analytics_storage, ad_storage, functionality_storage, personalization_storage, security_storage).

        • Set the tags to require the corresponding consent type.

      5. Save your changes and publish the updates in Google Tag Manager.

      Checking your installation in Developer Mode

      1. Open your browser’s Developer Tools (F12 or Ctrl+Shift+I in Chrome).

      2. Navigate to Application > Storage > Cookies.

      3. Select your Flipsnack domain from the list.

      4. Look for the number of cookie before and after you accept the cookie banner. Functional cookie will be set at first and the rest of the cookies after you click Accept.

      Developer mode

      If the consent settings are not updating correctly, revisit your GTM setup and ensure that the HubSpot banner is correctly linked to Google Consent Mode.

      Next steps

      Explore related customization guides:

      Need expert support?

      Our team is here to help. Connect with our team experts or message us via the in-app chat for a personalized demo.