Video functions

HTML: Render video grid

This is similar to ChipBot’s primary built-in video grid, but it can be rendered inline on a page. It brings some basic styles, but you must style it using CSS.

<div class="chipbot-render-video-grid"></div>

Attributes:

• data-folder-id: Point the grid to a folder of videos. Get the folder ID from the video folder page. See the example below.
• data-border-color: Specifies a border color for each video.
• data-center: When set to true, all videos will be centered.
• data-size: Choose between small, medium, and large.
• style: Apply CSS to the component and sub-components.

HTML: Render icon

This will render ChipBot’s “floating icon” as an embeddable element within the page.

<a class="chipbot-render-video-icon" data-video-exp-id="{videoExpId}"></a>

HTML: Open a video from a link or button

As long as the element contains the class name below, ChipBot will look for it and add a click event listener to the element.

This is useful when you want a link, image, or custom UI to open a video, instead of ChipBot’s default icon settings.

<a class="chipbot-open-video" data-video-exp-id="{videoExpId}"></a>

HTML: Render video embed (full-size video)

<div class="chipbot-render-embed-video" data-video-exp-id="{videoExpId}"></div>

It is the same as the JavaScript function but can also be called via HTML.

JS: Render video grid

Same as the HTML functionality but can be initiated via JavaScript.

chipBotApi.renderVideoGrid(document.querySelector('.my-class-name'));

JS: Show Video Icon

This will show a specific video icon, regardless of the rules configured on the video.

chipBotApi.showVideoIcon('{videoExpId}');

JS: Show ChipBot Icon

This will hide the video icon.

chipBotApi.hideVideoIcon();

JS: Get all Videos

chipBotApi.getVideoExperienceList();

JS: Render video icon

This renders a video icon inline on a page. Clicking it will open ChipBot normally as if the video icon were on the bottom corner of the website.

chipBotApi.renderVideoIcon(document.querySelector('.my-class-name'), {videoExpId: '{videoExpId}'});

JS: Render embed video (full-size video)

This renders the full-size video of ChipBot inline on a page.

chipBotApi.renderEmbedVideo(document.querySelector('.my-class-name'), {videoExpId: 'videoexp_ID'});