TABLE OF CONTENTS

Before you start


Adding the Survey Playback Widget

Follow the steps given below to add the Survey playback widget in 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 a unique content in 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-loaded
mashupInfo

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-found
searchCriteria
searchCriteriaWhen 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-validated
validationStatus
booleanWhen password validation process has been completed.
on-initialized--This will be raised when the player has loaded.
on-page-changed
pageNumbernumberWhen 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>