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

How to embed a Survalyzer survey into my website

Iframe approach (old)

The following code snippets can be used to embed a survey into your website using an iframe:

<iframe src="https://[yoursurveylink]" allowtransparency="true" width="100%" height="800" frameborder="0" scrolling="no"></iframe>
  • Replace [yoursurveylink] with the survey link
  • Adjust the width and the height according to your needs

Iframe less (new)

The following code snippets can be used to embed a survey into your website without using an iframe:

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

To get the latest version of the two Survalyzer files, please reach out to support@survalyzer.com.
At a later stage, Survalyzer will also provide a public NPM package.

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 February 22, 2021

Was this article helpful?

Related Articles