branchly®
Demo buchen

Anleitungen

Einbinden einer Benutzeroberfläche

Allgemeine Schritte

Um eine Benutzeroberfläche einzubinden, benötigst du ein script- sowie ein Container-div-Element in deinem HTML-Code. Passe id, data-token und src passend zu deiner Oberfläche und Anwendung an.

Info: Navigiere am besten im Dashboard zur jeweiligen Benutzeroberfläche und kopiere die vorgefertigten Code-Snippets von dort, um sicherzustellen, dass du das richtige script und den passenden container/div verwendest. Passe anschließend bei Bedarf weitere Attribute an.

1. Script einfügen

Platziere das entsprechende Script entweder am Ende des <body>-Tags oder im <head> deines HTML-Dokuments.

<script async
  type="module"
  src="<link to script.js>"
></script>

2. Container-div-Element hinzufügen

Platziere das div-Element an der Stelle, an der die Benutzeroberfläche auf deiner Seite erscheinen soll. Ersetze <YOUR TOKEN> durch den tatsächlichen Token deiner Anwendung. Du kannst den Container per CSS stylen, um Breite und Höhe festzulegen oder weitere Optionen zu konfigurieren. Das id-Attribut hängt von der jeweiligen Benutzeroberfläche ab.

<div
  id="<container id for interface>"
  data-token="<YOUR TOKEN>"
></div>

3. Sprach-Tag festlegen

Eine Anwendung ist standardmäßig auf die Unterstützung mehrerer Sprachen und Regionen ausgelegt. Um sicherzustellen, dass die richtigen Inhalte ausgeliefert werden, musst du ein gültiges Locale im Format des zweistelligen ISO-Sprach- und Ländercodes angeben.

Option 1: Seitenweites Sprach-Tag nutzen

Du kannst das globale lang-Attribut im <html>-Tag deiner Website setzen, zum Beispiel:

<html lang="de_DE"> 
<!-- Beispiel für Deutsch/Deutschland -->

Option 2: Sprach-Tag direkt am Container angeben

Alternativ kannst du das lang-Attribut direkt am Container-div definieren. Dies überschreibt die seitenweite Einstellung:

<div
  id="<container id for interface>"
  data-token="< YOUR TOKEN >"
  lang="de_DE">
</div>

Tipp: Stelle sicher, dass du deine Locales und Einbindungsorte in den Einstellungen des branchly-Dashboards hinterlegt hast.

4. (Optional) Content Security Policy anpassen

Falls du eine Content Security Policy (CSP) einsetzt, stelle bitte sicher, dass deine Richtlinie unsere Domain branchly.io enthält, damit die branchly-Oberflächen ordnungsgemäß geladen werden können. Dadurch wird die Ausführung aller erforderlichen Scripts, APIs und Assets erlaubt.

Chat-Widget

Sowohl das script als auch das div sollten im <body>-Tag deiner Website platziert werden.

script

<script async
type="module"
src="https://chat-widget.branchly.io/assets/index.js">
</script>

div

<div
id="branchly-chat-widget-container"
data-token="<YOUR TOKEN>"
data-custom-styles="false"
>
</div>

Optionale Attribute:

  1. Um Nutzern bei geschlossenem Widget bis zu 3 vorgeschlagene Fragen anzuzeigen, setze das Attribut auf questions. Jede dieser Fragen über dem Chat-Bubble dient als Einstiegspunkt in den Chat; ein Klick darauf startet die Konversation. Du kannst festlegen, ob diese Anzeige nur auf großen Bildschirmen oder auch auf kleineren Displays aktiv sein soll:

    <div
  id="branchly-chat-widget-container"
  data-token="<YOUR TOKEN>"
  data-chat-widget-popup-lg="questions"
  data-chat-widget-popup-sm="questions"
></div>

  2. Du kannst steuern, ob sich der Chat-Bubble standardmäßig öffnet, wenn ein Nutzer deine Website besucht. Dies wird über den Parameter data-open-default im <div>-Element gesteuert:

    <div
  id="branchly-chat-widget-container"
  data-token="<YOUR TOKEN>"
  data-open-default="true"
></div>

  3. Du kannst Stile (per CSS) bereits bei der Einbindung des Containers auf deiner Website anpassen. Ein typischer Anwendungsfall ist die Justierung des z-index, damit andere Elemente deiner Seite das geöffnete Chat-Widget nicht überlagern:

    <div
  id="branchly-chat-widget-container"
  data-token="<YOUR TOKEN>"
  style="position: fixed; z-index: 2147483647;"
></div>

  4. Für weitergehendes Styling kannst du das Chat-Widget über eigene CSS-Klassenselektoren anpassen. Wenn du stattdessen die festen Standard-Stile des Widgets nutzen und Konflikte mit dem Website-Design vermeiden möchtest, setze data-custom-styles="false" am Widget-Container:

    <div 
  id="branchly-chat-widget-container" 
  data-token="<YOUR TOKEN>"
  data-custom-styles="false"
></div>

Custom Element <branchly-chat-widget>

