Embedded Files
Snippet Integration
Snippet Integration
Automatic Authentication
Automatic Authentication
<script type="text/javascript">
function LemonLearningReady(player) {
player.set({
projectKey: '...',
namespace: '...',
user: {
name: '...',
email: '...',
profiles: [id profil ou 0],
tags: [{
category: "Pays",
values: ["variable used to retrieve the country value of the logged-in user"]
}, {
category: "Role",
values: ["variable used to retrieve the country value of the logged-in user"]
}]
}
}).start()
}
</script>
projectKey: will be provided by your Solutions Engineer.
namespace makes it possible to identify the project textually in order to avoid conflicts between integrations.
user.name and user.email: correspond to the variables for the user's name and email within your application.
profiles: will be provided by your Solutions Engineer.
tags: correspond to tags that can be sent to Lemon Learning to enable educational differentiation (content targeting).
Automatic Authentication - Angular
Automatic Authentication - Angular
During its initialization, Angular entirely replaces the content of the body. The integration snippet needs to be slightly modified to accommodate this 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>
<!-- ... -->
When the LEMONLEARNING_HOST_READY custom event is caught, the promise receives the user data via event.detail. We can then configure standard automatic authentication. The host site must dispatch a 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 will be provided by your Solutions Engineer.
namespace allows you to textually identify the project to avoid conflicts between integrations.
user.name and user.email correspond to the variables for the user's name and email address within your tool.
profiles will be provided by your Solutions Engineer.
tags correspond to tags that can be sent to Lemon Learning to enable instructional differentiation (or customized learning).
SSO Authentication
SSO Authentication
<script type="text/javascript">
function LemonLearningReady(player) {
player.set({
companyKey: '...',
ssoId: '...'
}).start();
}
</script>
companyKey: will be provided by your Solutions Engineer.
ssoId: will be provided by your Solutions Engineer.
Anonymous Authentication
Anonymous Authentication
<script type="text/javascript">
function LemonLearningReady(player) {
player.set({
projectKey: '...',
namespace: '...',
user: player.userKey('...')
}).start()
}
</script>
projectKey: will be provided by your Solutions Engineer.
namespace makes it possible to identify the project textually in order to avoid conflicts between integrations.
player.userKey: will be provided by your Solutions Engineer.
Calling the bundle.js
Calling the bundle.js
The call to bundle.js must be placed at the end of the HTML document, just before the closing </body> tag.
⚠️ Important: It is imperative to keep the entire line of code as provided. Please ensure you replace the namespace value with your custom value.
<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