Before you start

Adding the Transcription Widget

Follow the steps given below to add the transcription 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 Transcription Widget.

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

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

Step 2: Add the following JS into the body section of your web application to consume and bind the available events for the transcription widget. 

document.querySelector(".transcription").addEventListener('on-download', (evt) => {

document.querySelector(".transcription").addEventListener('on-edited-successful', (evt) => {

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


Event NameDataScenario
on-downloadmashupIdWhen the mashup transcription download starts, this event will be raised.
on-edited-successful-When mashup transcription has been edited successfully, this event is raised.
on-edited-failederror: HttpErrorResponseWhen mashup transcription edit has failed, this event will be raised.
on-font-changedbooleanWhen mashup transcription font size is changed, this event will be raised. Event data will be received as true when fontSize is set to large otherwise false.
on-sync-playerseekToLocation: numberWhen mashup transcription row has been clicked to sync with player, this event will be raised.

Sample Code

<meta charset="UTF-8" />
<!-- VIDIZMO Imports -->
<script type="text/javascript" src="{portal-address}/static/js/vidizmo-player/player.js">
<link rel="stylesheet" href="{portal-address}/static/compiled/widget/widgets.css" />
<script type="text/javascript" src="{portal-address}/static/compiled/widget/widgets.js">
<vdz-mashup-transcription class="transcription" data-widget='true' mashup-id={mashup-id}></vdz-mashup-transcription>
document.querySelector(".transcription").addEventListener("on-download", (event) => {