Appearance

Embedding Multiple Videobot Widgets via Google Tag Manager ​

Overview ​

However, adding multiple widgets, such as sliders, into the same page will not work out of the box. If you try it, you'll quickly notice that only one of them works. This guide will explain the background for this behaviour and how it can be fixed.

This guide explains:

  • Why multiple widgets don’t work out of the box
  • How to fix it using manual widget creation
  • How to embed multiple widgets via Google Tag Manager (GTM)

1. Why Multiple Widgets Don’t Work Out of the Box ​

Consider the following snippet for embedding a slider:

html
<div
  id="videobot-widget"
  data-widget-type="widget"
  data-widget-id="example123"
></div>
<script type="module" src="https://videobot.com/embed/videobot.mjs"></script>

It consists of two parts: the container (div) and the script (script). When the script loads, it creates a Videobot into the empty container, if one is available. It finds it on the page using the id attribute, and specifically the value videobot-widget (or just videobot for traditional chat widgets).

By definition, there can only be one id on any given page, and two elements with the same id will not function correctly. This also prevents us from directly using two different widgets on the same page.

2. Fix: Embedding Multiple Widgets Manually ​

Step 1: Use Unique IDs ​

Give each widget its own unique container ID:

html
<div
  id="videobot-widget-1"
  data-widget-type="widget"
  data-widget-id="example123"
></div>

<div
  id="videobot-widget-2"
  data-widget-type="widget"
  data-widget-id="example456"
></div>

Step 2: Manually Initialize Widgets ​

After loading the script, you can manually initialize the widgets using the public API:

html
<script type="module">
  import { Videobot } from 'https://videobot.com/embed/videobot.mjs'

  new Videobot('#videobot-widget-1')
  new Videobot('#videobot-widget-2')
</script>

3. Embedding via Google Tag Manager (GTM) ​

To install multiple widgets through GTM, follow these steps:

⚠️ Important: Do not combine direct embed and GTM-based embed methods on the same page. It will lead to duplicate widgets.

✅ Prerequisites: ​

  • GTM installed on your website
  • Widget IDs (e.g. from the Videobot dashboard)

Step-by-Step Setup ​

Step 1: Create the Script Tag ​

  1. Go to Tags in GTM > Click New
  2. Choose Tag Configuration > Select Custom HTML
  3. Paste the following:
html
<script type="module" src="https://videobot.com/embed/videobot.mjs"></script>
  1. Check Support document.write
  2. Name the tag (e.g. Videobot Script)
  3. Save the tag without assigning a trigger.

Step 2: Create the Embed Tag ​

  1. Create another Custom HTML tag
  2. Insert only the widget container creation logic, without the script:
html
<script>
(function () {
  var sliderId = {{Videobot slider id}};
  var cornerWidgetId = {{Videobot widget id}};

  // Inject slider widget
  if (sliderId) {
    var targetDiv = document.querySelector('.target-div');
    if (targetDiv) {
      targetDiv.innerHTML = '';
      var widget1 = document.createElement('div');
      widget1.id = 'videobot-widget';
      widget1.setAttribute('data-widget-type', 'widget');
      widget1.setAttribute('data-widget-id', sliderId);
      widget1.style.width = '100%';
      widget1.style.height = '100%';
      targetDiv.appendChild(widget1);
    }
  }

  // Inject corner widget
  if (cornerWidgetId) {
    var widget2 = document.createElement('div');
    widget2.id = 'videobot';
    widget2.setAttribute('data-videobot-id', cornerWidgetId);
    widget2.setAttribute('data-sync', 'true');
    document.body.appendChild(widget2);
  }

  // Inject script if needed
  var moduleScript = document.createElement('script');
  moduleScript.setAttribute('type', 'module');
  moduleScript.setAttribute('src', 'https://videobot.com/embed/videobot.mjs');
  document.body.appendChild(moduleScript);
})();
</script>
  1. Go to Advanced Settings > Enable necessary consent options
  2. Under Tag Sequencing, set it to fire after the Videobot Script tag
  3. Set a Trigger, e.g. Consent Initialization – All Pages
  4. Save and publish your workspace

4. Tips & Recommendations ​

  • Make sure to test the widgets on all device sizes
  • If you're dynamically injecting widgets, ensure the containers are in place before calling new Videobot(...)
  • Keep the widget IDs organized per environment (staging/production)

Summary ​

ScenarioSolution
Multiple widgets directly in HTMLUse unique IDs + new Videobot(...)
Multiple widgets via GTMInject containers via GTM tag + include loader script + manual init