Introduction

This page holds some examples to help you get started and get inspired to embed your pop-up survey into your website or app. To use these snippets, some technical knowledge is required by the person embedding it.


Understanding the Embed Code

To work with these examples, you'll need to understand how to work with the different portions of the embed code. The embed code comes as a single code you can copy, but will need to be split up to work in the various examples.


<!--Survey Embed Code-->
<script type="text/javascript" src="https://survey.eu.customergauge.com/pop-up/pop-up.iife.js"></script>
<script>
CG.init({
  "surveyId": "77cdf3df-96b9-4b5d-a0bc-8ce3b9f8da90",
  "tenant": "customergauge",
  "region": "eu",
  "language": "en_GB",
  "params": {
    "Email": ""
  }
})
</script>
<!--Survey Embed Code-->


Loading the library

The first portion is the library that does all the work to control the pop-up. This should always be loaded before the pop-up is initiated.


<script type="text/javascript" src="https://survey.eu.customergauge.com/pop-up/pop-up.iife.js"></script>


Triggering the pop-up

The second portion is the JavaScript initialisation code that actually triggers the pop-up. As part of this code, additional information can be passed. In the examples, we'll refer to this section as "CG.init({});".


CG.init({
"surveyId": "xxx",
"tenant": "your-tenant-name",
"region": "eu",
"language": "en_GB",
"params": {
"Email": ""
}
})
  1. Replace "language" with the language code that you would like your survey to appear in. This language has to have been set up in your survey.
  2. In the params you can pass additional information, which will be stored as part of the Survey Record, which can then be used in reporting. The params is a single dimension JSON object consisting of key/value pairs.


Example 1: Display only once (Cookie)

This example allows you to show the pop-up survey when it hasn't been displayed before for a certain period of time.


Preparation code

This code snippet needs to be loaded before the survey gets initiated.


<script type="text/javascript">
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
</script>


Initialising the pop-up survey

if( ! getCookie( "cgPopupSurveyCookie" ) ) {

let popupSurveyExpirationDays = 30;
setCookie( "cgPopupSurveyCookie", "true", popupSurveyExpirationDays );

CG.init({});

}
  1. Replace the value "30" with the number of days the pop-up survey should be suppressed.
  2. Replace "CG.init({});" with the initialisation code applicable to your use case.


Example 2: Show survey upon button click

This example allows you to make the pop-up survey appear when a button is clicked.


The button

This is the HTML code for the button that can be clicked to make the pop-up appear. You will need to change it accordingly to add your own styling to it. If you choose to change the id attribute, this will need to be adjusted accordingly in the JavaScript code as well.


<button id="showPopupSurvey" onclick="popupSurvey()">Take Survey</button>


The JavaScript code

<script type="text/javascript">
function popupSurvey() {

CG.init({});

document.getElementById( 'showPopupSurvey' ).style.display = 'none';

}
</script>


  1. Add the button in your HTML code and apply any styling.
  2. Add the JavaScript code alongside the rest of your JavaScript code.
  3. Replace "CG.init({});" with the initialisation code applicable to your use case.


Example 3: Random chance to show survey

This example allows you to show the survey based on a random chance. This is useful if you want to make the survey appear to a random subset of your users.


<script type="text/javascript">
let popupSamplePercentage = 10; // Percentage chance of pop-up appearing
let popupRandomizer = Math.floor(Math.random() * 100 );
if( popupRandomizer < popupSamplePercentage ) {
CG.init({});
}
</script>


  1. On the first JavaScript row, replace "10" with the percentage chance of the pop-up survey appearing.
  2. Replace "CG.init({});" with the initialisation code applicable to your use case.


Example 4: Delay showing the survey for X seconds

This example allows you to make the pop-up appear after a certain number of seconds. This is useful if the content of your page takes a while to load, or need to wait for some data to be pulled in to pass as part of the params.


<script type="text/javascript">
let popupDelay = 5; // The number of seconds of delay
setTimeout(function() {
CG.init({});
}, popupDelay * 1000);
</script>
  1. Add the JavaScript code alongside the rest of your javascript.
  2. Replace the value "5" with the number of seconds the pop-up should be delayed.
  3. Replace "CG.init({});" with the initialisation code applicable to your use case.