Hoe integreer je de Linguineo Conversational AI-speler in je leeromgeving?

🎓 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):

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:

Heb je vragen of hulp nodig bij de installatie? Neem contact op met ons technisch team – we staan klaar om je te helpen.