Benutzeroberflächen

branchly bietet fünf verschiedene Benutzeroberflächen: Chat, Chat-Widget, Navigator, Suche und Formular. Diese Interfaces teilen sich dieselbe Wissensbasis und können an deine Marke und deinen Anwendungsfall angepasst werden. Zusätzlich bieten wir eine Headless-API-Schnittstelle mit dedizierten Endpunkten für Formulare, Chat und Suche, mit der du die KI-Intelligenz von branchly direkt in deine eigenen Umgebungen integrieren kannst (wie z. B. WhatsApp for Business, Slack-Kanäle oder mobile Apps). Darüber hinaus ist Voice/Telefonie über Partneranbindungen integriert, die Sitzungsdaten an die Plattform zurückmelden und auf die bestehende branchly-Wissensbasis zugreifen.

Allgemeine Informationen

• Alle Benutzeroberflächen einer Anwendung teilen sich dieselbe Wissensbasis. Das Chat-Widget und der Chat teilen sich Designeinstellungen und Prompts.
• Alle branchly-Benutzeroberflächen sind Web Components. Dadurch lassen sie sich bei Bedarf mit individuellem CSS gestalten. Weitere Details findest du unter Individuelles Styling von Benutzeroberflächen.
• Die dynamischen Navigationsfunktionen erfordern, dass die Nodes in deiner Wissensbasis über Beziehungen miteinander verknüpft sind.
• Im Chat und im Navigator wird die node id des aktuell ausgewählten Nodes als Abfrageparameter (Query-Parameter) an die URL angehängt. Dies ermöglicht die Navigation über den Browserverlauf sowie das Teilen von Links zu spezifischen Informationen. Zudem können Suchmaschinen so die Inhalte innerhalb deiner Benutzeroberflächen crawlen. Das Verhalten der dynamischen Navigation kann in den Anwendungseinstellungen angepasst werden.
• Während die KI arbeitet – beispielsweise bei einer Suche oder beim Aufruf einer KI-Aktion – zeigen die Benutzeroberflächen kurze Statusmeldungen (wie „Suche nach Informationen“) anstelle technischer Details an. Diese Statusmeldungen werden über alle Interfaces hinweg in der Sprache deiner Besucher dargestellt.

Agent-Workflow und Interface-Tabs

Jede Interface-Seite im Dashboard ist in zwei Tabs unterteilt: Agent und Interface.

• Agent zeigt, wie das Interface eine Anfrage verarbeitet – als Abfolge einklappbarer Phasen in Ausführungsreihenfolge. Jede Phase zeigt einen Statuspunkt (aktiv, inaktiv oder unvollständig) und eine kurze Zusammenfassung der aktuellen Konfiguration, sodass du auf einen Blick siehst, wie der Agent eingerichtet ist.
• Interface enthält die Styling- und Erscheinungsbildeinstellungen, die in den folgenden Abschnitten beschrieben werden.

Die Phasen variieren je nach Interface. Für das Chat-Interface sind dies:

• Pre-Processing: Die Chat-Strategie und das KI-Modell, das der Agent verwendet, sowie die Strategie für Fragevorschläge.
• Retrieval: Reranking-Optionen, die beeinflussen, welche Inhalte der Wissensbasis ausgewählt werden – datumsbasiertes Reranking, Reranking nach Datensatzquelle und benutzerdefiniertes Boosting (Custom Boosting). Diese Einstellungen werden mit dem Such-Interface geteilt: Eine Änderung hier wirkt sich auch dort aus.
• Routing: Der Prompt für Routing-Anweisungen, der entscheidet, wie eine eingehende Anfrage behandelt wird (z. B. welche KI-Aktion aufgerufen wird), zusammen mit Kontext-Nodes, die in den Routing-Schritt eingefügt werden.
• Tools: Die KI-Aktionen, die derzeit für den Routing-Agenten dieses Interfaces aktiv sind, mit einem Link zur vollständigen Tool-Verwaltungsseite.
• Answering: Der Prompt für Ausgabeanweisungen (Output Instructions), der steuert, wie die finale Antwort formuliert wird, zusammen mit Kontext-Nodes, die in den Generierungsschritt eingefügt werden.
• Post-Processing: Was nach einer Antwort geschieht – Folgeaktionen und ob Anfragen klassifiziert werden (Intent-/Themenerkennung).

