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:

<survalyzer-report id="report" reportid="ba861fdf-1051-40c8-b564-44f906f17f35" page="1" usesidebar="false" placeholder="" tenant="sales" language="en"></survalyzer-report>
<script src="https://files.survalyzer.swiss/public/dependency/embedded/release/survalyzer-report.js"></script>

EU:

<survalyzer-report id="report" reportid="ba861fdf-1051-40c8-b564-44f906f17f35" page="1" usesidebar="false" placeholder="" tenant="sales" language="en"></survalyzer-report>
<script src="https://files.survalyzer.eu/public/dependency/embedded/release/survalyzer-report.js"></script>

To obtain a direct embed code for a specific report, you can also open that report in the Survalyzer app and go to the ‘Share Report’ tab. Then, simply click on the code icon to automatically copy it to the ‘clipboard’.

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 this behaviour, the following three elements are required (as well as a script tag containing the path to the relevant data centre, as shown at the beginning of this article):

Swiss Script:

<script src="https://files.survalyzer.swiss/public/dependency/embedded/release/survalyzer-report.js"></script>

EU Script:

<script src="https://files.survalyzer.eu/public/dependency/embedded/release/survalyzer-report.js"></script>

CSS:

.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:500px;
}

HTML

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

Pop-up Script (JS)

function showPopup(){
   var dialog = $("#popup");
   $("#modalContent").html(`<survalyzer-report id="report" reportid="ba861fdf-1051-40c8-b564-44f906f17f35" page="1" usesidebar="false" placeholder="" tenant="sales" language="en"></survalyzer-report>`);
   dialog.modal('show');
}