Integration can only work with secure connections. Make sure your webpage is using HTTPS before you continue.
Sticky experiments can be embedded into any web page or web application by loading Sticky's JavaScript library and making an appropriate call when you want the experiment to begin. When initiated, the Sticky library will create an iframe to encapsulate itself, guide users to set up their eye tracking environment, run the requested experiment, and then return control to your web page.
Basic integration example
<script src="https://studies-v2.sticky.ai/static/js/integration.js"></script>
<script>
stickyEye.init({
study: 'STUDY_ID',
onSuccess: function (sessionData) {
console.log(sessionData, 'sessionData')
stickyEye.close() // closes the iFrame
},
onFailure: function (error) {
console.log(error, 'error')
stickyEye.close()
}
})
</script>
To start using the Sticky library, you first have to include a script tag with source pointing to https://studies-v2.sticky.ai/static/js/integration.js
After the script has been loaded, you can begin your experiment by calling stickyEye.init() function passing the options object as an argument. Only required property of the options object is study representing the id of the study being conducted. Study ID always starts with the letter Z and you can find it in multiple places in the Sticky platform. If you go to the Fielding tab for your experiment, then click on Redirect Link button, the link provided there includes the study ID:
Even though it is not required, you will most certainly want to use onSuccess and onFailure callbacks that will be executed after the Sticky experiment has been finished, thus giving you the ability to control what will happen after the experiment is over.
API
Our stickyEye object has only two methods - init() and close(). You can call stickyEye.close() inside of success and failure callbacks to close the iFrame and let participants navigate to the next page in survey.
Lets examine all properties available in the options object which is used by stickyEye.init() function.
study
-
Type:
string -
Required:
true -
Usage:
stickyEye.init({
study: 'ZAE4yrCtaONMjDBjooLX8'
})
Only required property. Id of the study to be conducted.
participant
-
Type:
string -
Default:
undefined -
Usage:
stickyEye.init({
study: 'ZAE4yrCtaONMjDBjooLX8',
participant: myApi.getParticipantId() // 'jon-doe-0001'
})
You can use your survey providers API to set participant ID in case you want to connect the ID from your platform with the Sticky platform. When you visit Participant Sessions page on the Sticky website, you can see which Sticky session corresponds with the session from your survey:
locale
-
Type:
string -
Default:
en -
Usage:
stickyEye.init({
study: 'ZAE4yrCtaONMjDBjooLX8',
locale: 'de'
})
Gives you the ability to choose the language of instruction screens based on the language code in BCP-47 tag format. You can find the list of all supported languages here.
onSuccess
-
Type:
function -
Arguments:
{Object} sessionData -
Usage:
stickyEye.init({
study: 'ZAE4yrCtaONMjDBjooLX8',
onSuccess(sessionData) {
// get the participant id from sticky and save it to your platform
const stickyParticipant = sessionData.participant
myApi.addStickyParticipantId(stickyParticipant)
stickyEye.close() // close iFrame
}
})
If you let Sticky generate the participant ID, you may want to use your survey providers API to save it so you can connect sessions from your platform with Sticky. Here you will also decide what to do after Sticky session is completed successfully.
onFailure
-
Type:
function -
Arguments:
{Object} sessionData -
Usage:
stickyEye.init({
study: 'ZAE4yrCtaONMjDBjooLX8',
onFailure(sessionData) {
// option 1 - close iFrame so participants can continue
stickyEye.close()
// option 2 - display failure page
myApi.showFailurePage()
}
})
Receives the same sessionData object as onSuccess callback. If eye-tracking fails you can decide if you want to close the iFrame and let participants continue, or maybe use your survey providers API to display failure page and end the survey.
skipInstructions
-
Type:
boolean -
Default:
false -
Usage:
stickyEye.init({
study: 'ZAE4yrCtaONMjDBjooLX8',
skipInstructions: true
})
Skips participant onboarding (instruction) screens. If you have multiple Sticky studies integrated with your survey, you may want to show instruction screens only on first study and instantiate the rest with skipInstructions: true.
Our UX designers worked long and hard to create effective onboarding screens to help you get the most out of the Sticky platform. You should never disable them if you are running only one study.