JavaScript API

Overview

In some advanced embedding cases, such as single-page apps (SPAs), there is a need to control the Videobot dynamically after the page has loaded. For instance, the Videobot should only be shown in certain pages or situations, but the page does not refresh between user actions.

One option for solving these cases is using Videobot's JavaScript-based API.

Methods

The main way to interact with a Videobot on the page is through the global object window.Videobot, which is created after the initial Videobot script has loaded.

Currently the following methods are considered publicly available:

Method	Description
window.Videobot.refresh()	Reload Videobot and its configuration
window.Videobot.remove()	Remove Videobot from the page
window.Videobot.open()	Open Videobot iframe
window.Videobot.close()	Close Videobot iframe
window.Videobot.show()	Show Videobot widget & iframe (if previously hidden)
window.Videobot.hide()	Hide Videobot widget & iframe (and pause video)
window.Videobot.enableAnalytics()	Enable analytics events
window.Videobot.disableAnalytics()	Disable analytics events
window.Videobot.setGoogleConsent(value)	Define user consent for Google Analytics

WARNING

These methods will not be available before the Videobot script has loaded, see the Examples section for a possible solution.

Messages

In addition to the callable methods, the Videobot itself communicates with the widget and the parent page with message events. To learn more about how they work, see this guide on MDN.

Messages from the Videobot are objects with an action and optional per-action value fields:

{
	action: 'VIDEO_BOT_LOADED',
	...
}

The actions that can be used are:

Message	Description
VIDEO_BOT_LOADED	The Videobot has initialized and will be shown
VIDEO_BOT_OPEN	The Videobot has been opened
VIDEO_BOT_CLOSE	The Videobot has been closed
VIDEO_BOT_ANALYTICS_EVENT	An analytics event from within the Videobot. Requires the Iframe forwarding feature to be enabled

INFO

Always check the origin of the incoming event to ensure it comes from Videobot

Examples

If we wanted to only show the Videobot on the /campaign page of our site, we could do the following:

if (window.location.pathname === '/campaign') {
	window.Videobot.show()
} else {
	window.Videobot.hide()
}

As another example, we could dynamically allow enabling analytics based on a custom consent button:

<button onclick="window.Videobot.enableAnalytics()">Allow analytics</button>

If we wanted to use the above examples immediately after the page has loaded, we should wait for the DOMContentLoaded event to fire:

document.addEventListener('DOMContentLoaded', (event) => {
	window.Videobot.hide()
})

Alternatively the Videobot script can be imported as a module:

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