Survalyzer Survey Embedding – standard process

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

What do I need to do to embed a Survalyzer survey on my website?

Adding a Survalyzer survey to your website has never been easier! What do you need to do? Simply go to the selected survey in your Survalyzer workspace and click on the ‘Distribute’ button. In this section, on the right-hand side of the screen, you will find the code sharing icon, as shown in the screenshot below.

Then, simply code the script and embed it into the desired location on your website!

If your tenant is located in a EU data center, the sample code will look as follows:

<survalyzer-survey surveyhash="laxafzffjcnmw" language="en" tenant="survalyzer"></survalyzer-survey>
<script src="https://files.survalyzer.eu/public/dependency/embedded/release/survalyzer-survey.js"></script>

Below you will also find an example for the Swiss data center.

<survalyzer-survey surveyhash="laxafzffjcnmw" language="en" tenant="survalyzer"></survalyzer-survey>
<script src="https://files.survalyzer.swiss/public/dependency/embedded/release/survalyzer-survey.js"></script>

This script allows you to embed a survey anywhere on your website. The placement of the ‘survalyzer-survey’ tag determines the location of the survey. So you can place the survey anywhere on your website.

The code shown above also allows you to add additional parameters such as urlvar (urlvar01 – urlvar20). You can find an example of how to add them below:

<survalyzer-survey surveyhash="laxafzffjcnmw" language="en" tenant="survalyzer" urlvar01="1" urlvar02="text"></survalyzer-survey>
<script src="https://files.survalyzer.eu/public/dependency/embedded/release/survalyzer-survey.js"></script>

Please note that this is not the only option for adding a Survalyzer survey to your website. We also offer advances synchronisation of surveys with your website using the inMoment plugin. Check out how to enable the inMoment extension in the Survalyzer!

Note: Embedding surveys in an iframe is not supported, as Survalyzer sets security headers (X-Frame-Options) to prevent clickjacking and ensure data protection.

Survey Tag parameters

The generated script automatically adds HTML code with the ‘survalyzer-survey’ tag to the code of your website, which is responsible for displaying the survey.

You can also extend the script part on your website – for example, by adding the ‘urlvar’ parameters, as mentioned above. All the supported parameters are listed below:

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

– urlVariables (URL parameters like urlVar01 – urlVar20 could be provided as attributes)

– 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 – in the case of a generated script, the value ‘true’ is the default).

Additional options related to embedding the Survalyzer survey

Thanks to the new way of embedding surveys, you can also use additional scripts to control how the survey is displayed. One example is displaying a survey based on which element on the page is clicked.

In addition, you can also use features that allow you, for example, to jump directly between sections in the survey.

An example of such a solution – incorporating both control over display based on list items/buttons and the display of a list of sections – can be found below.

Of course, you can also create your own script to control the display of the survalyzer-survey tag.

<div id="categories">
<ul>
<li><a href="javascript:loadSurvey('[here you add the surveyhash of the Survey1]')">Survey 1</a></li>
<li><a href="javascript:loadSurvey('[here you add the surveyhash of the Survey2]')">Survey 2</a></li>
</ul>
</div>
  
<div id="SectionJumper"></div>
<div id="surveyContainer"></div>
<script>  
const sectionJumperContainer = document.getElementById("SectionJumper");
const surveyContainer = document.getElementById("surveyContainer");
function buildSectionLinks() {
	sectionJumperContainer.innerHTML = '';
	var sections = api.fn.getSections();
	sections.forEach(section => {
	sectionJumperContainer.insertAdjacentHTML("beforeend", "<a href='javascript:api.fn.goToSection("+section.id+")'>"+ section.name +"</a> ");
});
}
function loadSurvey(hash) {
sectionJumperContainer.innerHTML = "";
surveyContainer.innerHTML = "<survalyzer-survey surveyhash='" + hash + "' language='en' tenant='survalyzer' lazyInterview='true'></survalyzer-survey>";
	
const surveyElement = surveyContainer.querySelector("survalyzer-survey");
surveyElement.addEventListener("initialized", (event) => {
   buildSectionLinks();
});
} 
</script>

Survalyzer survey – available API commands

The survey API allows to interact with the survey container using JavaScript. The table below lists the available functions and example of their use, which you can apply in your project.