In this Article

Installation

Portal Configuration

Widgets Authentication

API Key

User Credentials

Embedding Media Player - Detail View

Embedding Video Player

Sample Code: Media Library - Detail View

Sample Code: Video Player

Read Next


Installation

To use VIDIZMO widgets in your website, following files need to be embedded in the code of your website

<script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js"></script>
<script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js"></script>
<link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css"/>
Note: https://{portal-address} or http://{portal-address} is your fully qualified registered portal domain URL without brackets.


Portal Configuration

Steps to Enable Widgets App

  1. From the Portal's Homepage:
    1. From the top left navigation menu, expand Admin tab and click on the Portal Settings
    2. In the Admin tab, open Portal Settings page



2. From the Portal Settings page, click on Apps to expand it

  1. Navigate to the Widgets Integration Tab, and click to open it.
  2. Navigate to the Toggle Button, and Enable it.


 


Note: All widgets require authentication if Media Viewing Access is not Anonymous.


Widgets Authentication


All VIDIZMO widgets are reliant on the widgets.js file, which requires an access token to load authorized media, therefore, widgetContext variable must be present in DOM's window before loading widgets.js in your website. Following are the available authentication methods:

  • API Key
  • User Credentials


API Key

This method authenticates using access token (API-Key) generated from VIDIZMO portal.


Steps to generate API Key

  1. Click on the Gear icon displayed in the diagram above
  2. Add website domain that will embed widget e.g. https://{YourWebsiteDomain} or http://{YourWebsiteDomain}  
  3. Set Expiry Date for Token
  4. Click on Add to generate an API key against your domain

  

 

User Credentials


Following method generates access token based on user email address and password.

<script type="text/javascript">

    var authInfo = {
        emailAddress: "{email-address}",
        password: "{password}"
    };
<!-- where portal address can be either https://{portal-address} or http://{portal-address} -->
    fetch(
        '{portal-address}/api/v1/user/authenticate',
        { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(authInfo) }
    )
        .then(response => response.text())
        .then(data => {
            // access token is returned as response in "data" variable
            console.log(data);
        });


</script>
Note: {email-address} and {password} are your portal's registered email address and password respectively.


Embedding Media Player - Detail View


Following code will display Media Library - Detail View widget

<vdz-mashup-detailview class="detail-view" data-widget="true"/>


Embedding Video Player


Following code will display Video Player

<vdz-mashup-video class="video-player" data-widget="true" mashup-id={mashup-id}/>


Note: {mashup-id} is the media id within your portal that you want to play in the video player and data-widget="true" is mandatory which applies VIDIZMO's default styling on widgets.


Sample Code: Media Library - Detail View


The following sample code for Media Library - Detail View widget authenticates user using API Key.

<html>

<head>
    <meta charset="UTF-8">
    <script>
        window.widgetContext = { authenticationInfo: { accessToken: "{API-Key}" } };
    </script>

// where portal address can be either https://{portal-address} or http://{portal-address}
    <script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js"></script>
    <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
    <script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js"></script>
</head>

<body>
    <div class="row">
        <div class="col-sm-9">
            <vdz-mashup-detailview class="detailView" data-widget="true" />
        </div>
    </div>
</body>

</html>

Note: API-Key is the Key generated from VIDIZMO Portal's Widget app.


Sample Code: Video Player


The following sample code creates widgets dynamically to set access token in window.widgetContext in DOM before "widget.js" file gets loaded because authentication call is an asynchronous process which is required by widgets having authorized media. This dynamic loading of widget implementation is mandatory when authenticating using user credentials. 

<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css"/>
</head>

<body>
    <div style="width: 720px;" class="widgetContainer"></div>
</body>

<script type="text/javascript">
    var authInfo = {
        emailAddress: "{email-address}",
        password: "{password}"
    };

    fetch(
        '{portal-address}/api/v1/user/authenticate',
        { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(authInfo) }
    )
        .then(response => response.text())
        .then(data => {
            window.widgetContext = { authenticationInfo: { accessToken: data } };

            new Promise((resolve, reject) => {
                let callBacksCount = 0;
                const playerJs = document.createElement('script');
                const widgetJs = document.createElement('script');

                playerJs.onload = function () { callBacksCount += 1; if (callBacksCount >= 2) { resolve(); } };
                widgetJs.onload = function () { callBacksCount += 1; if (callBacksCount >= 2) { resolve(); } };

                playerJs.src = "{portal-address}/static/js/vidizmo-player/player.js";
                widgetJs.src = "{portal-address}/static/compiled/widget/widgets.js";

                document.head.appendChild(playerJs);
                document.head.appendChild(widgetJs);

            }).then(() => {
                const widget = document.createElement("vdz-mashup-video");
                widget.setAttribute("data-widget", "true");
                widget.setAttribute("mashup-id", "{mashup-id}");

                document.querySelector('.widgetContainer').appendChild(widget);

            });

        });
</script>

</html>