Check Code Loaded First

Any site where you want to collect feedback using Digital requires the Digital embed.js tag deployed. The embed.js tag is bootstrap code and it subsequently loads another JavaScript file with the name generic_xxxxxx.js where xxxxxx is a random number generated by the system each time your script is updated. The generic_xxxxxx.js script contains all the core functions and APIs of the Digital system.

The functions defined all begin with KAMPYLE_. The name KAMPYLE is left over from the original name of the company before they were acquired by Medallia.

There are instances when you want to know that the scripts are loaded and available. This can be achieved by simply checking whether one of the main functions is available.

//if the KAMPYLE_ONSITE_SDK function is available
if (window.KAMPYLE_ONSITE_SDK) {
// add your own code or functions here
myCustomCode(); 
} else {
// add a listener for the event neb_OnsiteLoaded which will occur once all the
// Digital code has been executed by the browser
window.addEventListener('neb_OnsiteLoaded', myCustomCode);
}

Before you load the form, your code should check that the Digital embed code has loaded by:

1. checking the existence of the KAMPYLE_ONSITE_SDK function
2. listening for the neb_OnsiteLoaded event, which fires on successful loading of the KAMPYLE_ONSITE_SDK API components.

Check code loaded example:

<script>if (window.KAMPYLE_ONSITE_SDK) {
//Check Digital code has been loaded
 onsiteLoaded();
//your custom function } else {
// On the neb_OnsiteLoaded event call onsiteLoaded function 
 window.addEventListener('neb_OnsiteLoaded', onsiteLoaded);
} 
</script>

Load the Form

When the check for Digital embed code is successful, you can use the loadForm API:

KAMPYLE_ONSITE_SDK.loadForm(FormId)

return values: true if the form has been published and can be loaded

false if form cannot be loaded

The FormId is displayed in the Form page of the Digital Command Center.

In the following JavaScript example, an event listener is added for the neb_OnsiteLoaded event. The event listener then calls the onsiteLoaded function to load the form using KAMPYLE_ONSITE_SDK.loadForm and also determine if the form can be loaded before displaying form ID 281.

loadForm Example:

<script>if (window.KAMPYLE_ONSITE_SDK) {
//Check Digital code has been loaded 
 onsiteLoaded();
 //your custom function
 } else {
 // On the neb_OnsiteLoaded event call onsiteLoaded function 
 window.addEventListener('neb_OnsiteLoaded', onsiteLoaded);
}

function onsiteLoaded(){
// load the form and store status (true/false) in neb_status
 var neb_status = KAMPYLE_ONSITE_SDK.loadForm(281);
 if (neb_status === true){
 // if form is loaded then decide what to do  
 // your code goes here
 }}
</script>

Display Form

Once the Digital code is loaded and the form can be loaded (see Check Code Loaded First and Load the Form), call the showForm API to display the form using the following syntax:

KAMPYLE_ONSITE_SDK.showForm(FormId)

return values: true if form is displayed

false if form cannot be displayed

The FormId is displayed in the Form page of the Digital Command Center.

In the following HTML and JavaScript example, clicking the "Give Feedback" button calls the KAMPYLE_ONSITE_SDK.showForm function to display form ID 281. The HTML button has the display attribute set to none so it cannot be seen until the check that KAMPYLE_ONSITE_SDK is loaded succeeds. The onsiteLoaded function checks if the form with ID 281 can be loaded and stores the result in the neb_status variable, which is used to set the display attribute to show the HTML button if FormID 281 is available.

showForm Example:

<button id="mdFormButton" class="display: none;" onclick="KAMPYLE_ONSITE_SDK.showForm(281);">Give Feedback</button>
<script>if (window.KAMPYLE_ONSITE_SDK) {
//If Digital code has been loaded 
 onsiteLoaded(); //your custom function
} else {
// On the neb_OnsiteLoaded event, call onsiteLoaded function
 window.addEventListener('neb_OnsiteLoaded', onsiteLoaded);
}

function onsiteLoaded(){
// load the form and store status (true/false) in neb_status
var neb_status = KAMPYLE_ONSITE_SDK.loadForm(281);
// If form is loaded
if (neb_status === true){
 // set CSS attribute display to inherit so button can be seen
 document.getElementById("mdFormButton").style.display = "inherit"
 }
}
</script>

This is just one example of using the Digital embed code to control how Digital is triggered.