Understanding this requires in-depth knowledge and experience of Arcadier's APIs, Arcadier's Developer Resources, and Appcues Developer Resources
This plugin allows your AppCues account to be connected to your Arcadier marketplace. After setting up your your account on Appcues, the JS script of this plugin will send the user GUID of the logged in user to AppCues's backend and display the correct flow specified by you.
Source code running on Admin Portal: None.
Source code running on Buyer/Seller pages: user -> scripts -> scripts.js
Line 3 in scripts.js is what identifies allows Arcadier to identify you AppCues account.
As soon as the page is ready, the script appends the following script to the page head:
$(document).ready(function(){
var appcues_script = document.createElement("script");
appcues_script.src = "//fast.appcues.com/88888.js"; //this number is an identifier given to you by AppCues
document.head.appendChild(appcues_script);
});Next, the function Appcues.page(); needs to be run. This function is defined by the script added to the page previously.
Because of the sequence of loading of plugin scripts on Arcadier pages, Appcues.page(); needs to run strictly after all Arcadier's own scripts and page contents are loaded. So, it is made to run in a setInterval() function which runs only once.
5 seconds is chosen arbritrarily here to make sure everything has had time to load.
$(document).ready(function(){
//include AppCues script in the page
var appcues_script = document.createElement("script");
appcues_script.src = "//fast.appcues.com/88888.js";
document.head.appendChild(appcues_script);
//start an interval that will only run 5 sec after the previous line is executed
var interval = setInterval(function(){
//initialises AppCues
Appcues.page();
//stops the setInterval
clearInterval(interval);
}, 5000);
});Next, the identity of the current user needs to be identified and sent to AppCues, this is done by calling the User API:
$(document).ready(function(){
//include AppCues script in the page
var appcues_script = document.createElement("script");
appcues_script.src = "//fast.appcues.com/88888.js";
document.head.appendChild(appcues_script);
//start an interval that will only run 5 sec after the previous line is executed
var interval = setInterval(function(){
//initialises AppCues
Appcues.page();
//get User GUID from the page HTML
var userGuid = $("#userGuid").val();
//get user authentication token from cookie
var token = getCookie('webapitoken');
//Arcadier API call
var settings = {
"url": "/api/v2/users/" + userGuid + "?includes=addresses&includes=UserLogins",
"method": "GET",
"headers": {
"Authorization": "Bearer " + token
}
};
$.ajax(settings).done(function(response){
//handle API response to send to AppCues
}
//stops the setInterval
clearInterval(interval);
}, 5000);
function getCookie(name){
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}
});Next the response from Arcadier API is parsed and the information required by AppCues is sent to AppCues using window.Appcues.identify()
$(document).ready(function(){
//include AppCues script in the page
var appcues_script = document.createElement("script");
appcues_script.src = "//fast.appcues.com/88888.js";
document.head.appendChild(appcues_script);
//start an interval that will only run 5 sec after the previous line is executed
var interval = setInterval(function(){
//initialises AppCues
Appcues.page();
//get User GUID from the page HTML
var userGuid = $("#userGuid").val();
//get user authentication token from cookie
var token = getCookie('webapitoken');
//Arcadier API call
var settings = {
"url": "/api/v2/users/" + userGuid + "?includes=addresses&includes=UserLogins",
"method": "GET",
"headers": {
"Authorization": "Bearer " + token
}
};
$.ajax(settings).done(function(response){
window.Appcues.identify(
response.UserLogins[0].ProviderKey,
{
email: response.Email,
firstName: response.FirstName,
lastName: response.LastName,
birthdate: response.DOB,
suburb: response.Addresses[0].City, //Addresses[0] needs to be emphasized here because in case of many addresses, this line of code will only take the first address
state: response.Addresses[0].State
}
);
});
//stops the setInterval
clearInterval(interval);
}, 5000);
function getCookie(name){
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}
});That's all the plugin needs to function.
Any futher customisation is done on AppCues's dashboard like:
- Which user/groups of users see what content
- Which page URL will trigger which AppCues flow
To test if AppCues was properly installed and connected to Arcadier, just add ?hey_appcues to any URL like so:
https://your-marketplace.sandbox.arcadier.io/user/marketplace/dashboard?hey_appcues
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent