1. Home
  2. Embedded Survey

Embedded Survey

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

Necessary Scripts & Styles

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

Switzerland:

<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/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-survey surveyhash="elkxsnkosn" tenant="education"></survalyzer-survey>
<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://survalyzerch.survalyzer.swiss/assets/survalyzer-survey.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/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-survey surveyhash="elkxsnkosn" tenant="education"></survalyzer-survey>
<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://survalyzer.survalyzer.eu/assets/survalyzer-survey.js"></script>

Survey Tag parameters

The following parameters could be specified as attributes on the survalyzer-survey tag:

  • tenant* (The subdomain of the admin URL needs to be provided)
  • surveyHash* (The first segment of the interview URL needs to be provided)
  • interviewHash (The second segment of the interview URL could be provided for personal links)
  • interviewId (The guid of the interview to load a specific interview)
  • language (The desired language of the survey could be provided)
  • urlVariables (URL parameters like urlVar01 – urlVar20 could be provided as attributes)
  • token (A JWT panel member could be provided to prevent a second login in authenticated environments like portals)
  • scrollToTop (if not set, by default ‘true’. Controls the auto-scroll behavior after clicking ‘Next’ or ‘Back’. On some occasions the scroll to top on page switch creates a weird experience, depending on the position the survey is embedded. If set to false, the survey does not automatically scroll on page switch)
  • lazyInterview=”true” (Interviews are not created with loading the survey but only on the next/submit button. This is very important for frequented pages where only a fraction of the audience interacts with the survey)

* this is a mandatory attribute

Survey API

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

FunctionDescriptionExample CallExample Result
answersGets or sets the answers of the surveyapi.fn.answers()
api.fn.answers({q1: “Test”, q2: 1});
{ q1: "Test", q2: 1}
changeLanguageChanges the survey language to the given languageapi.fn.changeLanguage(“de”)undefined
getCurrentLanguageGets the current survey languageapi.fn.getCurrentLanguage()“de”
goNextMoves survey to the next pageapi.fn.goNext()object
goBackMoves the survey to the previous pageapi.fn.goBack()object
submitCompletes the interviewapi.fn.submit()object
saveSaves answers without moving to another pageapi.fn.save()object
validateValidates the answers without moving to another pageapi.fn.validate(){ errors: []}
subscribeSubscribes for one of these events: next, back, completed, redirect, restarted, startedOrContinued, validationFailed, validationError, languageSwitchapi.events.subscribe(“next”, myHandler)undefined
unsubscribeUnsubscribes an event handlerapi.events.unsubscribe(myHandler);undefined
getPagesGets all pages of the surveyapi.fn.getPages()object
getCurrentPageIndexGets the index of the current pageapi.fn.getCurrentPageIndex()1
getCurrentPageGets the current page object out of the page collectionapi.fn.getCurrentPage()object
getSectionsGets an array with all sections containing id, name, number of questionsapi.fn.getSections()[{ id: 1, name: “section1”, questions: 2 }]
goToSectionNavigates the survey to the provided section without respecting filters and not executing value assignmentsapi.fn.goToSection(2)object

Embedding the Survey into a popup

In the right bottom corner the Popup with the question “Would you like to rate our website?” is shown.

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

<button onclick="javascript:showPopup()">Show Popup</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">How do you rate this article?</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"></div>
    </div>
  </div>
</div>
function showPopup(){
   var dialog = $("#popup");
   $("#modalContent").html(`<survalyzer-survey surveyhash="djclovxsla" scrollToTop="False" tenant="education" language="en"></survalyzer-survey>`);
   dialog.modal('show');
}

Optional Javascript Snippet

The following script is optional and used if the pop up should close 10 seconds after the respondent submits the survey answers.

setTimeout(function () {
  api.events.subscribe('completed', function () {
    setTimeout(function () {
      document.getElementById('wrapper').remove();
    }, 10 * 1000);
  });
}, 1000);
Updated on February 20, 2024

Was this article helpful?

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