Phasen mit Prompts öffnen sich mit dem Prompt-Editor und dessen Versionsverlauf; die Auswahl von Kontext-Nodes wird sofort gespeichert. Wenn eine Phase ungespeicherte Änderungen enthält, wirst du vor dem Wechseln des Tabs um Bestätigung gebeten.

Die Prompts, die zuvor einen eigenen Tab hatten, sind nun Teil des Agent-Tabs – öffne die Routing- oder Answering-Phase, um sie zu bearbeiten.

Chat-Widget

Personalisiere deine Chat-Interfaces mit den folgenden Einstellungen:

• KI-Bubble: Wähle eine KI-Bubble aus den verfügbaren Optionen.
• Begrüßung: Definiere eine Willkommensnachricht für deine Nutzer. Du kannst für jedes Locale eine eigene Begrüßung festlegen.
• Name des Assistenten: Benenne deinen Chat-Assistenten passend zu deiner Marke oder Art des Services.
• Schriftart: Wähle eine Schriftart für den Text in deinem Chat-Interface.
• Farbeinstellungen:
  • Schriftfarbe: Wähle eine Farbe für den Haupttext inklusive Titeln.
  • Hintergrundfarbe: Lege eine Hintergrundfarbe für das gesamte Chat-Interface fest.
  • Nutzernachrichten-Farbe: Bestimme die Farbe für von Nutzern gesendete Nachrichten.
  • Hauptfarbe: Wähle das primäre Farbthema für dein Chat-Interface.
• Fragevorschläge: Konfiguriere vordefinierte Fragen, die Nutzern angezeigt werden, um sie durch die Suche zu leiten. Diese Fragen erscheinen, wenn Nutzer die Suche starten. Hier kannst du auch die Strategie für Fragevorschläge wählen: manual oder dynamic from page. Fragevorschläge können Nutzern auch angezeigt werden, wenn das Chat-Widget geschlossen ist (mehr dazu unter „Benutzeroberfläche einbinden“).
  • manual: Zeigt die oben manuell definierten Fragevorschläge an.
  • dynamic from page: Die KI generiert Fragevorschläge dynamisch basierend auf:
    • Inhalt der Seite, von der aus der Nutzer die Nachricht gesendet hat (z. B. die URL)
    • Fragen, die Nutzer zuvor auf dieser Seite gestellt haben
    • Prompt-Persona

Prompting

Prompt-Einstellungen befinden sich im Tab Agent der Interface-Seite (siehe Agent-Workflow und Interface-Tabs). Wähle aus vordefinierten Prompt-Vorlagen wie Kundensupport-Agent, Technischer Support-Agent, Produktberater oder Touristeninformation. Passe die Prompts an deinen spezifischen Anwendungsfall an.

• Persona (mit Einschränkungen): Anweisungen für die KI zum Umgang mit eingehenden Nachrichten. Welche Rolle soll die KI einnehmen, welche Einschränkungen gelten?
• Ausgabeanweisungen: Anweisungen, die die KI beim Erstellen der Antwort befolgen soll. Berücksichtige Tonalität, Antwortlänge und sprachliche Komplexität.
• Kontext-Nodes: Füge bestehende Nodes aus deiner Wissensbasis in die Prompts für jeden Schritt im branchly-KI-Prozess ein. Ein guter Anwendungsfall hierfür ist, wenn die Art der Fragen, die die KI beantworten soll, von dynamischen Informationen abhängt, die regelmäßig über einen Datenquellen-Zeitplan aktualisiert werden.

