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

How to embed a Survalyzer survey into my website

1. Current Survalyzer version

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>

[yoursurveylink] must be replaced with the survey link
adjust the width and the height according to your needs in the website

2. Survalyzer Next Generation version

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

Embed a survey into a common website (without the use of angular framework):

<!DOCTYPE html>
<html>
  <head>
        ...
	<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/20.1.7/css/dx.common.css" />
	<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.7/css/dx.light.css" />
	<link href="https://survalyzer.survalyzer.eu/assets/themes/default/rt-theme.min.css" rel="stylesheet" type="text/css" />
<!-- please replace in previous tag: https://survalyzer.survalyzer.eu with https://survalyzer.survalyzer.siwss if your data are hosted in Switzerland -- >
        ...
  </head>
  <body>
        ...
	<survalyzer-survey surveyhash="enter the survey hash here" interviewhash="enter the interview hash" tenant="enter your subdomain here"></survalyzer-survey>
       ...
<!-- the interviewhash is optional and it is used if you have generated individual links and want to access them in scope of a authenticated mode -->
<!--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>
<!-- please replace in previous tag: https://survalyzer.survalyzer.eu with https://survalyzer.survalyzer.swiss if your data are hosted in Switzerland -- >

        ...
  </body>
</html>
	

Embed 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 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.

If everything is embedded correctly the result should look like this:



Updated on oktober 19, 2020

Was this article helpful?

Related Articles