Appearance

Multiple Widgets ​

A typical embedding case for Videobot is straightforward: the code snippet from the dashboard can be added into your page content directly - and it just works!

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.

To see the solution, you can jump directly to the end.

Background ​

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.

Fixing it ​

While the script automatically creates a Videobot for the specifically formatted container, the functionality can also be invoked manually. We can use this to create as many widgets on the page as we want.

Assigning unique ids ​

We start by giving the two containers ids that are unique instead of conflicting:

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>

After this, the script will not find either of them and nothing is shown, but don't worry! We'll fix that next.

Creating widgets manually ​

The script has a public API that becomes available after it has loaded. Creating widgets for the two containers above can be simply done with the new operator:

html
<script type="module">
  import { Videobot } from 'https://videobot.com/embed/videobot.mjs'
  new Videobot('#videobot-widget-1')
  new Videobot('#videobot-widget-2')
</script>

Explanation

The first argument to the Videobot constructor is a CSS selector for a valid container element, in this case an id (#) with the value we gave it.

Full solution ​

The final embed code will look something like this:

Containers ​

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>

Scripts ​

html
<script type="module" src="https://videobot.com/embed/videobot.mjs"></script>
<script type="module">
  import { Videobot } from 'https://videobot.com/embed/videobot.mjs'
  new Videobot('#videobot-widget-1')
  new Videobot('#videobot-widget-2')
</script>