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 common website (without using an angular framework):
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)
- language (The desired language of the survey could be provided)
- urlVariables (URL parameters like urlVar01 – urlVar20 could be provided)
- token (A JWT panel member could be provided to prevent a second login in authenticated environments like portals)
* this is a mandatory attribute
If everything is embedded correctly, the result should look like this: