Table of Contents
- Embedding a survey into a non-Angular website
- Embedding a survey into an Angular website
- Parameters of the <survalyzer-survey> html tag
- Example of an correctly embedded survey
- JavaScript Survey API
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
Check with your our business user in which data center your survalyzer accont is located, because you need to embed script tags depending on the data center location
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
<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://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css">
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/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.4.1.min.js"></script>
<script src="https://survalyzer.survalyzer.eu/assets/survalyzer-survey.js"></script>
Use case: Passing information to a survey
In many cases you want to parametrise the link with information, therefore you can pass any desired data in the attribute urlVar01 to urlVar20. See the following example:
<survalyzer-survey surveyhash="elkxsnkosn" tenant="education" urlVar01="DepartementA" urlVar02="SiteA" ></survalyzer-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 |