Iframe Consent

Overview

This guide explains how to properly manage cookie consent when embedding Videobots in HTML iframes on your website. Using the postMessage API, you can communicate consent preferences from your Consent Management Platform (CMP) to our embedded content.

Implementation Steps

1. Set Up the Iframe

Get the embed code for the iframe from the Videobot dashboard, and add it to your website using your CMS or directly into the source.

WARNING

The id property in the iframe is not defined automatically in the embed code. Make sure the id you add matches the consent scripts.

<iframe
	id="videobot-iframe"
	src="https://videobot.com/embed/NYswCVZ9?lang=en"
	title="Introduction to Videobot"
	frameborder="0"
	height="650"
	width="340"
	style="border-radius: 10px;"
	scrolling="no"
	allow="clipboard-write;web-share">
</iframe>

2. Send Consent Status via postMessage

When a user provides their consent preferences through your CMP, send those preferences to our iframe:

function setAnalytics(isEnabled) {
  const iframe = document.getElementById('videobot-iframe');
  const message = {
    action: 'VIDEO_BOT_SET_ANALYTICS',
    value: isEnabled
  };

  iframe.contentWindow.postMessage(message, '*');
}

Integration with Google Tag Manager (GTM)

1. Create a Custom HTML Tag in GTM

<script>
  function setIframeConsent() {
    const message = {
      action: 'VIDEO_BOT_SET_ANALYTICS',
      value: {{Analytics Cookie Consent}}
    };

    const iframe = document.getElementById('videobot-iframe');
    if (iframe) {
      iframe.contentWindow.postMessage(message, '*');
    }
  }

  // Wait for iframe to load
  document.addEventListener('DOMContentLoaded', function() {
    const iframe = document.getElementById('videobot-iframe');
    iframe.addEventListener('load', setIframeConsent);
  });

  // Send updated consent when it changes
  document.addEventListener('consentUpdate', setIframeConsent);
</script>

2. Set GTM Trigger

Configure the tag to trigger on:

• Page load (to set initial consent)
• Consent update events (when user changes preferences)

Integration with Common CMPs

OneTrust

function handleOneTrustConsent() {
  // Wait for OneTrust to be ready
  if (typeof OnetrustActiveGroups !== 'undefined') {
    const activeGroups = OnetrustActiveGroups.split(',');
    const message = {
      action: 'VIDEO_BOT_SET_ANALYTICS',
      value: activeGroups.includes('C0003'),
    };

    const iframe = document.getElementById('videobot-iframe');
    if (iframe) {
      iframe.contentWindow.postMessage(message, '*');
    }
  }
}

// Initial setup
document.addEventListener('DOMContentLoaded', handleOneTrustConsent);

// Handle consent changes
document.addEventListener('consent.onetrust', handleOneTrustConsent);

Cookiebot

window.addEventListener('CookiebotOnAccept', function() {
  const message = {
    action: 'VIDEO_BOT_SET_ANALYTICS',
    value:  Cookiebot.consent.statistics,
  };

  const iframe = document.getElementById('videobot-iframe');
  if (iframe) {
    iframe.contentWindow.postMessage(message, '*');
  }
});

Troubleshooting

• Check browser console for security errors related to cross-origin communication
• Verify the iframe has fully loaded before sending messages
• Confirm your CMP is correctly detecting and reporting consent categories