🎓 Hoe integreer je de Linguineo Conversational AI-speler in je leeromgeving?
Met de conversational AI player van Linguineo kunnen leerlingen direct vanuit je platform oefenen met spreken in echte praktijkscenario’s. In deze tutorial begeleiden we je bij het integreren van de speler in je LMS of aangepaste leeromgeving.
🔐 1. Identity provider instellen & het toegangstoken krijgen
Belangrijke opmerking: In de echte wereld moet je je eigen identiteitsprovider gebruiken. Je moet de URL van je JWKS-set met ons bij Linguineo delen. Ons team zal dit configureren op onze API “s-jekunt deze stap niet zelf uitvoeren. In deze tutorial demonstreren we de integratie met behulp van Linguineo” s Keycloak identity provider voor de eenvoud.
Verifieer eerst je gebruikers en verkrijg een toegangstoken voor de speler.
Gebruik de Identity Provider van Linguineo (alleen voor testen/demo):
- Autorisatie eindpunt:
https://keycloak.linguineo.com/auth/realms/moodle/protocol/openid-connect/auth
- Token eindpunt:
https://keycloak.linguineo.com/auth/realms/moodle/protocol/openid-connect/token
- Klant-ID:
moodle
Basis JavaScript aanmeldingsstroom:
Voeg de volgende knop toe aan je html-pagina:
<button id="login">Login with OAuth</button>
Voeg vervolgens het volgende Javascript-script toe. Deze code stelt het opgehaalde toegangstoken in op het element met id linguineo-conversation op je pagina (dat we in de volgende secties zullen toevoegen):
const clientId = 'moodle';
const authorizationUrl = 'https://keycloak.linguineo.com/auth/realms/moodle/protocol/openid-connect/auth';
const tokenUrl = 'https://keycloak.linguineo.com/auth/realms/moodle/protocol/openid-connect/token';
document.getElementById('login').onclick = () => {
const authUrl = `${authorizationUrl}?response_type=code&client_id=${clientId}&redirect_uri=${encodeURIComponent(window.location.href)}&scope=openid`;
window.location.href = authUrl;
};
const params = new URLSearchParams(window.location.search);
if (params.has('code')) {
const code = params.get('code');
fetch(tokenUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
grant_type: 'authorization_code',
code,
redirect_uri: window.location.href,
client_id: clientId,
}),
})
.then(res => res.json())
.then(data => {
const accessToken = data.access_token;
document.getElementById('linguineo-conversation').setAttribute('access-token', accessToken);
});
}
Om het inloggen met de Linguineo identity provider te testen, kun je het proberen met gebruiker tester01 en wachtwoord testing2025
🧩 2. Importeer de vereiste JavaScript en stijlen
Om de component linguineo-conversation
te gebruiken, voegt u de volgende scripttags toe aan (meestal de onderkant van) uw pagina:
<script src="https://uploads.linguineo.com/js/production-1.0.0/conversation-webcomponents-es5.js" nomodule></script>
<script src="https://uploads.linguineo.com/js/production-1.0.0/conversation-webcomponents-es2015.js" type="module"></script>
Idealiter voeg je ook de standaard stijlen voor het component toe:
<link rel="stylesheet" href="https://uploads.linguineo.com/js/production-1.0.0/styles.css">
Als je liever niet naar Linguineo urls verwijst, kopieer deze js en css bestanden dan gerust naar je eigen omgeving.
🧱 3. Voeg het component <linguineo-conversation>
toe aan de pagina
Maak een container voor de speler en sluit de component in met je configuratie. Hoe je de linguineo-conversation component configureert wordt hier in detail beschreven.
<style>
.linguineo-conversation-container {
height: 100vh;
width: 100vw;
}
</style>
<div class="linguineo-conversation-container">
<linguineo-conversation
id="linguineo-conversation"
access-token=""
auth-method="bearer"
bot-name="Bot"
connection-config='{
"basePath":"https://open-api.linguineo.com/api/v1",
"resourcesBasePath":"https://open-api.linguineo.com/api/v1",
"linguineoBasePath":"https://open-api.linguineo.com/api",
"directCallsToLinguineoBackend":true
}'
application="TEST_APP"
language="fr"
translate-into-language="nl"
scenario-id="503"
answer-type="SPEAKING_WITH_INTERMEDIATE_WRITING"
show-pronunciation-feedback="false"
show-simple-corrective-feedback="false"
sound-effects-enabled="false"
additional-corrective-feedback="false"
always-wait-for-bot-to-finish-speaking="false"
enable-contextualized-grammar-corrections="false"
do-additional-pronunciation-analysis="false"
></linguineo-conversation>
</div>
Zorg ervoor dat de access-token
dynamisch wordt bijgewerkt via JavaScript na het inloggen.
🛎️ 4. Luisteren naar de linguineo:end
gebeurtenis
Je kunt luisteren wanneer een gebruiker een gesprek beëindigt:
window.addEventListener('linguineo:end', (e) => { console.log('Conversation finished', e.detail); // Handle end-of-conversation logic here });
🧪 Optioneel: React & Angular integratie
De Linguineo-speler integreert soepel met moderne frameworks zoals React en Angular. Je kunt de access-token
als prop (React) of als input (Angular) doorgeven en event listeners zoals linguineo:end
aan je componentenlogica koppelen.
Voor volledig werkende voorbeelden – inclusief tokenverwerking en vernieuwingslogica – bezoek je onze GitHub repository:
👉 Linguineo Conversation Client Usage Example
Het bevat complete opstellingen voor gewoon JavaScript, React en Angular.
✅ Conclusie
Je hebt nu een volledig werkende conversationele AI-component ingebouwd in je LMS! Denk er bij productie aan om:
- Gebruik je eigen identiteitsprovider (niet die van Linguineo)
- Deel je JWKS-set URL met Linguineo-ondersteuning
- Vernieuwingstoken implementeren om verlopen sessies te voorkomen
Heb je vragen of hulp nodig bij de installatie? Neem contact op met ons technisch team – we staan klaar om je te helpen.