Widget in Webapplikation integrieren

Owned by Stefan Schöb
Last updated: Aug 30, 2023
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.

Anleitung

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.

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 .

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

3. Erweiterte Integration

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