FloatMessage
Engagement5 min read

Cookie Consent with FloatMessage

Use the FloatMessage Cookie Banner template as a GDPR-compliant consent bar. When the visitor clicks “Accept”, load Google Tag Manager (or any other tracking script) — and remember their choice for future visits.

1

Create a cookie banner message

Go to Dashboard → Messages → + New Message. Select the Cookie Banner template.

Customize the text as needed. The template includes two buttons:

  • Accept — has the fm-cta class (fires the CTA event and dismisses)
  • Decline — has the fm-close class (just dismisses)
Tip: Set the dismiss behavior to Permanent so the banner doesn’t reappear after the visitor makes a choice.
2

Configure display settings

In the Display Settings tab:

  • Position: Bottom Center (the template is full-width)
  • Trigger: Immediately
  • Dismiss: Permanent (never show again after choice)
3

Add the consent script to your site

Add this script before the FloatMessage embed script. It listens for the CTA click (Accept) and loads Google Tag Manager:

<script>
  // Wait for FloatMessage to be ready
  var _fmReady = setInterval(function() {
    if (window.FloatMessage && window.FloatMessage.on) {
      clearInterval(_fmReady);

      FloatMessage.on("cta:click", function(detail) {
        if (detail.template !== "cookie-banner") return;

        // Save consent
        localStorage.setItem("fm_cookie_consent", "granted");

        // Load GTM
        loadGTM();
      });
    }
  }, 100);

  // Load GTM if consent was previously given
  if (localStorage.getItem("fm_cookie_consent") === "granted") {
    loadGTM();
  }

  function loadGTM() {
    if (window._fmGtmLoaded) return;
    window._fmGtmLoaded = true;

    // Replace GTM-XXXXXX with your container ID
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');
  }
</script>

<!-- FloatMessage embed (after the consent script) -->
<script src="https://floatmessage.com/embed/floatmessage.js"
  data-user="YOUR_USER_ID"></script>
4

How it works

The flow for visitors:

  1. Visitor lands on your site and sees the cookie banner
  2. If they click Accept: consent is saved to localStorage, GTM loads immediately, banner dismissed permanently
  3. If they click Decline: banner dismissed, no scripts loaded
  4. On future visits: if consent exists in localStorage, GTM loads automatically without showing the banner
Note: This approach stores consent in the visitor’s browser via localStorage. It does not store consent on your server. For full GDPR compliance, consult with a legal professional about your specific requirements.

Next up