1. Home
  2. Embedded Report

Embedded Report

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

Necessary Scripts & Styles

To embed a report into any webpage the following code is required.
Depending on the datacenter the scripts need to be loaded from different Urls.

Swiss:

<link rel="stylesheet" type="text/css" href="https://files.survalyzer.swiss/public/dependency/fontawesome-free/v5/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="https://files.survalyzer.swiss/public/dependency/styleguide/latest/assets/default/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://files.survalyzer.swiss/public/dependency/devextreme/latest/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://files.survalyzer.swiss/public/dependency/styleguide/latest/assets/default/rt-theme.min.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://files.survalyzer.swiss/public/dependency/jquery/latest/jquery.min.js"></script>
<script src="https://files.survalyzer.swiss/public/dependency/bootstrap/v4/js/bootstrap.bundle.min.js"></script>
<script src="https://files.survalyzer.swiss/public/dependency/devextreme/latest/js/dx.all.js"></script>
<script src="https://survalyzerch.survalyzer.swiss/assets/survalyzer-report.js"></script>

EU:

<link rel="stylesheet" type="text/css" href="https://files.survalyzer.eu/public/dependency/fontawesome-free/v5/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="https://files.survalyzer.eu/public/dependency/styleguide/latest/assets/default/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://files.survalyzer.eu/public/dependency/devextreme/latest/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://files.survalyzer.eu/public/dependency/styleguide/latest/assets/default/rt-theme.min.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://files.survalyzer.eu/public/dependency/jquery/latest/jquery.min.js"></script>
<script src="https://files.survalyzer.eu/public/dependency/bootstrap/v4/js/bootstrap.bundle.min.js"></script>
<script src="https://files.survalyzer.eu/public/dependency/devextreme/latest/js/dx.all.js"></script>
<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.

DescriptionExample CallExample Result
Force report to recalculateapi.report.resetDataSet();undefined

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');
}

Updated on February 20, 2024

Was this article helpful?

Need Support?
Can't find the answer you're looking for?
Contact Support