Par intégration directe
Étape 1 : Intégrer le CSS
La ligne de code CSS doit être intégrée dans la balise <body>. Il est impératif de garder la ligne dans son intégralité.
<link href="https://static.lemonlearning.com/player/bundle.css" rel="stylesheet" type="text/css">
Étape 2 : Intégrer le JS
La ligne de code JS doit être intégrée à 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é.
<script charset="utf-8" src="https://static.lemonlearning.com/player/bundle.js" async="" defer id="lemonlearning-player-embed"></script>
Étape 3 : Intégrer le snippet de connexion
Le snippet de code JS doit être intégré juste avant la ligne JS. Il est impératif de garder le snippet dans son intégralité.
Dans le cadre d'un déploiement Lemon Learning, quatre options sont possibles. L'option doit être sélectionnée en fonction des besoins du projet.
Connexion anonyme
<script type="text/javascript">
function LemonLearningReady (player) {
player
.set({
projectKey : '...',
user : player.userKey('...')
})
.start()
}
</script>
Note : La projectKey et la userKey vous serons communiquées par votre chef de projet
SSO
<script type="text/javascript">
function LemonLearningReady (player) {
player.set({
companyKey:'...',
ssoId : '...'
})
.start();
}
</script>
Note : La valeur ssoId vous sera communiquée par votre chef de projet
Connexion automatique "standard"
<script type="text/javascript">
function LemonLearningReady (player) {
player
.set({
projectKey : '...',
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>
Note :
La projectKey vous sera communiquée par votre chef de projet.
Dans la partie name et email, vous devez intégrer les variables présentes dans votre outil permettant de récupérer ces infos.
Les parties profiles et tags sont à discuter avec votre chef de projet et dépendront de votre besoin en terme de différenciation pédagogique
Connexion automatique avec changement dynamique d'utilisateur
<script type="text/javascript">
new Promise((resolve) => {
window.LemonLearningReady = (player) => {
LemonLearningReady.player = player;
resolve();
};
}).then(() => {
window.document.addEventListener(
"LEMONLEARNING_SET_PROFILE",
(e) => {
const { name, email, tags, profiles } = e.detail;
LemonLearningReady.player.set({
projectKey: "...",
user: {
name,
email,
profiles,
tags,
},
});
},
false
);
});
</script>
Exemple event avec les détails de l'utilisateur :
window.document.dispatchEvent(
new CustomEvent("LEMONLEARNING_SET_PROFILE", {
detail: {
name: "John Doe",
email: "user@foo.com",
tags : [{category : "Pays", values : ["France"]}],
profiles: [1350],
},
})
);
Note :
La projectKey vous sera communiqué par votre chef de projet.
Dans la partie name et email, vous devez intégrer les variables présentes dans votre outil permettant de récupérer ces infos.
Les parties profiles et tags sont à discuter avec votre chef de projet et dépendront de votre besoin en terme de différenciation pédagogique
Connexion manuelle (login / mot de passe) [uniquement dans le cadre d'un POC]
<script type="text/javascript">
function LemonLearningReady (player) {
player.start();
}
</script>
Dans quel ordre intégrer les lignes de code ?
Les lignes de code doivent obligatoirement être intégrées dans l'ordre suivant et juste avant la balise de fermeture </body>
Le css
Le snippet de connexion
Le script JS
