1. Home
  2. Developer Resources (EN)
  3. Website Integration
  4. How to embed a Survalyzer report in my website

How to embed a Survalyzer report in my website

!This page is currently in draft mode!

This page explains how you can embed your Survalyzer report into your website. Please pay attention to the data center as well as the various configuration option.

Embedding a report into a common website (without using an angular framework):

Swiss Datacenter

<!DOCTYPE html>
<html>
  <head>
        ...
    <link rel="stylesheet" type="text/css" href="https://survalyzer.survalyzer.swiss/assets/default/bootstrap.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 rel="stylesheet" type="text/css" href="https://survalyzer.survalyzer.swiss/assets/default/rt-theme.css">
        ...
  </head>
  <body>
        ...
	<survalyzer-report id="report" reportid="9ad8392a-0ffb-4d60-9b56-add29e4a185f" page="1" usesidebar="false" placeholder="" tenant="sales" language="en" ng-version="12.2.3">
        ...

<!--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="<script src="https://survalyzer.survalyzer.swiss/assets/survalyzer-report.js"></script>
  </body>
</html>
	

EU Datacenter

<!DOCTYPE html>
<html>
  <head>
        ...

    <link rel="stylesheet" type="text/css" href="https://survalyzer.survalyzer.eu/assets/default/bootstrap.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 rel="stylesheet" type="text/css" href="https://survalyzer.survalyzer.eu/assets/default/rt-theme.css">
        ...
  </head>
  <body>
        ...
	<survalyzer-report id="report" reportid="9ad8392a-0ffb-4d60-9b56-add29e4a185f" page="1" usesidebar="false" placeholder="" tenant="sales" language="en" ng-version="12.2.3">
        ...

<!--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-report.js"></script>
  </body>
</html>

Embedding a report 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-report.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-report.js

EU Datacenter

https://survalyzer.survalyzer.eu/assets/themes/default/rt-theme.min.css
https://survalyzer.survalyzer.eu/assets/survalyzer-report.js

Attributes of the survalyzer-report 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
  • reportid*: The id of the report, you get in the last step of the report wizard, next to the
  • page: the report page if you have a multi page report e.g. 1 for the first page
  • usesidebar: load or hide the report sidebar in case of a multi page report
  • placeholder: filter the data, more about filter can be found here: filter page
  • language: only relevant if the report has multiple languages, then you can decide which languages should be loaded, the language codes can be found here

* this is a mandatory attribute

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

Updated on januari 18, 2022

Was this article helpful?

Related Articles

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