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.
Description | Example Call | Example Result |
Force report to recalculate | api.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">×</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'); }