Das Chat-Widget steht auch als eigenständiges HTML Custom Element bereit. Anstatt das Script zu laden und ein Container-div anzulegen, bindest du das Element direkt in dein HTML ein. Dies vereinfacht die seitenübergreifende Wiederverwendung und verhält sich konsistent und vorhersehbar.

<script async type="module"
  src="https://chat-widget.branchly.io/assets/index.js"
></script>

<branchly-chat-widget
  data-token="<YOUR TOKEN>"
></branchly-chat-widget>

Standardmäßig rendert das Element in sein Shadow Root, wodurch die Stile des Widgets vollständig von deiner Seite isoliert bleiben. Setze data-custom-styles="true" am Element, um stattdessen in das Light DOM zu rendern, sodass du das Widget mit dem CSS deiner Website stylen kannst (dieselbe Option wie am Container-div).

Die gleichen optionalen Attribute wie am Container-div werden auch am Custom Element unterstützt, z. B. data-open-default="true" und die Attribute für Fragevorschläge data-chat-widget-popup-lg / data-chat-widget-popup-sm:

<branchly-chat-widget
  token="<YOUR TOKEN>"
  data-custom-styles="true"
  data-open-default="true"
></branchly-chat-widget>

Chat

script

<script async
type="module"
src="https://chat-embed.branchly.io/assets/index.js">
</script>

div

<div
id="branchly-chat-embed-container"
data-token="<YOUR TOKEN>"
>
</div>

Search Interface

script

<script async
type="module"
src="https://search-interface.branchly.io/assets/index.js">
</script>

div

Du kannst das Search-Interface über ein <div>-Element mit dem Attribut data-view-mode einbinden. Es stehen zwei Modi zur Verfügung:

  1. Search Button: Nutze den Modus search-button, um einen als Suchfeld gestalteten Button anzuzeigen. Bei Klick öffnet sich das Suchinterface in einem Modal. Diese Option ist ideal, um die Suche seitenweit verfügbar zu machen.
  2. Inline Search Interface: Nutze den Modus inline, um das Suchinterface direkt und ohne Modal-Verhalten in die Seite einzubetten. Dies eignet sich für Seiten, auf denen Suchergebnisse direkt im Layout angezeigt werden sollen.
<div 
id="branchly-search-interface-container" 
data-token="<YOUR TOKEN>"
data-view-mode="search-button">
</div>

Standardmäßig besitzt der Interface-Container vordefinierte Stile. Wenn du eigene Stile nutzen oder unsere Klassen überschreiben möchtest, füge dem Container das Attribut data-custom-styles="true" hinzu, bevor du eigenes CSS anwendest. Den Sucheinstiegs-Button (der das Modal öffnet) kannst du auch ohne dieses Attribut individuell stylen.

<div 
  id="branchly-search-interface-container" 
  data-token="<YOUR TOKEN>"
  data-view-mode="search-button"
  data-custom-styles="true">
</div>

Eigener Trigger-Button

Statt des integrierten Sucheinstiegs-Buttons kannst du jedes beliebige Element auf deiner Seite in einen Trigger verwandeln, der das Suchinterface öffnet. Füge dem Element einfach das Attribut data-branchly-search-trigger zusammen mit deinem Anwendungs-Token hinzu:

<button
  data-branchly-search-trigger
  data-token="<YOUR TOKEN>">
  Search
</button>

Sobald das Script des Search-Interfaces geladen wird und ein Element mit diesem Attribut findet:

  • Öffnet ein Klick auf das Element das Suchinterface in einem Modal (der Tastatur-Shortcut Strg/⌘ + K funktioniert weiterhin).
  • Der integrierte Sucheinstiegs-Button wird nicht gerendert, dein eigenes Element ersetzt ihn also vollständig.
  • Falls auf der Seite noch kein branchly-search-interface-container existiert, wird automatisch ein versteckter Container anhand des Trigger-Elements angelegt. Ein bereits existierender Container bleibt unberührt, sodass du einen benutzerdefinierten Trigger mit der regulären Container-Einbindung kombinieren kannst.
  • Optionale Attribute am Trigger – wie data-custom-styles und lang – werden automatisch an den erstellten Container weitergereicht.

Dies ist besonders nützlich, wenn sich der Sucheinstiegspunkt nahtlos in das eigene Designsystem deiner Website einfügen soll.

Form

script

<script
  type="module"
  src="https://form.branchly.io/assets/index.js">
</script>

div

<div
  id="branchly-form-container"
  data-token="<YOUR TOKEN>"
>
</div>

Setze das Attribut data-token auf deinen Anwendungs-Token. Der Container erfordert ein lang-Attribut – entweder direkt am Container selbst oder seitenweit am <html>-Tag (siehe Sprach-Tag festlegen) mit einem gültigen Locale wie de_DE oder en_US.

script

<script async
type="module"
src="https://embed.branchly.io/assets/index.js">
</script>

div

<div
id="branchly-embed-container"
data-token="<YOUR TOKEN>"
>
</div>

Jetzt branchly erleben!

Termin vereinbaren