/
Widget in Webapplikation integrieren

Widget in Webapplikation integrieren

Owned by Stefan Schöb
Last updated: Feb 27, 2025 by Christoph Süess
3 min read

Warum soll ich Micromate direkt in meine Webapplikation integrieren?

Eine Integration von Micromate als Widget direkt in deine Webapplikation bringt die Lernerfahrung näher zum Benutzer. D.h. Micromate interagiert mit den Lernenden in einer Umgebung, welchen ihnen bereits bekannt ist. Dies benötigt somit keinen zusätzlichen Lernaufwand und hat somit einen positiven Einfluss auf den Lernerfolg.

Das Wichtigste in Kürze

  1. Micromate kann über das Widget in eine beliebige Webapplikation (Intranet, LMS, …) integriert werden.

  2. Die Widget Integration benötigt kleine Anpassungen im Frontend, wie auch im Backend deiner Webapplikation.

Das Micromate Widget

Das Micromate Widget besteht aus einem “Action Button” unten rechts sowie einem dazugehörigen Fenster in welchem die Interaktion mit dem Lernenden stattfindet.

Neben dem Lernen selbst, kann auch direkt auf die Badges, den Lernfortschritt sowie die Rangliste zugegriffen werden.

Micromate Widget integriert in Moodle

Voraussetzungen

  • Das System in welches Micromate integriert werden soll, basiert auf Webtechnologien.

  • Für das externe System können Erweiterungen im Backend geschrieben werden.

Sollte eine dieser beiden Kriterien nicht auf dein System zutreffen, dann melde dich unter hello@micromate.ai.

Umsetzung

1. Widget einbinden

Füge die folgenden beiden Zeilen an einer beliebigen Stelle in deiner Frontend-Anwendung ein:

<script type="text/javascript" src="https://integration.micromate.ai/widget.js"></script> <micromate-widget></micromate-widget>

Die erste Zeile lädt das Micromate-Widget vom Server von Micromate. Daraus ist auch zu entnehmen, dass das die aktuellste Version des Widgets jeweils von folgender URL bezogen werden kann https://integration.micromate.ai/widget.js.

Die zweite Zeile “<micromate-widget></micromate-widget>“ startet das Widget.

Die Darstellung des Widgets kann individuell angepasst werden. Mehr dazu unter: Styling des Micromate Widgets

2. Benutzerauthentifizierung

Damit Micromate den Lernenden welcher gerade mit Micromate authentifizieren kann, muss eine Authentifizierung an das Widget übergeben werden. Dazu muss dem Widget das Attribute “accessToken” hinzugefügt werden:

<micromate-widget accessToken="<ACCESS TOKEN>"></micromate-widget>

Das “Access Token” muss im Backend der Webapplikation über die Public API von Micromate abgefragt werden. Dazu muss der folgende Endpunkt verwendet werden:

GET https://bot.micromate.ai/api/public/organization/{organizationId}/learner/token

Damit der Aufruf funktioniert, musst du dich erst korrekt authentifizieren. Alle Infos dazu findest du unter: Authentifizierung für den Zugriff auf die Public API .

Dem Aufruf kann die Sprache des Benutzers als “locale”-Parameter mitgegeben werden. Aktuell unterstützt Micromate die folgenden Sprachen:

  • Deutsch (de-CH)

  • Englisch (en-US)

  • Franzsösisch (fr-CH)

  • Italienisch (it-CH)

Wird keine oder eine fehlerhafte Sprache eingegeben, wird automatisch Deutsch verwendet.

Das von dem Endpunkt zurückgegebene Token, kann direkt in das “accessToken”-Attribute des Micromate Widgets geschrieben werden.

Den Parameter “organizationId” für deine Organisation erhältst du bei uns. Melde dich dazu bei hello@micromate.ai

Theoretisch wäre es möglich, dass das Token auch im Frontend abgefragt oder gar fix einprogrammiert werden kann. Dies sollte jedoch in keinem Fall so gemacht werden, da dies zu folgenden Problemen führen würde:

  • Ein fixes Token zu verwenden führt dazu, dass Micromate die Benutzer nicht unterscheiden kann.

  • Ein Token direkt im Frontend abzufragen, führt dazu, dass sicherheitsrelevante Informationen freigegeben werden.

3. Erweiterte Integration

Weitere Möglichkeiten zur Anpassung sowie Interaktion mit dem Micromate Widget, findest du unter den folgenden Links:

 

Troubleshooting

Warum wird Micromate nicht dargestellt?

Dies kann mehrere Gründe haben. Meistens wurde in diesem Fall das Micromate Script (widget.js) nicht sauber geladen oder kein gültiges Access Token zur Verfügung gestellt.
Prüfe in diesem Fall im Browser, ob die JavaScript Datei widget.js erfolgreich von unserem Server geladen werden konnte und ob das Access Token welches dem micromate-widget Tag übergeben wurde gültig ist.