Website Integration part II

This article explains how a survey can be integrated as an overlaying pop up that becomes visible after XX seconds your page has been loaded. This article is made for users familiar with HTML and CSS.

Please read the following article before you try out the code snippet below:
How to embed a Survalyzer survey into my website

The solution contains of 3 mandatory parts (CSS, JS and HTML) and an optional JS script snippet.

CSS Snippet

The following CSS snippet defines the layout of the pop up and the number of seconds the pop up should load. In the row (animation: cssAnimation 0s 1s forwards;) replace the 1s with the desired number of seconds the pop up should beccome visible.

<style>
  #wrapper:not(.open) {
    display:none;
  }
  #wrapper.open #showMe,
  #smallwrapper .showMe {
    animation: cssAnimation 0s 1s forwards;
    visibility: hidden;
    position: fixed;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
    z-index: 100000000;
    overflow: auto;
    border: 2px grey solid;	
    background-color: #fff;
  }
  .text-center {
    text-align: center;
  }
  #smallwrapper .showMe {
    width: 300px;
    height: 200px;
    top: auto;
    left: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    padding: 20px;
  }
  #wrapper.open #backdrop {
    animation: cssAnimation 0s 1s forwards;
    visibility: hidden;
    background-color: grey;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000000;
    opacity:0.3;
  }
  #wrapper.open #closeButton,
  #smallwrapper .closeButton {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 110000000;
  }
 
  @keyframes cssAnimation {
    to {
      visibility: visible;
    }
  }
 </style>

HTML Snippet

The following HTML snippet shows the html structure and the integration of the <survalyzer-survey> tag with a survey hash and the small structure for the initial question whether the website visitor wants to answer a survey.

	<div id="wrapper">
		<div id="backdrop"></div>
		<div id="showMe">
			<button id="closeButton" onclick="document.getElementById('wrapper').remove()">close</button>
			<survalyzer-survey surveyhash="pybqsknejg" tenant="sales"></survalyzer-survey>
		</div> 
	</div>
	<div id="smallwrapper">
		<div class="showMe text-center">
			Would you like to rate our website?<br /><br />
                        <p><button onclick="javascript:startSurvey();">Yes</button> <button onclick="document.getElementById('smallwrapper').remove()">No</button></p>
		</div> 
	</div>

Needed Javascript Snippet

This javascript is needed to open the survey from the small modal:

<script>
function startSurvey(){
  var element = document.getElementById("wrapper");
  element.classList.add("open");
  document.getElementById('smallwrapper').remove();
}
</script>

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.

<script>
      setTimeout(function () {
        api.events.subscribe('completed', function () {
          setTimeout(function () {
            document.getElementById('wrapper').remove();
          }, 10 * 1000);
        });
      }, 1000);
 </script>
Would you like to rate our website?

Updated on Februar 15, 2021

Was this article helpful?

Related Articles