Insights
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.
Property
Type
Default
Required
Description
mashup-id
string
-
Yes
Id corresponding to a unique content in user's portal.
timed-data-types
string[]
["Emotion", "Face", "Label", "Sentiment", "Speaker", "Brand", "Topic", "Keyword", "OCR"]
No
When 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 Name
Event Data
Scenario
on-timed-data-clicked
object
When any of the available timed data is clicked, this event will be raised.
on-seek-player
object
When 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>