> ## Documentation Index > Fetch the complete documentation index at: https://docs.web-wb.de/llms.txt > Use this file to discover all available pages before exploring further. # Widget-Konfiguration > Vollständiger Leitfaden zur Konfiguration von Statistik-, Diagramm- und Tabellen-Widgets mit allen verfügbaren Optionen Erfahren Sie, wie Sie jeden Widget-Typ mit detaillierten Erklärungen zu jeder Option konfigurieren. ## Widgets erstellen 1. Navigieren Sie zum benutzerdefinierten Dashboard 2. Klicken Sie auf **"Widgets verwalten"**, dann **"Neues Widget erstellen"** 3. Wählen Sie den Widget-Typ 4. Folgen Sie dem 2-3-Schritt-Assistenten 5. Speichern und zum Dashboard hinzufügen ## Statistik-Widgets Einzelne Metrik-Anzeige mit optionalem Vergleich und Trend-Diagramm. ### Schritt 1: Grundlagen **Widget-Name** * Interner Bezeichner für Widget-Liste * Wird nicht auf Dashboard angezeigt * Beispiel: "Gesamtanrufe diesen Monat" **Datentabelle** * Wählen Sie Datenquelle: calls, leads, campaigns, assistants, phone\_numbers, sms * Bestimmt verfügbare Spalten **Aggregation** * `COUNT` - Gesamtzahl der Datensätze (keine Spalte erforderlich) * `SUM` - Summe der Werte (erfordert Spaltenauswahl) * `AVG` - Durchschnitt der Werte (erfordert Spaltenauswahl) * `MAX` - Maximaler Wert (erfordert Spaltenauswahl) * `MIN` - Minimaler Wert (erfordert Spaltenauswahl) **Spalte** (wenn SUM/AVG/MAX/MIN ausgewählt) * Wählen Sie numerische Spalte zur Aggregation * Beispiel: `duration` für durchschnittliche Anruflänge * Nicht erforderlich für COUNT ### Schritt 2: Anzeige & Filter **Beschriftung** (erforderlich) * Hauptüberschrift auf Widget angezeigt * Beispiel: "Gesamtanrufe" **Beschreibung** * Optionaler Text unter dem Wert * Ausgeblendet, wenn Vergleich aktiviert * Beispiel: "Anrufe diesen Monat" **Farbe** * primary (blau), success (grün), warning (gelb), danger (rot), info (cyan), gray (grau) * Wählen Sie basierend auf Metriktyp (grün für positiv, rot für negativ) **Mini-Diagramm anzeigen** * Zeigt kleines Liniendiagramm mit täglichem Trend * Verwendet denselben Datumsbereich wie Statistik **Mit vorheriger Periode vergleichen** * Zeigt prozentuale Änderung zur vorherigen Periode * Beispiel: Letzte 7 Tage vs. vorherige 7 Tage * Zeigt "+15%" oder "-8%" mit Auf-/Ab-Pfeil an * Überschreibt Beschreibungsfeld **Datumsbereich** * Nach Erstellungsdatum filtern * Optionen: Heute, 1, 7, 14, 30, 60, 90, 180, 365 Tage **Bedingungen** (optional) * Filter hinzufügen, um Daten einzugrenzen * Mehrere Bedingungen mit UND kombiniert * Siehe Abschnitt [Daten filtern](#daten-filtern) ### Beispiele **Gesamtanrufe** ``` Aggregation: COUNT Table: calls Label: "Gesamtanrufe" Description: "Letzte 30 Tage" Color: primary Date Range: 30 Tage ``` **Durchschnittliche Anrufdauer** ``` Aggregation: AVG Table: calls Column: duration Label: "Durchschn. Dauer" Color: info Show Mini Chart: Ja Date Range: 30 Tage ``` **Erfolgreiche Termine** ``` Aggregation: COUNT Table: calls Label: "Gebuchte Termine" Color: success Compare: Ja Date Range: 7 Tage Conditions: - status = completed - evaluation.appointment_booked = true ``` ## Diagramm-Widgets Visualisieren Sie Trends mit 8 Diagrammtypen. ### Schritt 1: Grundlagen Wie bei Statistik-Widgets, plus: **Diagrammtyp** * `line` - Trends über Zeit * `bar` - Kategorien oder Zeiträume vergleichen * `area` - Gefülltes Trend-Diagramm * `pie` - Proportionen (erfordert Gruppierung) * `donut` - Kreis mit Loch in der Mitte (erfordert Gruppierung) * `polarArea` - Kreisförmig mit variierendem Radius (erfordert Gruppierung) * `radar` - Mehrachsen-Vergleich * `radialBar` - Einzelner Fortschrittsindikator ### Schritt 2: Anzeige & Filter **Beschriftung** (erforderlich) * Diagrammtitel **Beschreibung** * Optionaler Untertitel-Text unter dem Diagramm * Beispiel: "Leistung der letzten 30 Tage" **Farbe** * Primärfarbe des Diagramms * Für Kreis/Donut wird eine Mehrfarben-Palette verwendet (Blau, Grün, Orange, Rot, Lila, Rosa) **Datumsbereich** * Wie bei Statistiken **Gruppieren nach** ODER **Gruppieren nach Periode** (sich gegenseitig ausschließend) **Gruppieren nach** - Kategorische Gruppierung * Daten nach Spaltenwerten gruppieren * Beispiele: Status, Kampagnen-ID, Assistentenname * **Erforderlich** für Kreis-/Donut-/Polarflächen-Diagramme * Optional für Balken-/Radar-Diagramme * **Kann nicht** mit Gruppieren nach Periode verwendet werden **Gruppieren nach Periode** - Zeitbasierte Gruppierung * Nach Zeiteinheiten gruppieren * Optionen: Stunde, Tag, Woche, Monat * Verwendet für Linien-/Balken-/Flächendiagramme * **Kann nicht** mit Gruppieren nach verwendet werden **Bedingungen** * Wie bei Statistiken ### Schritt 3: Erweitert (nur Diagramme) **Gitterlinien anzeigen** (nur Linie/Balken/Fläche) * Horizontale/vertikale Hintergrundlinien * Hilft beim Ablesen exakter Werte * Standard: Ja **Legende anzeigen** * Farbcodierte Beschriftungen * Standard: Ja für Kreis/Donut/Polarfläche, Nein für andere * Position: Unten im Diagramm **Tooltips anzeigen** * Hover-Popups mit exakten Werten * Standard: Ja (empfohlen) **Datenbeschriftungen anzeigen** * Werte direkt auf Diagrammelementen angezeigt * Standard: Ja für Kreis/Donut/Polarfläche, Nein für andere * Kann Linien-/Balkendiagramme überladen **Symbolleiste anzeigen** (nur Linie/Balken/Fläche) * Zoom- und Download-Steuerungen * Standard: Nein **Linienkurve** (nur Linie/Fläche) * `smooth` - Abgerundete Kurven (Standard, visuell ansprechend) * `straight` - Direkte Linien (präzise) * `stepline` - Schrittweise (gut für diskrete Ereignisse) **Linienbreite** (nur Linie/Balken/Fläche) * Dicke in Pixeln (1-10) * Standard: 2px **Diagrammhöhe** * Vertikaler Raum in Pixeln (200-800) * Standard: 300px * Höhere Diagramme besser für mehr Datenpunkte **Verlauf aktivieren** (nur radialBar) * Farbverlaufseffekt * Standard: Nein **Verlaufsfarbe** (wenn Verlauf aktiviert) * Endfarbe für Verlauf * Standard: Grün (#10b981) ### Diagrammtyp-Leitfaden **Liniendiagramm** * **Verwenden für:** Tägliche/wöchentliche Trends, kontinuierliche Daten * **Erfordert:** Gruppieren nach Periode * **Beispiel:** Anrufe pro Tag letzte 30 Tage **Balkendiagramm** * **Verwenden für:** Kategorienvergleich, Zeiträume * **Kann verwenden:** Gruppieren nach (Kategorien) ODER Gruppieren nach Periode (Zeit) * **Beispiel:** Anrufe pro Kampagne, stündliche Verteilung **Flächendiagramm** * **Verwenden für:** Wie Linie, betont Volumen * **Erfordert:** Gruppieren nach Periode * **Beispiel:** Anrufvolumen-Trend **Kreis-/Donut-Diagramm** * **Verwenden für:** Proportionen, Prozentsätze * **Erfordert:** Gruppieren nach (NICHT Gruppieren nach Periode) * **Beispiel:** Anrufstatus-Aufschlüsselung **Polarfläche** * **Verwenden für:** Wie Kreis, zeigt aber Größe über Radius * **Erfordert:** Gruppieren nach * **Beispiel:** Kampagnenbeitrag **Radar-Diagramm** * **Verwenden für:** Multi-Variablen-Vergleich * **Erfordert:** Gruppieren nach * **Beispiel:** Leistung über Metriken **Radialbalken** * **Verwenden für:** Einzelner Prozentsatz/Fortschritt * **Verwendet nicht:** Gruppieren nach oder Gruppieren nach Periode * **Beispiel:** Zielerreichung % ### Beispiele **Tägliches Anrufvolumen (Linie)** ``` Table: calls Aggregation: COUNT Chart Type: line Label: "Tägliche Anrufe" Group By Period: day Show Grid: Ja Stroke Curve: smooth Date Range: 30 Tage ``` **Status-Aufschlüsselung (Kreis)** ``` Table: calls Aggregation: COUNT Chart Type: pie Label: "Anrufstatus" Group By: status Show Legend: Ja Show Data Labels: Ja Date Range: 7 Tage ``` **Stündliches Muster (Balken)** ``` Table: calls Aggregation: COUNT Chart Type: bar Label: "Anrufe nach Stunde" Group By Period: hour Date Range: 7 Tage ``` **Kampagnenvergleich (Balken)** ``` Table: calls Aggregation: COUNT Chart Type: bar Label: "Anrufe pro Kampagne" Group By: campaign.name Date Range: 30 Tage ``` ## Tabellen-Widgets Detaillierte Datensätze mit benutzerdefinierten Spalten anzeigen. ### Schritt 1: Grundlagen **Datentabelle** * Quelle wählen: calls, leads, campaigns, assistants, phone\_numbers, sms **Kampagnenfilter** (nur Leads-Tabelle) * Kampagne auswählen, um: * Tabelle auf diese Kampagne zu filtern * Benutzerdefinierte Variablenspalten zu aktivieren * Optional **Assistentenfilter** (nur Anrufe-Tabelle) * Assistenten auswählen, um: * Tabelle auf diesen Assistenten zu filtern * Bewertungsfeldspalten zu aktivieren * Optional **Spaltenauswahl** * Basisspalten: ID, Status, Erstellt am usw. * Beziehungsspalten: Assistentenname, Kampagnenname * Bewertungsfelder: evaluation.{feld_name} (wenn Assistent ausgewählt) * Lead-Variablen: variables.{variablen_name} (wenn Kampagne ausgewählt) * Standard, wenn keine ausgewählt: ID, Status, Erstellt am ### Schritt 2: Anzeige & Filter **Beschriftung** (erforderlich) * Tabellenüberschrift **Beschreibung** * Optionaler Untertitel **Datumsbereich** * Wie bei Statistiken/Diagrammen **Sortieren nach** * Standard-Sortierspalte * Nur einfache Spalten (nicht Beziehungen) * Standard: created\_at **Sortierrichtung** * desc (neueste zuerst) - Standard * asc (älteste zuerst) **Zeilen pro Seite** * Anzahl der anzuzeigenden Zeilen (1-100) * Standard: 10 **Bedingungen** * Wie bei Statistiken/Diagrammen ### Interaktive Funktionen **Anklickbare Zeilen** * Tabellenzeilen sind anklickbar * Verlinkt automatisch zur Detail-/Bearbeitungsseite für den Datensatz * Funktioniert für: Anrufe, Leads, Kampagnen, Assistenten **Live-Datumsfilter** * Datumsbereich direkt im Widget ändern * Überschreibt den konfigurierten Standard-Datumsbereich * Nützlich zum Erkunden verschiedener Zeiträume **Statusfilter** * Mehrfachauswahl-Dropdown zum Filtern nach Status * Verfügbar für: Anrufe, Leads, Kampagnen, Assistenten, SMS * Mehrere Status gleichzeitig auswählen **Textanzeige** * Langer Text wird automatisch bei 50 Zeichen gekürzt * Hover über gekürz ten Text zeigt vollen Inhalt im Tooltip ### Spaltentypen **Telefonnummernspalten** * Internationales Format (+1 555 123 4567) * Länderflaggenpräfix * Beispiele: client\_phone\_number, phone\_number **Statusspalten** * Farbige Abzeichen * Beispiele: Status-Feld in jeder Tabelle **Datumsspalten** * Format "vor 3 Stunden" * Hover zeigt vollständiges Datum/Zeit * Beispiele: created\_at, updated\_at **Bewertungsspalten** (Anrufe-Tabelle mit Assistent) * Boolesche Felder: Häkchen oder X mit grünem/rotem Abzeichen * Nicht-boolesche Felder: Wert mit grauem Abzeichen * Hover zeigt Feldbeschreibung * Format: evaluation.{feld_name} **Variablenspalten** (Leads-Tabelle mit Kampagne) * Benutzerdefinierte Lead-Daten * Format: variables.{variablen_name} * Beispiele: customer\_name, company **Beziehungsspalten** * Zugriff auf zugehörige Daten * Beispiele: Assistentenname, Kampagnenname * Nicht sortierbar ### Beispiele **Aktuelle Anrufe** ``` Table: calls Columns: - Client Phone Number - Assistant Name - Duration - Status - Created At Sort: Created At desc Rows: 25 Date Range: 7 Tage ``` **Erfolgreiche Termine** ``` Table: calls Assistant: [Zum Laden von Feldern auswählen] Columns: - Client Phone Number - Assistant Name - evaluation.appointment_booked - Created At Sort: Created At desc Rows: 50 Date Range: 30 Tage Conditions: - Status = completed - Column: Extracted Variables Extracted Variable Name: Custom variable Custom Variable Name: appointment_booked Operator: = Variable Value: true ``` ## Daten filtern Alle Widgets unterstützen Bedingungen zum Filtern von Daten. ### Operatoren * `=` - Gleich * `!=` - Nicht gleich * `>` - Größer als * `>=` - Größer oder gleich * `<` - Kleiner als * `<=` - Kleiner oder gleich * `like` - Enthält Text * `in` - Eines von (kommagetrennt) * `not in` - Nicht eines von * `is null` - Kein Wert * `is not null` - Hat Wert ### Basis-Filterung **Statusfilter** ``` Column: Status Operator: = Value: completed ``` **Dauerfilter** ``` Column: Duration Operator: > Value: 60 ``` **Mehrere Werte** ``` Column: Status Operator: in Value: completed,in-progress ``` ### Bewertungsfeld-Filterung Nach Post-Call-Bewertungswerten filtern. **Einrichtung:** 1. Column: Extracted Variables 2. Extracted Variable Name: Status oder Custom variable 3. Wenn Custom variable: Feldnamen in Custom Variable Name eingeben 4. Variable Value: true/false für Boolesche, oder any + benutzerdefinierter Wert **Boolesches Beispiel - Termin gebucht** ``` Column: Extracted Variables Extracted Variable Name: Custom variable Custom Variable Name: appointment_booked Operator: = Variable Value: true ``` **Nicht-Boolesches Beispiel - Stimmung** ``` Column: Extracted Variables Extracted Variable Name: Custom variable Custom Variable Name: sentiment Operator: = Variable Value: any Custom Value: positive ``` **Feld existiert prüfen** ``` Column: Extracted Variables Extracted Variable Name: Custom variable Custom Variable Name: interested Operator: = Variable Value: any ``` ### Mehrere Bedingungen Bedingungen mit UND kombiniert: ``` Filter für erfolgreiche lange Anrufe: Condition 1: - Column: Status - Operator: = - Value: completed Condition 2: - Column: Duration - Operator: > - Value: 120 Condition 3: - Column: Extracted Variables - Extracted Variable Name: Custom variable - Custom Variable Name: appointment_booked - Operator: = - Variable Value: true ``` ## Best Practices ### Widget-Benennung Verwenden Sie beschreibende interne Namen: * ✅ "Verkaufsanrufe - Letzte 30 Tage" * ✅ "Support-Durchschnittsdauer" * ❌ "Widget 1" ### Datumsbereiche Bereich an Anwendungsfall anpassen: * **Heute:** Echtzeit-Überwachung * **7 Tage:** Wöchentliche Leistung * **30 Tage:** Monatliche Trends * **90+ Tage:** Langfristige Analyse ### Farben Strategische Farbnutzung: * **Grün (success):** Positive Metriken * **Rot (danger):** Alarm-Metriken * **Blau (primary):** Neutrale Metriken * **Gelb (warning):** Aufmerksamkeit erforderlich * **Grau (info):** Sekundäre Info ### Leistung Dashboards schnell halten: * Datumsbereichsfilter verwenden * Widgets pro Dashboard unter 20 begrenzen * COUNT wenn möglich verwenden (schneller) * Sehr lange Datumsbereiche vermeiden ## Fehlerbehebung **Widget zeigt "Keine Daten"** * Datumsbereich erweitern * Filter entfernen/anpassen * Überprüfen, ob Tabelle Datensätze hat **Bewertungsfelder werden nicht angezeigt** * Assistenten in Widget-Konfiguration auswählen * Sicherstellen, dass Assistent Post-Call-Schema hat * Feldnamen auf Übereinstimmung prüfen **Diagramm zeigt leer** * Kreis/Donut: Muss Gruppieren nach verwenden (nicht Periode) * Linie/Fläche: Muss Gruppieren nach Periode verwenden (nicht Kategorie) * Datumsbereich überprüfen, ob Daten enthalten **Tabelle fehlen Spalten** * Beziehungsspalten benötigen zugehörige Datensätze * Bewertungsspalten benötigen Assistentenauswahl * Variablenspalten benötigen Kampagnenauswahl **Fehler "Gruppieren nach erforderlich"** * Kreis-/Donut-/Polarflächen-Diagramme MÜSSEN Gruppieren nach haben * Kann Gruppieren nach Periode nicht mit diesen Diagrammtypen verwenden **Kann nicht nach Spalte sortieren** * Beziehungsspalten (mit .) nicht sortierbar * Bewertungsfelder nicht sortierbar * Basisspalten zum Sortieren verwenden Für Dashboard-Erstellung und Layout-Verwaltung siehe [Benutzerdefinierte Dashboards Übersicht](/custom-dashboards/overview).