Survey Player
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
Property
Params
Default
Required
Description
mashup-id
string
-
yes
Id 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 Name
Event Data
Type
Scenario
on-mashup-loading
searchCriteria
object
When 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-failed
error
httpErrorResponse
When content search call has failed, error info is received as event data.
on-mashup-not-found
searchCriteria
searchCriteria
When 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
boolean
When password validation process has been completed.
on-initialized
-
-
This will be raised when the player has loaded.
on-page-changed
pageNumber
number
When the document player has changed a page of the document.
on-error
error
object
Raised when error occurs during form submission
on-completed
mashupId
number
When 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>