Overview

VIDIZMO Mashup Filter widgets, as independent JavaScript-based controls, can be seamlessly embedded into websites. These widgets facilitate content filtering in the Media Library Widget by various attributes, including Category, Format, Author, Tags, and Custom Attributes.

 

Before you start

Make sure the following points are complied with

  • Widgets App is enabled on the portal.
  • Both the portal domain and the Web App domain must be consistently secured (HTTPS enabled). 


Configuring Widgets App

Following are the steps to enable the Widgets app in VIDIZMO:

 

  1. Log in to the 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.
    3.  Open the Portal Settings page.

 

     2. From the Portal Settings page:

1. Click on the Apps option to expand it.

2. Navigate to the Integration App and click to open it.

3. Navigate to the Add New Apps button and Click on it.



4. The Apps Catalog modal will appear. Click on the + icon to add Widgets App.


5. The Widgets App is added for you to configure.   

6. Click on the gear icon to configure the app Widget App settings.


3. From the Widget App- Settings

  1. Type the name of your Widget App.
  2. The Application ID is a unique system-generated ID for your Widget Application that is already populated in the filed by the system. This ID will be utilized for authentication purposes.
  3. In Vidizmo's widget app, the whitelisted domain signifies authorized domains permitted for embedding and displaying the widget. This enhances control over widget distribution by ensuring secure embedding exclusively on approved domains. Omitting a whitelisted domain may result in unintended widget malfunctions. Whitelisting domains serves as a security measure, preventing unauthorized widget embedding on external websites. By specifying allowed domains, users guarantee widget accessibility solely on approved platforms. To add a whitelisted domain, enter the domain name and press "Enter." Users can add multiple domains (comma-separated) or use an asterisk (*) to allow any domain. Precision in formatting is crucial for the widget's proper functioning on specified domains. 
  4. The Client Secret is a unique system-generated secret of the Widgets Application that will be used for authentication. It is already populated in the field. The Client's secret is only required to play protected media. All anonymous Media can be played without passing in the client's secret. Client Secret can also be regenerated. Please refer to this article to see how you can configure the Widgets App to playback authenticated media within Widgets Authentication.
  5. To set the expiry date for the widget, select the calendar button and choose the desired date. Please note that the widget will no longer function after the specified expiry date. To resume functionality, update the expiry date within the widget app.
  6. Click the "Save Changes" button to save the configured settings.


Enabling Widgets App

1. Navigate to the Toggle Button and click on it.



How to use Mashup Filter Widget

  1. Add the following scripts to your application, replacing 'portal-address' with your VIDIZMO portal’s address.
<script type="text/javascript" src="https://vidizmo-widgets.vidizmo.com/static/js/vidizmo-player/player.js"></script>
<link rel="stylesheet" href="https://vidizmo-widgets.vidizmo.com/static/compiled/widget/widgets.css" />
<script type="text/javascript" src="https://vidizmo-widgets.vidizmo.com/static/compiled/widget/widgets.js"></script>

      

        2. Add User Credentials. Replace the placeholder values with your actual account information. The email address is represented as a string ('xyz@vidizmo.com'), and both the App ID and Client Secret are represented as numeric values (123456 and 789012, respectively).

<script>
    window.widgetContext = {
      appLoginInfo: {
        emailAddress: 'xyz@vidizmo.com',// Replace with the email address associated with your account
        appId: '12345', // Replace with your numeric App ID
        clientSecret: '789012', // Replace with your numeric Client Secret
      },
    };
  </script>


    

3.  Imports the necessary scripts for VIDIZMO functionality.  


<!-- VIDIZMO Imports -->
<script type="text/javascript" src="https://vidizmo-widgets.vidizmo.com/static/js/vidizmo-player/player.js"></script>
<link rel="stylesheet" href="https://vidizmo-widgets.vidizmo.com/static/compiled/widget/widgets.css" />
<script type="text/javascript" src="https://vidizmo-widgets.vidizmo.com/static/compiled/widget/widgets.js"></script>


4. Add the following HTML tag to add a Library filter Widget and pass appropriate values against each attribute.

<vdz-category-filter id="widgetCategoryFilter" data-widget="true"></vdz-category-filter>



Note: Make sure data-widget is set to 'true' and the id is unique


5  By adding the script given in the above line, you will be able to add the Library filter widget, as shown in the attached screenshot.

<vdz-library-filter data-widget="true" id="widgetLibraryFilter"></vdz-library-filter>