Embedded Files
Intégration du snippet
Intégration du snippet
Authentification automatique
Authentification automatique
<script type="text/javascript">
function LemonLearningReady(player) {
player.set({
projectKey: '...',
namespace: '...',
user: {
name: '...',
email: '...',
profiles: [id profil ou 0],
tags: [{
category: "Pays",
values: ["variable permettant de récupérer la valeur Pays de l'utilisateur connecté"]
}, {
category: "Role",
values: ["variable permettant de récupérer la valeur Role de l'utilisateur connecté"]
}]
}
}).start()
}
</script>
projectKey vous sera fournie par votre Solutions Engineer
namespace permet d'identifier textuellement le projet pour éviter les conflits entre intégrations
user.name et user.email correspondent aux variables pour le nom et l'e-mail de l'utilisateur dans votre outil
profiles vous sera fourni par votre Solutions Engineer
tags correspond à des tags qui peuvent être envoyés à Lemon Learning pour faire de la différenciation pédagogique.
Authentification automatique - Angular
Authentification automatique - 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"
}
}));
projectKey vous sera fournie par votre Solutions Engineer
namespace permet d'identifier textuellement le projet pour éviter les conflits entre intégrations
user.name et user.email correspondent aux variables pour le nom et l'e-mail de l'utilisateur dans votre outil
profiles vous sera fourni par votre Solutions Engineer
tags correspond à des tags qui peuvent être envoyés à Lemon Learning pour faire de la différenciation pédagogique.
Authentification par SSO
Authentification par SSO
<script type="text/javascript">
function LemonLearningReady(player) {
player.set({
companyKey: '...',
ssoId: '...'
}).start();
}
</script>
companyKey vous sera fournie par votre Solutions Engineer
ssoId vous sera fourni par votre Solution Engineer
Authentification anonyme
Authentification anonyme
<script type="text/javascript">
function LemonLearningReady(player) {
player.set({
projectKey: '...',
namespace: '...',
user: player.userKey('...')
}).start()
}
</script>
projectKey vous sera fournie par votre Solutions Engineer
namespace permet d'identifier textuellement le projet pour éviter les conflits entre intégrations
player.userKey vous sera fournie par votre Solutions Engineer
Appel du bundle.js
Appel du bundle.js
L'appel au bunde.js doit se faire à la fin du document HTML juste avant la fermeture de la balise </body>.
⚠️ Il est impératif de garder la ligne dans son intégralité. Pensez bien à changer la valeur de namespace par une valeur personnalisée.
<script charset="utf-8" src="https://static.lemonlearning.com/player/bundle.js" async defer id="lemonlearning-player-embed" data-ui-mode="shadow-dom"></script>
Page updated
Report abuse