1. Home
  2. Developer Resources
  3. Website Integration
  4. How to embed a Survalyzer survey in my website

How to embed a Survalyzer survey in my website

Example of an correctly embedded survey

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.

An integrated survey could look like here:

This is the corresponding code snippet of that 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>

Embedding Scripts to 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 Script

<!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 Script

<!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

Parametrisation of the survalyzer-survey 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)
  • 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

Parametrisation sample: Passing Department and Website to a survey

In many cases you want to add additional information to the survey in order to have those data available in your survey results. Therefore you can pass any desired data in the attributes 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.

FunctionDescriptionExample CallExample Result
answersGets or sets the answers of the surveyapi.fn.answers()
api.fn.answers({q1: “Test”, q2: 1});
{ q1: "Test", q2: 1}
changeLanguageChanges the survey language to the given languageapi.fn.changeLanguage(“de”)undefined
getCurrentLanguageGets the current survey languageapi.fn.getCurrentLanguage()“de”
goNextMoves survey to the next pageapi.fn.goNext()object
goBackMoves the survey to the previous pageapi.fn.goBack()object
saveSaves answers without moving to another pageapi.fn.save()object
validateValidates the answers without moving to another pageapi.fn.validate(){ errors: []}
subscribeSubscribes for one of these events: next, back, completed, redirect, restarted, startedOrContinued, validationFailed, validationError, languageSwitchapi.events.subscribe(“next”, myHandler)undefined
unsubscribeUnsubscribes an event handlerapi.events.unsubscribe(myHandler);undefined
getPagesGets all pages of the surveyapi.fn.getPages()object
getCurrentPageIndexGets the index of the current pageapi.fn.getCurrentPageIndex()1
getCurrentPageGets the current page object out of the page collectionapi.fn.getCurrentPage()object
Updated on January 16, 2023

Was this article helpful?

Related Articles

Need Support?
Please login to your Survalyzer account and use the "Create Support Request" form.
Login to Survalyzer