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.

Render video grid

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

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

Show Video Icon

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

chipBotApi.showVideoIcon('{videoExpId}');

Show ChipBot Icon

This will hide the video icon.

chipBotApi.hideVideoIcon();

Get all Videos

chipBotApi.getVideoExperienceList();

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}'});

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'});

HTML: Render video embed (full-size video)

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

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