Oberflächenübersicht

Dieser Leitfaden führt Sie durch jeden Bildschirm der Widget Builder Anwendung. Jeder Abschnitt enthält einen Screenshot und eine verständliche Beschreibung dessen, was Sie sehen und was Sie tun können. Es sind keine technischen Vorkenntnisse erforderlich — diese Übersicht richtet sich an Projektmanager, Kommunikationsverantwortliche und alle, die mit dem Widget Builder beginnen möchten.

---

Anmeldung

Wenn Sie den Widget Builder öffnen, sehen Sie als Erstes die Anmeldeseite.

Was Sie auf diesem Bildschirm sehen:

• Widget Builder Logo und Titel — bestätigt, dass Sie sich in der richtigen Anwendung befinden.
• Staffbase-URL-Feld — geben Sie die Webadresse Ihrer Staffbase-Plattform ein (z. B. https://ihreFirma.staffbase.com). Damit wird der Widget Builder mit Ihrer Organisation verbunden.
• Angemeldet bleiben — aktivieren Sie dieses Kontrollkästchen, wenn Sie zwischen Sitzungen angemeldet bleiben möchten.
• Anmelden-Schaltfläche — startet den Anmeldevorgang. Sie werden zu Staffbase weitergeleitet, um Ihre Identität zu bestätigen.
• Registrieren — falls Ihre Organisation noch nicht für den Widget Builder registriert ist, nutzen Sie diesen Link, um den Registrierungsprozess zu starten.
• Systemstatus — am unteren Rand der Seite zeigt ein grüner Indikator an, ob alle Widget Builder Dienste normal laufen.
• Versionsnummer — die aktuelle Version der Anwendung wird ganz unten angezeigt.

tipp

Sie müssen Administrator in Ihrer Staffbase-Plattform sein, um sich anmelden zu können. Normale Mitarbeiter haben keinen Zugriff auf den Widget Builder.

---

Registrierung

Wenn Ihre Organisation neu beim Widget Builder ist, durchlaufen Sie einen zweistufigen Registrierungsprozess.

Was Sie auf diesem Bildschirm sehen:

• Fortschrittsbalken — zeigt an, dass die Registrierung zwei Schritte umfasst: Mit Staffbase verbinden und Widget konfigurieren.
• Ihre Informationen — geben Sie die E-Mail-Adresse ein, die mit diesem Widget Builder Konto verknüpft werden soll.
• Staffbase-URL — geben Sie die Adresse Ihrer Staffbase-Plattform ein, genau wie auf der Anmeldeseite.
• „OAuth Clients"-Seite vorhanden — ein Kontrollkästchen zur Bestätigung, dass Ihre Staffbase-Plattform OAuth-Verbindungen unterstützt. Dies ist erforderlich, damit der Widget Builder mit Staffbase kommunizieren kann.
• Nutzungsbedingungen — Sie müssen die Nutzungsbedingungen lesen und akzeptieren, bevor Sie fortfahren können.
• Zurück / Verbinden-Schaltflächen — kehren Sie zur Anmeldeseite zurück oder fahren Sie mit der Verbindung fort.

info

Die Registrierung muss nur einmal pro Organisation durchgeführt werden. Nach der Ersteinrichtung können sich alle Administratoren direkt anmelden.

---

Dashboard

Nach der Anmeldung gelangen Sie zum Dashboard — dem Startbildschirm des Widget Builders.

Was Sie auf diesem Bildschirm sehen:

Das Dashboard ist in zwei Hauptbereiche unterteilt: die Seitenleisten-Navigation auf der linken Seite und den Hauptinhaltsbereich auf der rechten Seite.

Seitenleisten-Navigation

Die Seitenleiste ist auf jedem Bildschirm sichtbar und bietet Zugang zu allen Bereichen der Anwendung:

Menüpunkt	Beschreibung
Dashboard	Der Startbildschirm mit einer Übersicht über Ihre Widgets und Aktivitäten
Custom Widgets	Ihre selbst erstellten Widgets — erstellen, bearbeiten und verwalten Sie diese hier
Built-In Widgets	Vorgefertigte Widget-Vorlagen von JASP, die Sie aktivieren können
API Requests	Verwalten Sie Verbindungen zu externen Datenquellen (z. B. News-Feeds, Wetterdienste)
Settings	Kontoeinstellungen, Berechtigungen und API-Tokens
Help / FAQ	Öffnet die Seite mit häufig gestellten Fragen (externer Link)
Docs	Öffnet diese Dokumentationsseite (externer Link)

Hauptinhalt

Das Dashboard zeigt eine Schnellübersicht Ihrer aktuellen Konfiguration:

• Aktive Custom Widgets — eine Reihe von Karten, die Ihre aktiven benutzerdefinierten Widgets anzeigen. Jede Karte zeigt den Widget-Namen, seinen Status (aktiv/inaktiv) und wann es zuletzt aktualisiert wurde. Klicken Sie auf „Alle anzeigen", um die vollständige Widget-Liste zu öffnen.
• Aktive Built-in Widgets — gleiches Format wie oben, jedoch für vorgefertigte Widgets. Wenn noch keine aktiviert sind, werden Sie aufgefordert, die Built-in Widget Bibliothek zu erkunden.
• Statistikübersicht — wichtige Kennzahlen auf einen Blick: wie viele aktive Widgets Sie haben, Gesamtanzahl der Impressionen, aktive Benutzer, Seiten und Länder. Diese Statistiken umfassen die letzten 30 Tage.
• Kürzlich aktualisierte Dokumentation — Links zu den neuesten Dokumentationsartikeln, damit Sie über neue Funktionen und Anleitungen auf dem Laufenden bleiben.

---

Custom Widgets Liste

Klicken Sie in der Seitenleiste auf Custom Widgets, um alle Ihre Widgets auf einen Blick zu sehen.

Was Sie auf diesem Bildschirm sehen:

• Seitentitel und Beschreibung — „Custom Widgets" mit einem Untertitel, der den Zweck dieser Seite erklärt.
• Importieren-Schaltfläche — importieren Sie Widgets, die aus einem anderen Widget Builder Konto exportiert wurden.
• Neues Custom Widget-Schaltfläche — erstellen Sie ein brandneues Widget von Grund auf.
• Filterleiste — ein Suchfeld, um ein Widget schnell nach Name zu finden. Daneben ermöglichen Filterschaltflächen die Anzeige von Alle, nur aktive oder nur inaktive Widgets.
• Widget-Karten — jedes Widget wird als Karte dargestellt mit:
  • Einem Widget-Symbol (pro Widget anpassbar)
  • Dem Widget-Namen
  • Einem Status-Badge — grünes „active" bedeutet, das Widget ist in Staffbase live; graues „inactive" bedeutet, es ist derzeit nicht für Benutzer verfügbar
  • Dem Datum der letzten Aktualisierung
  • Aktionsschaltflächen für Bearbeiten, Exportieren und Löschen (sichtbar beim Darüberfahren mit der Maus)

tipp

Verwenden Sie die Filterschaltflächen, um schnell zu sehen, welche Widgets derzeit live sind („active") und welche sich noch im Entwurf befinden („inactive").

---

Widget Editor

Wenn Sie ein Widget erstellen oder bearbeiten, öffnet sich der Widget Editor. Hier konfigurieren Sie alles rund um Ihr Widget. Der Editor verfügt über eine Seitenleiste mit fünf nummerierten Abschnitten und einen großen Inhaltsbereich.

Editor-Kopfzeile und Seitenleiste

Jeder Editor-Bildschirm teilt dasselbe Layout:

• Zurück-Schaltfläche (oben links) — kehren Sie zur Widget-Liste zurück, ohne zu speichern.
• Widget-Symbol und Name — in der Kopfzeile angezeigt. Darunter: Zeitstempel „Zuletzt gespeichert".
• Schließen- und Speichern-Schaltflächen (oben rechts) — Schließen verwirft Änderungen; Speichern sichert Ihre Arbeit.
• Seitenleisten-Abschnitte — fünf nummerierte Tabs auf der linken Seite, die jeweils einen anderen Aspekt des Widgets behandeln. Klicken Sie auf „Open", um zwischen ihnen zu wechseln.
• Anleitungsleiste (unten) — ein schrittweiser Assistent, der Sie durch jeden Abschnitt führt. Er zeigt an, bei welchem Schritt Sie sich befinden, bietet einen „Learn more"-Link und eine „Next"-Schaltfläche zum Fortfahren.
• Statusleiste (ganz unten) — zeigt den Verbindungsstatus und eine Erinnerung, dass Änderungen nicht automatisch gespeichert werden.

1. General

Der Abschnitt General ist der Ausgangspunkt beim Erstellen eines neuen Widgets.

• Title (erforderlich) — der Name Ihres Widgets. Dieser Name erscheint in der Widget-Liste und wenn Benutzer verfügbare Widgets in Staffbase durchsuchen.
• Icon (optional) — laden Sie ein benutzerdefiniertes Bild hoch, um Ihr Widget leicht erkennbar zu machen. Sie können es auch auf das Standardsymbol zurücksetzen.
• Available in Staffbase — ein Umschalter. Wenn aktiviert, können Benutzer in Ihrer Staffbase-Plattform dieses Widget finden und verwenden. Wenn deaktiviert, befindet sich das Widget im Entwurfsmodus und ist für niemanden sichtbar.

2. Widget Settings

Der Abschnitt Widget Settings ermöglicht es Ihnen, konfigurierbare Felder zu definieren, die angezeigt werden, wenn jemand das Widget einer Staffbase-Seite hinzufügt.

• Settings Fields — eine Liste benutzerdefinierter Felder (z. B. Texteingaben, Dropdown-Menüs, Umschalter). Diese Felder werden von der Person ausgefüllt, die das Widget auf einer Seite platziert, nicht vom Endbenutzer.
• New Field-Schaltfläche — fügen Sie ein neues konfigurierbares Feld hinzu. Sie können aus verschiedenen Feldtypen wählen, wie Text, Zahl, Dropdown, Bild-Upload und mehr.

Beispiel: Ein „Unternehmensnachrichten"-Widget könnte ein Einstellungsfeld namens „Maximale Anzahl von Artikeln" haben, damit der Seiteneditor steuern kann, wie viele Nachrichtenartikel angezeigt werden.

3. Translations

Der Abschnitt Translations ermöglicht es Ihrem Widget, Texte in mehreren Sprachen anzuzeigen.

• Add Language-Schaltfläche — fügen Sie Unterstützung für eine neue Sprache hinzu (z. B. Englisch, Deutsch, Französisch).
• Für jede Sprache definieren Sie Übersetzungsschlüssel und deren Werte. Ein Übersetzungsschlüssel ist ein kurzer Bezeichner (wie title oder readMore), den Sie in Ihrem Widget-Layout referenzieren.
• Verwenden Sie in Ihrem Widget-Layout {{t 'key'}}, um übersetzten Text einzufügen. Der Widget Builder wählt automatisch die richtige Sprache basierend auf den Staffbase-Einstellungen des Benutzers.

Beispiel: Der Schlüssel readMore könnte den Wert „Read more" auf Englisch und „Weiterlesen" auf Deutsch haben.

4. API Request (Datenquelle)

Der Abschnitt API Request verbindet Ihr Widget mit einer externen Datenquelle.

• Select API — wählen Sie aus Ihren konfigurierten API-Verbindungen (verwaltet auf der API Requests Seite). Die HTTP-Methode der ausgewählten API (z. B. GET) wird als Badge angezeigt.
• Load Data-Schaltfläche — rufen Sie eine Beispielantwort von der API ab, um die Daten in der Vorschau anzuzeigen, die Ihr Widget erhalten wird.
• API Preview — zeigt die Rohantwort der API im JSON-Format an. Dies hilft Ihnen, die Datenstruktur zu verstehen, damit Sie die richtigen Felder in Ihrem Widget-Layout referenzieren können.

Beispiel: Ein Wetter-Widget verbindet sich mit einer Wetter-API. Die Antwort enthält Felder wie temperature, city und condition, die Sie dann im Widget-Layout mit {{data.temperature}} anzeigen können.

5. Custom Variables

Der Abschnitt Custom Variables ermöglicht es Ihnen, wiederverwendbare Werte zu definieren, die in Ihrem Widget-Layout oder in API-Aufrufen verwendet werden können.

• New Variable-Schaltfläche — fügen Sie ein Schlüssel-Wert-Paar hinzu. Der Schlüssel ist ein von Ihnen gewählter Name; der Wert kann ein beliebiger Text oder eine Zahl sein.
• Variablen werden im Layout mit {{variables.yourKey}} referenziert.

Beispiel: Eine Variable refreshInterval mit dem Wert 300 könnte steuern, wie oft ein Widget aktualisiert wird. Oder eine Variable primaryColor ermöglicht es Ihnen, das Farbschema des Widgets von einer zentralen Stelle aus zu ändern.

6. Edit Design (Layout-Editor)

Der Abschnitt Edit Design ist das visuelle Herzstück des Widget Builders. Hier schreiben Sie das HTML-Layout, das bestimmt, wie Ihr Widget aussieht.

Der Bildschirm ist in drei Bereiche aufgeteilt:

• Code-Editor (links) — schreiben Sie das HTML Ihres Widgets unter Verwendung der Handlebars Templating-Syntax. Eine Farblegende am oberen Rand hilft Ihnen, zwischen verschiedenen Arten dynamischer Inhalte zu unterscheiden:
  • Blau = Settings-Felder (Werte aus dem Widget Settings Tab)
  • Grün = Translations (Texte aus dem Translations Tab)
  • Orange = Datenfelder (Werte aus der API-Antwort)
  • Lila = Custom Variables
• Vorschau (oben rechts) — eine Live-Vorschau Ihres Widgets, wie es in Staffbase erscheinen wird. Verwenden Sie die Geräte-Schaltflächen (Mobilgerät, Tablet, Desktop), um zu sehen, wie das Widget bei verschiedenen Bildschirmgrößen aussieht. Klicken Sie auf „Refresh", um die Vorschau zu aktualisieren.
• Data (JSON) (unten rechts) — die Testdaten, die für die Vorschau verwendet werden. Sie können dieses JSON bearbeiten, um verschiedene API-Antworten zu simulieren und zu sehen, wie Ihr Widget damit umgeht.

tipp

Klicken Sie auf „Insert starter template", wenn Sie bei Null anfangen. Dies gibt Ihnen ein funktionierendes HTML-Grundgerüst, das Sie anpassen können.

---

API Requests

Klicken Sie in der Seitenleiste auf API Requests, um Ihre externen Datenverbindungen zu verwalten.

Was Sie auf diesem Bildschirm sehen:

• Seitentitel und Beschreibung — „API Requests" mit dem Untertitel „Manage external API connections and proxy configurations".
• New API Request-Schaltfläche — erstellen Sie eine neue Verbindung zu einer externen Datenquelle.
• API-Request-Karten — jede konfigurierte API-Verbindung wird als Karte angezeigt mit:
  • Einem Terminal-Symbol
  • Dem HTTP-Methoden-Badge (z. B. „GET" in Grün) — gibt an, welche Art von Anfrage gestellt wird
  • Dem von Ihnen vergebenen API-Namen
  • Dem Datum der letzten Aktualisierung
• Benutzerprofil (unten links in der Seitenleiste) — zeigt Ihren Namen und Ihre Organisation an. Klicken Sie darauf, um auf Ihre Profileinstellungen zuzugreifen.

API Requests dienen als Brücke zwischen Ihren Widgets und externen Diensten. Einmal hier konfiguriert, kann jedes Widget sie über den API Request Tab im Editor verwenden.

---

Settings

Klicken Sie in der Seitenleiste auf Settings, um Ihre Kontokonfiguration einzusehen und zu verwalten.

Was Sie auf diesem Bildschirm sehen:

Die Settings-Seite ist in mehrere Abschnitte unterteilt:

Widget Builder Allgemeine Informationen

• ID — Ihre eindeutige Widget Builder Kontokennung (nützlich für Support-Anfragen).
• Version — die aktuelle Version der Widget Builder Anwendung und der Widget.js-Datei.
• API Info — ein Statusindikator, der anzeigt, ob alle Backend-Dienste normal laufen.
• Widget Bundle URL — die URL, die Ihre Widgets mit Staffbase verbindet. Diese URL wird bei der Einrichtung automatisch registriert. Sie können sie kopieren oder bei Bedarf auf „Re-register Widgets" klicken.
• Custom Widgets Link — öffnet die Widget-Einstellungen in Ihrem Staffbase Admin-Panel.

Widget Builder Berechtigungen

• Minimum Role — die Mindest-Staffbase-Rolle, die für den Zugriff auf den Widget Builder erforderlich ist (typischerweise „Admin").
• Staffbase Groups — Berechtigungsgruppen, die steuern, welche Benutzer in Ihrer Organisation den Widget Builder verwenden dürfen. Jede Gruppe verlinkt auf ihre Staffbase-Admin-Seite.
• Edit Client Permissions — ändern Sie die Rollen- und Gruppeneinstellungen (erfordert Admin-Rechte).

Verbundene Staffbase App

• App — die Staffbase-Plattform-URL, mit der Ihr Widget Builder verbunden ist.
• Branch ID — die technische Kennung Ihrer Staffbase-Umgebung.
• OAuth Client ID — die OAuth-Anmeldedaten, die für die Verbindung verwendet werden.
• Staffbase Widget Authentication — ein Umschalter, der steuert, ob Widgets die Benutzeridentität überprüfen. Wenn aktiviert, können Widgets personalisierte Inhalte anzeigen.

MCP API Tokens

• Token-Tabelle — listet alle aktiven API-Tokens mit ihrem Namen, Präfix, Erstellungsdatum und zugewiesenen Berechtigungen (Scopes) auf.
• Revoke — deaktivieren Sie einen Token, wenn er nicht mehr benötigt wird.
• New Token — erstellen Sie einen neuen Token, indem Sie einen Namen eingeben, Berechtigungen auswählen (z. B. widgets:read, widgets:write, render) und auf „Generate Token" klicken.

tipp

MCP API Tokens ermöglichen es KI-Assistenten wie Claude oder Cursor, Widgets in Ihrem Auftrag zu erstellen und zu verwalten. Weitere Informationen finden Sie in der MCP Server Dokumentation.

Subscription

• License — Ihr aktueller Plan (z. B. „Professional") und dessen Status („Active").
• Terms of Use — ein Link zu den Widget Builder Nutzungsbedingungen.

---

Zusammenfassung

Die Oberfläche des Widget Builders ist klar strukturiert:

Bereich	Zweck
Anmeldung / Registrierung	Zugriff auf die Anwendung und Verbindung mit Ihrer Staffbase-Plattform
Dashboard	Übersicht über Ihre Widgets, Statistiken und aktuelle Dokumentation
Custom Widgets	Widgets auflisten, erstellen, importieren und verwalten
Widget Editor	Jeden Aspekt eines Widgets über sechs Abschnitte konfigurieren
API Requests	Verbindungen zu externen Datenquellen einrichten
Settings	Konto, Berechtigungen und API-Tokens verwalten

Jeder Bildschirm ist so gestaltet, dass er Sie Schritt für Schritt führt. Die integrierte Anleitungsleiste des Editors und die „Learn more"-Links verbinden Sie direkt mit detaillierten Dokumentationsartikeln, wann immer Sie weitere Informationen benötigen.