TABLE OF CONTENTS:



The Pop-Up Surveys allows you to create and edit your pop-up survey(s). This type of survey is ideal for collecting feedback inside your application (for example - customer portal) or on your website. You can find it in the menu Campaigns  Surveys  Pop-up Surveys.




 Distribution Tab: Embed Code

The Embed Code is used to integrate your Pop-up Survey into your 3rd-party app or website. This HTML code will need to be added into the HTML of your website. If you want to use it in a mobile app, you can use WebView - CustomerGauge does not provide an SDK for Pop-up Surveys. Depending on your goals, some basic coding knowledge may be required.


If you simply add it into the page, as soon as the page loads - the code will be triggered and the Pop-Up Survey will be shown. It is the responsibility of the host application to control when to trigger the pop-up invitation for its users. There can be certain use cases, for example, a button with an invitation to take a survey and trigger the code only once the button was clicked.


Providing data through parameters

You can pass additional data in the "params" section of the Embed Code to help identify the customer. This additional data can be useful for reporting purposes, as well as Close-the-Loop, and sending automated alerts.


If you're a business user, please align with your frontend team on the data needed. If you're a developer, please align with your business team on the data needed, prior to implementing the Embed Code.

 

The JSON keys of the params object follow the same field labels as set up in your system's Field Settings (please check System Admin System Settings  Field Settings to find out the exact labels to use these differ system to system). Some examples of data that can be passed in the params section: 

  • First Name
  • Last Name
  • Account Name
  • Email
  • Country
  • Segment A-Z (for example "Brand Name")
  • Segment 1-5

Providing a email address allows CustomerGauge to associate the response with an existing Contact. However, we do recommend providing all the relevant data along with the Email address, just like you normally would using an upload.

 

Please note that you should also specify the language that the pop-up should display. A Survey can contain multiple languages and you should indicate which language to display. You can find the list of language codes here. If no (valid) language is provided, the Survey will default to the first language from the language drop-down.



Reporting

Every time the Pop-up Survey is being displayed, a new survey record is created. A new contact gets created, if no contact can be identified with the provided data.

Important: Please note that these contacts are also counted towards your Contact Package numbers.



Examples & Technical implementation

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": "xxx",
"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",
"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: 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({});

}
  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 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>


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


  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 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>
  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.


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>
  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.


More about Survey Suite