Overview

Serving as independent applications, VIDIZMO widgets can easily be embedded into the body of websites. These widgets are JavaScript-based rich application controls, which allow the users to consume VIDIZMO widgets into their own website just by simply copy-pasting the provided code and passing in a few parameters.


Before you start

  • Understand the concept of VIDIZMO Web Components. see Getting Started with VIDIZMO Web Components
  • Widgets app is enabled on the portal that you will use.
  • Your portal domain and the Web App domain must be secured (HTTPS enabled) or either must be unsecure (HTTP protocol)
  • Web App in which you will embed VIDIZMO playback widgets is live or running on localhost. (You may use w3schools HTML editor)

Enabling Widgets App

Following are the steps to enable Widgets app in VIDIZMO:

  1. Log in to VIDIZMO portal and from the Portal’s Homepage:
    1. Click on the Navigation Menu on the left corner of the page.
    2. In the Admin tab, open the Portal Settings page.

  1. From the Portal Settings page:
    1. Click on Apps option to expand it.
    2. Navigate to the Widgets Integration Tab and click to open it.
    3. Navigate to the Toggle Button and click on it.



Installation Instructions

Add the dependent libraries/files in your Web Page


player.js Library

The player.js file contains specific JavaScript code for a standard VIDIZMO HTML5 player that helps you playback the audio/video in the player.


widgets.js Library

The widgets.js file contains specific JavaScript code that implements a widget as an element of the user interface on your website. The file contains classes for rendering the custom elements and dynamically building the DOM element.


widgets.css File

The widgets.css file contains the default styling of VIDIZMO Widgets is responsible for the styling of VIDIZMO widgets.

Following scripts need to be added in the header of your web application code, so that you can use the VIDIZMO Video Playback Widget. You need to replace {portal-address} in below script with your VIDIZMO portal's domain. 

E.g. https://{yourportalname}.vidizmo.com or http://{yourportalname}.vidizmo.com


Note: If your website is using http protocol then your VIDIZMO portal should also use http protocol and if your website is using https protocol then your VIDIZMO portal should also use https protocol


<!-- this script is optional i.e. (only needed when you want to play an audio/video using the VIDIZMO audio/video player -->
<script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js">
</script>

<!-- this link is mandatory to apply default styling of VIDIZMO Widgets -->
<link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css"/>

<!-- this link is mandatory which contains classes for rendering the custom elements and dynamically building the DOM element. -->
<script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js">
</script>


Note: The first script i.e. including the player.js library is only needed when you want to playback the audio/video.