Before you start

Follow the instructions mentioned in this article to consume the VIDIZMO Transcription Widget: How to use VIDIZMO Widgets


Adding the Insights Widget

Follow the steps given below to add the Insights widget in your website.

Get Started


Step 1: Add the following HTML tag into the body section of your Web App code to add the Insights Widget.

<vdz-mashup-insights class="insights" data-widget="true"></vdz-mashup-insights> 


Note: Make sure data-widget is set to 'true' as this applies the VIDIZMO default styling to the widget.


Other available input properties for the Insights widget can be found below.


PropertyTypeDefaultRequiredDescription
mashup-idstring-YesId corresponding to a unique content in user's portal.
timed-data-typesstring[]["Emotion", "Face", "Label", "Sentiment", "Speaker", "Brand", "Topic", "Keyword", "OCR"]NoWhen provided only those insights will be displayed.


Step 2: Add the following code into the body section of your web application to consume and bind the available events for the Insights widget. Sample events can be seen in the following code

document.querySelector(".insights").addEventListener('on-timed-data-clicked', (evt) => {
    });

document.querySelector(".insights").addEventListener('on-seek-player', (evt) => {
    });


Other available events for the Insights widget can be found below.


Events

Event NameEvent DataScenario
on-timed-data-clickedobjectWhen any of the available timed data is clicked, this event will be raised.
on-seek-playerobjectWhen the player is seek through timestamp of available timed data, this event will be raised.


Sample Code

<html>

<head>
    <script type="text/javascript" src="https://wahajulhaq.beta.us.vidizmo.com/static/js/vidizmo-player/player.js">
    </script>
    <link rel="stylesheet" href="https://wahajulhaq.beta.us.vidizmo.com/static/compiled/widget/widgets.css" />
    <script type="text/javascript" src="https://wahajulhaq.beta.us.vidizmo.com/static/compiled/widget/widgets.js">
    </script>
</head>

<body>
    <vdz-mashup-insights class="insights" data-widget='true' mashup-id={mashup-id}></vdz-mashup-insights>
    <script>
        document.querySelector(".insights").addEventListener('on-timed-data-clicked', (evt) => {
        });

        document.querySelector(".insights").addEventListener('on-seek-player', (evt) => {
        });
    </script>
</body>

</html>