Videobot Custom Trigger Documentation

Installation

There are a few options on how to include/import Videobot into your project:

CDN

<script src="https://embed-iframe.videobot.com/video-bot.js"></script>

<script>
  var videobot = new Videobot('#videobot', {...} );
</script>

NPM (to do)

npm install videobot

// import Videobot
import Videobot from 'videobot';

// initialize Videobot
const videobot = new Videobot('#videobot', {...} );

Options

Parameter	Type	Default	Description
iframeUrl	string	null	Videobot URL (Required).
widgetComponent	WidgetDefault | WidgetCustom	WidgetCustom	Type of Videobot trigger button.
mobileBreakpoint	number	768	Mobile breakpoint value (in pixels).
autoopen	number	0	Time to autoopen Videobot (0 to disable).
zIndex	number	1000	Videobot z-index property.
align	right | left	right	Open Videobot position on the screen.
position	absolute | fixed	fixed	Videobot trigger position type.
customPosition	object	null	Custom open video position on desktop (WidgetCustom only).
loopLimit	string	15	Chat icon video loop limit per session (WidgetDefault only).
color	string	#351DDA	Chat icon color accent (WidgetDefault only).
avatarVideo	string | null	null	URL to video icon (WidgetDefault only).
avatarPoster	string | null	null	URL to image / video poster icon (WidgetDefault only).
label	string | null	null	Type of widget component (WidgetDefault only).

Examples

Custom Trigger

new Videobot('#custom-element', {
  iframeUrl: 'http://embed.videobot.com/?id=videobot',
  widgetComponent: 'WidgetCustom'
});

Default Trigger Aligned to the Left Side

new Videobot('#custom-element', {
  iframeUrl: 'http://embed.videobot.com/?id=videobot',
  widgetComponent: 'WidgetCustom'
});

Basic Styling for Custom Triggers

It’s recommended to add basic styling when using widgetComponent: 'WidgetCustom':

<link
  rel="stylesheet"
  href="https://embed-iframe.videobot.com/styles.css"
/>

import 'videobot/styles.css';

Initializing Videobot Without Setup

It is also possible to initialize Videobot without any setup by using the #video-bot object and proper attributes.

<div
  id="video-bot"
  data-url="https://embed.videobot.com/?id=videobot_demo"
  data-color="#351DDA"
  data-label="Aloita virtuaaliesittely"
  data-avatar-video="https://cloudflarestream.com/ecc2bad415c5796dfc104a53c43e927c/manifest/video.m3u8"
  data-avatar-poster="https://cloudflarestream.com/ecc2bad415c5796dfc104a53c43e927c/thumbnails/thumbnail.jpg?height=150&time=2s"
></div>