Outils spécifiques
Outils en Angular
Angular lors de son initialisation remplace intégralement le contenu du body. Le snippet d'intégration doit être légèrement modifié afin de s'adapter à cette situation :
<!DOCTYPE html>
<html>
<head>
<!-- HOST HTML HEAD HERE -->
<!-- LEMONLEARNING INCLUSION IN THE HTML HEAD -->
<link href="https://static.lemonlearning.com/player/bundle.css" rel="stylesheet" type="text/css" />
<script src="https://static.lemonlearning.com/player/bundle.js" async defer id="lemonlearning-player-embed"></script>
<!-- DAP CUSTOM BOOTSTRAP -->
<script type="text/javascript">
Promise.all([
new Promise((resolve) => {
//Legacy, the DAP needs LemonLearningReady as a global leak
window.LemonLearningReady = (player) => {
//Reuse the LemonLearningReady required global to store the player instance
LemonLearningReady.player = player;
resolve(1)
}
}),
//Wait for the custom LEMONLEARNING_HOST_READY event, triggered from angular
new Promise((resolve) => {
window.document.addEventListener('LEMONLEARNING_HOST_READY', (e) => {
//See https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail
resolve(e.detail) }, false);
})
])
//As soon as LemonLearningReady is called and LEMONLEARNING_HOST_READY customevent is catched, start the player
.then((values) => {
if (LemonLearningReady.player) {
LemonLearningReady.player.set({
projectKey: '[PROJECT KEY]',
user: {
name: values[1].name,
email: values[1].email,
profiles: [0],
tags: [{
category: "Country",
values: [values[1].country]
}]
}
}).start()
}
});
</script>
</head>
<body>
<!-- ... -->
Lorque le custom event LEMONLEARNING_HOST_READY est attrapé, la promesse reçoit les données de l'utilisateur via event.detail. On peut alors configurer une authentification automatique standard. Le site hôte doit dispatcher un custom event :
//somewhere within the host codebase, when the app is ready
window.document.dispatchEvent(new CustomEvent('LEMONLEARNING_HOST_READY', {
detail: {
name: "John Doe",
email: "john.doe@gmail.com",
country: "fr"
}
}));
