Survalyzer offers the possibility to integrate a survey into any webpage. The following section is a live example of an embedded survey.
To embed a survey into any webpage the following code is required:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://survalyzer.survalyzer.eu/assets/default/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://survalyzereu.blob.core.windows.net/public/assets/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://survalyzereu.blob.core.windows.net/public/assets/dx.light.css" /> <link href="https://survalyzer.survalyzer.eu/assets/themes/default/rt-theme.min.css" rel="stylesheet" type="text/css"> <survalyzer-survey surveyhash="elkxsnkosn" tenant="education"></survalyzer-survey> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <script src="https://survalyzer.survalyzer.eu/assets/survalyzer-survey.js"></script>
Script location
Depending on the datacenter the scripts need to be loaded from different Urls:
Swiss:
<link href="https://survalyzer.survalyzer.swiss/assets/themes/default/rt-theme.min.css" rel="stylesheet" type="text/css"> <link href="https://survalyzer.survalyzer.swiss/assets/default/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="https://survalyzer.survalyzer.swiss/assets/survalyzer-survey.js"></script>
EU:
<link href="https://survalyzer.survalyzer.eu/assets/themes/default/rt-theme.min.css" rel="stylesheet" type="text/css"> <link href="https://survalyzer.survalyzer.eu/assets/default/bootstrap.min.css" rel="stylesheet" type="text/css" > <script src="https://survalyzer.survalyzer.eu/assets/survalyzer-survey.js"></script>
Survey Tag parameters
The following parameters could be specified as attributes on the survalyzer-survey tag:
- tenant* (The subdomain of the admin URL needs to be provided)
- surveyHash* (The first segment of the interview URL needs to be provided)
- interviewHash (The second segment of the interview URL could be provided for personal links)
- interviewId (The guid of the interview to load a specific interview)
- language (The desired language of the survey could be provided)
- urlVariables (URL parameters like urlVar01 – urlVar20 could be provided as attributes)
- token (A JWT panel member could be provided to prevent a second login in authenticated environments like portals)
- scrollToTop (if not set, by default ‘true’. Controls the auto-scroll behavior after clicking ‘Next’ or ‘Back’. On some occasions the scroll to top on page switch creates a weird experience, depending on the position the survey is embedded. If set to false, the survey does not automatically scroll on page switch)
* this is a mandatory attribute
Survey API
This API allows to interact with the survey container using JavaScript.
| Function | Description | Example Call | Example Result |
| answers | Gets or sets the answers of the survey | api.fn.answers() api.fn.answers({q1: “Test”, q2: 1}); | { q1: "Test", q2: 1} |
| changeLanguage | Changes the survey language to the given language | api.fn.changeLanguage(“de”) | undefined |
| getCurrentLanguage | Gets the current survey language | api.fn.getCurrentLanguage() | “de” |
| goNext | Moves survey to the next page | api.fn.goNext() | object |
| goBack | Moves the survey to the previous page | api.fn.goBack() | object |
| submit | Completes the interview | api.fn.submit() | object |
| save | Saves answers without moving to another page | api.fn.save() | object |
| validate | Validates the answers without moving to another page | api.fn.validate() | { errors: []} |
| subscribe | Subscribes for one of these events: next, back, completed, redirect, restarted, startedOrContinued, validationFailed, validationError, languageSwitch | api.events.subscribe(“next”, myHandler) | undefined |
| unsubscribe | Unsubscribes an event handler | api.events.unsubscribe(myHandler); | undefined |
| getPages | Gets all pages of the survey | api.fn.getPages() | object |
| getCurrentPageIndex | Gets the index of the current page | api.fn.getCurrentPageIndex() | 1 |
| getCurrentPage | Gets the current page object out of the page collection | api.fn.getCurrentPage() | object |
Embedding the Survey into a popup
In the right bottom corner the Popup with the question “Would you like to rate our website?” is shown.
To implement such a behavior the following 2 elements are needed:
<button onclick="javascript:showPopup()">Show Popup</button>
<div class="modal" id="popup" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">How do you rate this article?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="modalContent" class="modal-body"></div>
</div>
</div>
</div>function showPopup(){
var dialog = $("#popup");
$("#modalContent").html(`<survalyzer-survey surveyhash="djclovxsla" tenant="education" language="en"></survalyzer-survey>`);
dialog.modal('show');
}Optional Javascript Snippet
The following script is optional and used if the pop up should close 10 seconds after the respondent submits the survey answers.
setTimeout(function () {
api.events.subscribe('completed', function () {
setTimeout(function () {
document.getElementById('wrapper').remove();
}, 10 * 1000);
});
}, 1000);