1. Home
  2. Application Programming Interface
  3. How to embed a Survalyzer survey in my website

How to embed a Survalyzer survey in my website

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:

Updated on October 26, 2021

Was this article helpful?

Related Articles