Before you start

Follow the instructions mentioned in the article to consume the VIDIZMO Audio playback widget How to use VIDIZMO Widgets


Adding the Survey Playback Widget

Follow the steps given below to add the Survey playback widget to your website.


Get Started


Step 1: Add the following HTML into the body section of your web application code to add the Survey playback widget.

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

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


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


Input Properties

PropertyParamsDefaultRequiredDescription
mashup-idstring-yesId corresponding to the unique content in the user's portal.


Listen to Survey Player events


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

document.querySelector(".surveyPlayer").addEventListener('on-mashup-loading', (evt) => {
    });

document.querySelector(".surveyPlayer").addEventListener('on-mashup-loaded', (evt) => {
    });

Other available events for the Survey player widget can be found below.


Events


Event NameEvent DataTypeScenario
on-mashup-loadingsearchCriteriaobjectWhen content search call is being sent to server, search criteria is received as event data.
on-mashup-loadedmashupInfo
When content search call is successful, mashupInfo of fetched content is received as event data.
on-mashup-loading-failederrorhttpErrorResponseWhen content search call has failed, error info is received as event data.
on-mashup-not-foundsearchCriteriasearchCriteriaWhen content search call couldn't find any mashup against searchCriteria.
on-password-required--When content is password protected. When this event is raised, a form will be shown on screen where the user will be able to enter password.
on-password-validatedvalidationStatusbooleanWhen password validation process has been completed.
on-initialized--This will be raised when the player has loaded.
on-page-changedpageNumbernumberWhen the document player has changed a page of the document.
on-errorerrorobjectRaised when error occurs during form submission
on-completedmashupIdnumberWhen survey has been completed and the result screen is being displayed.


Sample Code

<html>

<head>
    <meta charset="UTF-8" />
    <!-- VIDIZMO Imports -->
    <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>
    <vdz-mashup-survey class="surveyPlayer" on-mashup-loading-sync="onLoading" data-widget="true" mashup-id={mashup-id}></vdz-mashup-survey>
    <script>
        document.querySelector(".surveyPlayer").addEventListener("on-mashup-loading", (event) => {
        });
        document.querySelector(".surveyPlayer").addEventListener("on-mashup-loaded", (event) => {
        });
    </script>
</body>

</html>