This page explains how you can embed your survey into your website. Please pay attention to the data center as well as the various configuration option.
Embedding a survey into a non-Angular website
Swiss Datacenter
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="https://survalyzerch.blob.core.windows.net/public/assets/font-awesome.css">
<link rel="stylesheet" type="text/css" href="https://survalyzerch.blob.core.windows.net/public/assets/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://survalyzerch.blob.core.windows.net/public/assets/dx.light.css" />
<link href="https://survalyzer.survalyzer.swiss/assets/themes/default/rt-theme.min.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
...
<survalyzer-survey surveyhash="enter the survey hash here" tenant="enter your subdomain here"></survalyzer-survey>
...
<!--Optional tag: Jquery is only needed if not already loaded by the page -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Required survey run time package -->
<script src="https://survalyzer.survalyzer.swiss/assets/survalyzer-survey.js"></script>
</body>
</html>
EU Datacenter
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="https://survalyzereu.blob.core.windows.net/public/assets/font-awesome.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" />
...
</head>
<body>
...
<survalyzer-survey surveyhash="enter the survey hash here" tenant="enter your subdomain here"></survalyzer-survey>
...
<!--Optional tag: Jquery is only needed if not already loaded by the page -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Required survey run time package -->
<script src="https://survalyzer.survalyzer.eu/assets/survalyzer-survey.js"></script>
</body>
</html>Embedding a survey into an Angular website
For Angular applications the <link> and <script> resources are not added to the index.html. Instead, the Angular way is applied to bundle the application within the styles and scripts section in the angular.json configuration file.
"styles": [
"projects/.../assets/font-awesome.css",
"projects/.../assets/dx.common.css",
"projects/.../assets/dx.light.css"
"projects/.../assets/rt-theme.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"projects/.../assets/survalyzer-survey.js"
],
All scripts and styles, except for the two from Survalyzer, could also be referenced using the following NPM packages:
- npm i jquery
- npm i devextreme
- npm i font-awesome
Please additionally download the Survalyzer files depending of the Datacenter:
Swiss Datacenter
https://survalyzer.survalyzer.swiss/assets/themes/default/rt-theme.min.css
https://survalyzer.survalyzer.swiss/assets/survalyzer-survey.js
EU Datacenter
https://survalyzer.survalyzer.eu/assets/themes/default/rt-theme.min.css
https://survalyzer.survalyzer.eu/assets/survalyzer-survey.js
Parameters of the survalyzer-survey html tag:
The following parameters could be specified as attributes on the html 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)
* this is a mandatory attribute
Example of an correctly embedded survey
JavaScript Survey API
This API allows you to interact with the survey container from your website by using JavaScript.
| Function | Description | Example Call | Example Result |
| answers | Returns the answers of the survey | api.fn.answers() | { 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 |
| 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: onNext, onBack, save, changeLanguage, submit | api.events.subscribe(“onNext”, 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 |