Embedded Report

Survalyzer offers the possibility to integrate a report into any webpage. The following section is a live example of an embedded survey.

To embed a report into any webpage the following code is required:

<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://survalyzer.survalyzer.eu/assets/default/bootstrap.min.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">
<survalyzer-report id="report" reportid="bc3543a3-5e74-4123-bf51-35c70ca38ac8" page="1" usesidebar="false" placeholder="" tenant="sales" language="en"></survalyzer-report>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://survalyzer.survalyzer.eu/assets/survalyzer-report.js"></script>

Script location

Depending on the datacenter the scripts need to be loaded from different Urls:

Swiss:

<link href="https://survalyzer.survalyzer.swiss/assets/themes/default/rt-theme.min.css" rel="stylesheet" type="text/css">
<link href="https://survalyzer.survalyzer.swiss/assets/default/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://survalyzer.survalyzer.swiss/assets/survalyzer-report.js"></script>

EU:

<link href="https://survalyzer.survalyzer.eu/assets/themes/default/rt-theme.min.css" rel="stylesheet" type="text/css">
<link href="https://survalyzer.survalyzer.eu/assets/default/bootstrap.min.css" rel="stylesheet" type="text/css" >
<script src="https://survalyzer.survalyzer.eu/assets/survalyzer-report.js"></script>

Report Tag parameters

The following parameters could be specified as attributes on the survalyzer-report 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

Report API

This API allows to interact with the report container using JavaScript.

Embedding the Report into a popup

To implement such a behavior the following 3 elements are needed:

.da-page-container:not(.da-embedded):not(.da-top-nav) .da-page-content, .da-page-container:not(.da-embedded):not(.da-top-nav) .da-sidebar-content {
 height:600px;
}

<button onclick="javascript:showPopup()">Show Report</button>
<div class="modal" id="popup" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Survey Results</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="modalContent" class="modal-body pt-page-content"></div>
    </div>
  </div>
</div>

function showPopup(){
   var dialog = $("#popup");
   $("#modalContent").html(`<survalyzer-report id="report" reportid="bc3543a3-5e74-4123-bf51-35c70ca38ac8" page="1" usesidebar="false" placeholder="" tenant="sales" language="en"></survalyzer-report>`);
   dialog.modal('show');
}