Öffnungsverhalten

Du kannst das Verhalten des Chat-Widgets steuern, wenn Nutzer deine Seite zum ersten Mal aufrufen. Siehe hierzu: Benutzeroberfläche einbinden.

Widget auf bestimmten Seiten ausblenden

Mit der Einstellung hide_widget_url_patterns kannst du das Chat-Widget auf bestimmten Seiten anhand von Glob-Patterns automatisch ausblenden (z. B. /checkout/**, /admin/**). Dies ist besonders nützlich, um zu verhindern, dass das Widget in sensiblen Prozessen wie dem Bezahlvorgang, in internen Administrationsbereichen oder überall dort erscheint, wo es ablenken würde, während es auf dem Rest deiner Website sichtbar bleibt.

Chat

Die Einstellungen zwischen Chat-Widget und Chat werden grundsätzlich geteilt.

Suche

Personalisiere dein Such-Interface mit den folgenden Einstellungen:

• KI-Bubble: Wähle eine KI-Bubble aus den verfügbaren Optionen.
• Schriftart: Wähle eine Schriftart für den Text in deinem Chat-Interface.
• Farbeinstellungen:
  • Schriftfarbe: Wähle eine Farbe für den Haupttext inklusive Titeln.
  • Hintergrundfarbe: Lege eine Hintergrundfarbe für das gesamte Chat-Interface fest.
  • Nutzernachrichten-Farbe: Bestimme die Farbe für von Nutzern gesendete Nachrichten.
  • Hauptfarbe: Wähle das primäre Farbthema für dein Chat-Interface.
• Feldtitel: Definiere Feldbeschriftungen oder Beschreibungen für jedes Locale:
  • Interface-Titel
  • Platzhalter im Eingabefeld
  • Nachricht bei generierter Antwort
  • Text des Absende-Buttons
  • Titel für Fragevorschläge
• Fragevorschläge: Konfiguriere vordefinierte Fragen, die Nutzern angezeigt werden, um sie durch die Suche zu leiten. Diese Fragen erscheinen, wenn Nutzer die Suche starten. Hier kannst du auch die Strategie für Fragevorschläge wählen: manual oder dynamic from page. Fragevorschläge können Nutzern auch angezeigt werden, wenn das Chat-Widget geschlossen ist (mehr dazu unter „Benutzeroberfläche einbinden“).
  • manual: Zeigt die oben manuell definierten Fragevorschläge an.
  • dynamic from page: Unsere branchly-KI generiert Fragevorschläge dynamisch basierend auf:
    • Inhalt der Seite, von der aus der Nutzer die Nachricht gesendet hat (z. B. die URL)
    • Bisherigen Fragen, die Nutzer auf dieser Seite gestellt haben
    • Prompt-Persona
• Suchergebnis-Tags: Zeige Tags oder Badges für jedes Suchergebnis an. In Kombination mit der Hervorhebung von Suchbegriffen hilft dies Nutzern, das für sie beste Ergebnis zu identifizieren und zu verstehen, zu welchem übergeordneten Thema oder welcher Kategorie das Ergebnis gehört. Das Feld kann über das Feld custom_metadata mit einem tags-Array befüllt werden oder durch Extrahieren der article:tag-Seitenmetadaten beim Crawlen der Website. Du kannst zwischen folgenden Optionen wählen:
  • None: Es werden keine Tags angezeigt, selbst wenn sie vorhanden sind.
  • Web Page Metadata: Tags aus dem Website-Crawling (regulärer und Custom Website Crawler) basierend auf article:tag-OpenGraph-Metadaten.
  • Custom Metadata: Benutzerdefinierte tags. Du kannst diese über die Option „Custom Tags“ der Website-Crawler-Datenquelle oder über den Node-Editor hinzufügen.
• Kontaktoptionen anzeigen: Konfiguriere Kontaktoptionen, die Nutzern angezeigt werden, wenn sie Kontakt aufnehmen möchten. Du kannst mehrere Kontaktoptionen oder Kontaktformulare (Tools) aus der Wissensbasis hinzufügen. Wenn diese Einstellung aktiviert ist, wird nach einer Interaktion der Nutzer mit dem Interface ein neuer Tab neben „Suchergebnisse“ hinzugefügt.

Formular

Das Formular-Interface ermöglicht es Besuchern, eine strukturierte Anfrage einzureichen, wenn eine reine Chat-Antwort nicht ausreicht. Es läuft in einem zweistufigen Ablauf:

1. Initiale Antwort. Die Anfrage des Besuchers wird vom Form-Agenten verarbeitet, der direkt auf Basis deiner Wissensbasis (mit Retrieval-Kontext) antwortet. Antworten werden in Echtzeit gestreamt, sodass Teilantworten sofort sichtbar sind und nicht erst nach der vollständigen Generierung.
2. Formular-Routing. Wenn der Besucher die Antwort als unzureichend empfindet und stattdessen eine Anfrage einreichen möchte, wählt der Routing-Agent das passende Formular aus deiner Wissensbasis aus und erklärt, warum dieses Formular gewählt wurde. Das Formular wird im Interface gerendert, und eingereichte Formulardaten können über den Endpunkt für Formularübermittlungen Folgeaktionen (wie Rückrufe) auslösen.

Konfigurationsoptionen für das Formular-Interface stehen im Dashboard zur Verfügung. Dort kannst du Formulareinstellungen und das Erscheinungsbild (Button-Texte und der KI-Hinweis/Disclaimer mit Übersetzungen pro Locale) anpassen. Alle Formularinteraktionen werden als separate Anfragetypen protokolliert und erscheinen zusammen mit deinen anderen Interfaces in Insights und Konversationen.

Navigator

Erweitere deinen Navigator mit vielfältigen Stil- und Anpassungsoptionen:

• KI-Bubble: Wähle eine KI-Bubble aus den verfügbaren Optionen.
• Navigator-Titel: Füge einen Titel hinzu, der ganz oben erscheint.
• Schriftfamilie: Wähle aus verschiedenen Schriftstilen wie sans-serif, serif und monospace.
• Maximal angezeigte Nodes: Begrenze die Anzahl der sichtbaren „Nächster Node“-Buttons. Weitere Nodes sind über einen „Plus“-Button zugänglich.
• Hintergrundbild-URL: Gib die URL eines Bildes ein, das als Hintergrund gekachelt werden soll.
• Element-Rahmenradius: Wähle zwischen den Rahmenstilen Default, Round oder Sharp.
• Node-Schatten: Aktiviere diese Option, um Nodes einen dezenten Schatten zu verleihen.
• Ausrichtung des Navigator-Titels: Positioniere den Titel am Anfang (Start) oder zentriert (Center).
• Farbeinstellungen:
  • Schriftfarbe: Wähle eine Farbe für Haupttext und Titel.
  • Hintergrundfarbe: Bestimme eine Hintergrundfarbe für das Interface.
  • Suchhervorhebungs-Farbe: Wähle eine Farbe zur Hervorhebung von Suchergebnissen.
  • Suchergebnis-Hintergrundfarbe: Lege eine separate Farbe für den Hintergrund von Suchergebnissen fest.
  • Farbe nächster Nodes: Wähle eine Farbe für die Navigationsbuttons zum nächsten Node.
  • Schriftfarbe nächster Nodes: Wähle eine Schriftfarbe für den Text auf den Buttons für nächste Nodes.
  • Farbe ausgewählter Nodes: Bestimme eine Farbe für bereits ausgewählte Nodes.
  • Schriftfarbe ausgewählter Nodes: Wähle eine Schriftfarbe für den Text auf aktuell ausgewählten Nodes.
  • Farbe der fixierten Suchleiste: Lege eine Farbe für die fixierte Suchleiste (Sticky Searchbar) fest.

Hinweis: Du kannst entweder ein Hintergrundbild oder eine Hintergrundfarbe für deinen Navigator anzeigen lassen, nicht beides.

• Suchergebnis-Tags: Zeige Tags oder Badges für jedes Suchergebnis an. In Kombination mit der Hervorhebung von Suchbegriffen hilft dies Nutzern, das für sie beste Ergebnis zu identifizieren und zu verstehen, zu welchem übergeordneten Thema oder welcher Kategorie das Ergebnis gehört. Das Feld kann über das Feld custom_metadata mit einem tags-Array befüllt werden oder durch Extrahieren der article:tag-Seitenmetadaten beim Crawlen der Website. Du kannst zwischen folgenden Optionen wählen:
  • None: Es werden keine Tags angezeigt, selbst wenn sie vorhanden sind.
  • Web Page Metadata: Tags aus dem Website-Crawling (regulärer und Custom Website Crawler) basierend auf article:tag-OpenGraph-Metadaten.
  • Custom Metadata: Benutzerdefinierte tags. Du kannst diese über die Option „Custom Tags“ der Website-Crawler-Datenquelle oder über den Node-Editor hinzufügen.
• Fixierte Suchleiste (Sticky Searchbar):
  • Fixierte Suchleiste mobil: Aktiviere eine fixierte Suchleiste auf Mobilgeräten.
  • Fixierte Suchleiste Desktop: Aktiviere eine fixierte Suchleiste auf Desktop-Bildschirmen.

Voice

branchly arbeitet mit Partnern für Voice-Agenten zusammen: Pendura, The Red Phone und Newcall. Pendura bietet Voice-Agent-Lösungen, die sich nahtlos mit deiner branchly-Wissensbasis verbinden. Den Anbieter wählst du bei der Einrichtung des Voice-Interfaces im Dashboard aus.

Vorteile

• Nutze deine bestehende branchly-Wissensbasis für Voice-Interaktionen – kein Aufbau einer separaten Wissensbasis erforderlich.
• Automatische Wissenssynchronisation: Aktualisierungen in deiner branchly-Wissensbasis stehen Voice-Agenten sofort zur Verfügung.
• Konsolidierte Analysen: Alle Voice-Sitzungen werden für Analysen mit branchly synchronisiert. Analysiere sämtliche Kundeninteraktionen an einem zentralen Ort, um deine Inhalte zu optimieren.

Integrationsschritte

Die Einrichtung der Voice-Integration umfasst drei Hauptschritte:

1. API-Schlüssel erstellen

Erstelle einen API-Schlüssel auf der branchly-Einstellungsseite. Dieser Schlüssel authentifiziert Anfragen deines Voice-Anbieters an deine branchly-Wissensbasis.

• Navigiere im branchly-Dashboard zu den Einstellungen.
• Erstelle einen neuen API-Schlüssel für die Voice-Integration.
• Kopiere den API-Schlüssel.
• Hinterlege diesen API-Schlüssel im Dashboard deines Voice-Anbieters (z. B. Pendura), um Anfragen zu authentifizieren.

2. Voice-Anbieter konfigurieren

Dein Voice-Anbieter (wie Pendura) verwendet den API-Schlüssel, um:

• Suchanfragen an branchly zu senden, um relevante Inhalte der Wissensbasis abzurufen.
• Nach Beendigung jeder Sprach-Sitzung Analysedaten an branchly zu übermitteln.

3. Voice-Sitzungen überwachen

Sobald die Integration abgeschlossen ist, kannst du Daten zu deinen Voice-Sitzungen auf den Seiten Insights und Konversationen in branchly einsehen. Die Voice-Sitzungsdaten erscheinen zusammen mit den Analysen deiner anderen Interfaces.

API (Headless-Interface)

Nutze die öffentliche branchly-API (https://api.branchly.io/public/docs), um direkt aus deinen eigenen Systemen und individuellen Kanälen (z. B. WhatsApp for Business, Slack-Kanäle) mit Endpunkten für Formulare, Chat und Suche zu interagieren – ganz ohne unsere browserbasierten Widgets.

Typische Anwendungsfälle

• Mobile & Web-Apps
• WhatsApp
• Slack-, Teams- oder Messenger-Integrationen
• Interne Tools und Workflows

Integrationsschritte

Die Einrichtung der API-Integration umfasst drei Hauptschritte:

1. API-Schlüssel erstellen

Erstelle einen API-Schlüssel auf der branchly-Einstellungsseite. Dieser Schlüssel authentifiziert Anfragen deines Systems an deine branchly-Anwendung.

• Navigiere im branchly-Dashboard zu den Einstellungen.
• Erstelle einen neuen API-Schlüssel.
• Kopiere und speichere diesen API-Schlüssel im System deiner Wahl, um Anfragen zu authentifizieren.

2. Anfragen stellen

Sende Nutzernachrichten an unsere öffentliche API und binde die Antworten des branchly-KI-Agenten in deine Anwendung ein.

3. API-Interaktionen überwachen

Sieh dir Analysen zu deinen API-Interaktionen auf der Seite Insights an und prüfe einzelne Gespräche auf der Seite Konversationen.

Hinweise

• Routing- & Ausgabe-Prompts: Das API-Interface unterstützt separate Prompts für Routing und Ausgabe. Der Routing-Prompt entscheidet, wie eine eingehende Anfrage behandelt werden soll (z. B. welche KI-Aktion aufgerufen wird), während der Ausgabe-Prompt steuert, wie die finale Antwort formuliert wird. So können Integrationen wie WhatsApp einen Prompt für das Routing und einen anderen, kürzeren und für reinen Text optimierten Prompt für die Antwort verwenden. Wenn ein Ausgabeformat vom eingebundenen Kanal nicht unterstützt wird, werden nicht unterstützte UI-Elemente (wie Buttons oder Karten-Einbettungen) automatisch weggelassen.
• Der Parameter session_id kann als UUID deines Systems übergeben werden. Alternativ wird eine session_id von unserem API-Endpunkt zurückgegeben. Bei nachfolgenden Nutzernachrichten solltest du die session_id im Body der Anfragen übergeben, um den Verlauf der Interaktion beizubehalten.
• Quellenangaben werden nicht in der eigentlichen KI-Antwort angezeigt, sondern im Feld events. In eingebetteten Anwendungen können komplexe Visualisierungen wie Buttons, Karussells oder Quellen oft nicht inline, sondern nur separat dargestellt werden.
• Streaming wird derzeit nicht unterstützt.

WebMCP

WebMCP stellt die KI-Aktionen deiner Anwendung KI-Agenten zur Verfügung, die direkt im Browser des Besuchers integriert sind (z. B. Gemini in Chrome). Der Browser-Agent erkennt, welche Tools deine Anwendung bereitstellt, und kann diese direkt aufrufen – die Ausführung erfolgt weiterhin auf den Servern von branchly unter Verwendung derselben Tool-Registry wie bei deinen anderen Interfaces.

Du steuerst, welche Tools bereitgestellt werden: Wähle in den Einstellungen für KI-Aktionen explizit die Tools aus, die du für Browser-Agenten verfügbar machen möchtest. Unter Headless → WebMCP kannst du zudem aktivieren oder deaktivieren, ob Tools überhaupt über WebMCP bereitgestellt werden.

Es werden ausschließlich Informationsabfrage-Tools und Formulare unterstützt (wie Wissensbasis, Node-Lookup, Websuche, Webseiten-Reader, Wetter, MCP-Server, API); interaktive oder UI-abhängige Tools wie Buttons und Calendly werden nicht unterstützt.

Sobald der Browser eines Besuchers deine Tools über WebMCP anfordert, erscheinen die Interaktionen zusammen mit deinen anderen Interfaces in Insights und Konversationen.