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": ""
}
})- 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.
- 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: Listening to Survey Initialization Events
This example allows you to do something when the survey has been successfully initialized. This is particularly useful in combination with the other examples, such as setting a cookie, or keeping count of how many times the survey has been presented.
<script type="text/javascript">
CG.init({});
document.addEventListener("cg_survey_started", function(event) {
// Do something
});
</script>Example 2: Listening to Survey Complete Events
This example allows you to do something when the survey has been completed. This is particularly useful if you want to set a cookie once someone completes the survey, and use that to stop presenting the pop-up survey.
<script type="text/javascript">
CG.init({});
document.addEventListener("cg_survey_finished", function(event) {
// Do something
});
</script>Example 3: 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({});
}- Replace the value "30" with the number of days the pop-up survey should be suppressed.
- Replace "CG.init({});" with the initialisation code applicable to your use case.
Example 4: 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>
- Add the button in your HTML code and apply any styling.
- Add the JavaScript code alongside the rest of your JavaScript code.
- Replace "CG.init({});" with the initialisation code applicable to your use case.
Example 5: 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>
- On the first JavaScript row, replace "10" with the percentage chance of the pop-up survey appearing.
- Replace "CG.init({});" with the initialisation code applicable to your use case.
Example 6: 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>
- Add the JavaScript code alongside the rest of your javascript.
- Replace the value "5" with the number of seconds the pop-up should be delayed.
- Replace "CG.init({});" with the initialisation code applicable to your use case.
Example 7: Centralised validation
This example allows you to control validation from a single place, rather than in-line if statements. This allows you to keep an easy overview to understand which criteria need to be met in order to make the pop-up survey appear.
Some examples that we've seen our customers use:
- Show a pop-up survey at the end of an order;
- But don't present a pop-up if the order was of low value;
- And don't present a pop-up if a survey was presented during a recent previous order.
By having a centralised function where you verify if a user should receive a pop-up survey you keep a quick overview of the criteria, and can more easily combine multiple conditions.
<script type="text/javascript">
function shouldReceivePopupSurvey( data ) {
// replace the data parameter with what you need to check
if( ! data.shouldReceiveSurvey ) { return false; }
if( ! data.daysSinceLastPurchase < 30 ) { return false; }
return true;
}
if( shouldReceivePopupSurvey( data ) ) {
CG.init({});
}
</script>- Add the JavaScript code alongside the rest of your javascript.
- Replace the value "5" with the number of seconds the pop-up should be delayed.
- Replace "CG.init({});" with the initialisation code applicable to your use case.