branchly®
Demo buchen

Anleitungen

Individuelles Styling von Benutzeroberflächen via CSS

  • Web Components: Unsere Benutzeroberflächen sind als Web Components aufgebaut. Web Components sind ein Standard wiederverwendbarer Custom Elements – mit vollständig vom restlichen Code gekapselter Funktionalität –, die du flexibel in deinen Web-Apps nutzen kannst. Weitere Details findest du in der MDN-Dokumentation zu Web Components.
  • Style-Vererbung: Diese Benutzeroberflächen können bestimmte Stilelemente der eingebetteten Seite erben, wie beispielsweise font-size und font-family. Dies stellt sicher, dass sich die Oberfläche harmonisch in das Design der Host-Seite einfügt. Style-Vererbung greift nur für Bereiche, die deine eigenen Inhalte darstellen. Für branchly-eigene Komponenten werden Stile (mit Ausnahme von font-family) nicht vererbt.
  • Anpassung mit CSS: Um das Aussehen unserer Oberflächen nach deinen Vorstellungen anzupassen, kannst du eigene CSS-Stile auf die unten aufgelisteten vordefinierten Container-Selektoren der jeweiligen Oberfläche anwenden.
  • Anwenden eigener Stile: Du kannst deine CSS-Regeln entweder in ein <style>-Tag direkt im HTML-Dokument einfügen oder in einer externen .css-Datei hinterlegen. Beim Definieren der Stile kann die !important-Deklaration erforderlich sein, um Standardstile zu überschreiben. Beispielsweise sorgt font-size: 0.7rem !important; dafür, dass deine Größenangabe Vorrang vor den bestehenden Regeln hat.

Textfarbe für Elemente mit weißem Hintergrund

Einige Elemente (Fragevorschlags-Bubbles, Reset-Buttons) besitzen einen festen weißen Hintergrund. Ihre Textfarbe passt sich zur Sicherstellung der Lesbarkeit automatisch an: Ist dein konfiguriertes font_color auf weißem Hintergrund zu hell, wird automatisch eine gut lesbare Fallback-Farbe genutzt. Dadurch bleibt Text unabhängig von deiner Farbwahl stets lesbar. Um dieses Verhalten zu überschreiben, adressiere die spezifische Klasse des Elements (z. B. .suggested-question { color: deine-farbe !important; }).

Stile bereits beim Einbinden festlegen

Du kannst Stile und Anpassungen bereits bei der Einbindung des Containers auf deiner Website mitgeben. Mehr zu dieser Option erfährst du hier.

Chat (Chat Embed)

#branchly-chat-embed-container {
}

.embed-title {
  /* alias: .welcome-heading */
}

.welcome-heading {
  /* alias: .embed-title */
}

.welcome-heading-container {
}

.home-button {
  /* alias: .reset-button */
}

.reset-button {
  /* alias: .home-button */
}

.next-nodes-container {
}

.next-node {
}

.assistant-name {
}

.assistant-message {
}

.user-name {
}

.user-message {
}

.chat-container {
}

.chat-button {
}

.chat-input {
}

.chat-input::-webkit-input-placeholder {
  /* WebKit-Browser */
}

.chat-input:-moz-placeholder {
  /* Mozilla Firefox 4 bis 18 */
}

.chat-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.chat-input:-ms-input-placeholder {
  /* Internet Explorer 10 */
}

.suggested-questions-container {
}

.suggested-question {
}

.carousel-button-left {
}

.carousel-button-right {
}

Chat-Widget

#branchly-chat-widget-container {
}

.chat-widget-container {
}

.widget-header-container {
}

.widget-interaction-container {
}

.close-widget-button {
}

.welcome-message {
  /* alias: .welcome-heading */
}

.welcome-heading {
  /* alias: .welcome-message */
}

.widget-welcome-message-container {
  /* alias: .welcome-heading-container */
}

.welcome-heading-container {
  /* alias: .widget-welcome-message-container */
}

.chat-bubble-container {
}

.next-nodes-container {
}

.next-node {
}

.assistant-name {
}

.assistant-message {
}

.user-name {
}

.user-message {
}

.chat-container {
}

.chat-button {
}

.chat-input {
}

.chat-input::-webkit-input-placeholder {
  /* WebKit-Browser */
}

.chat-input:-moz-placeholder {
  /* Mozilla Firefox 4 bis 18 */
}

.chat-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.chat-input:-ms-input-placeholder {
  /* Internet Explorer 10 */
}

.chat-entry-suggestions-container {
}

.suggested-question {
}

.close-suggested-questions-container-button {
}

.reset-button {
}

.carousel-button-left {
}

.carousel-button-right {
}
#branchly-embed-container {
}

.embed-title {
  /* alias: .welcome-heading */
}

.welcome-heading {
  /* alias: .embed-title */
}

.welcome-heading-container {
}

.next-nodes-container {
}

.next-node {
}

.search-container {
}

.search-button {
}

.home-button {
}

.content-container {
}

.selected-node {
}

.selected-nodes-container {
}

.search-input {
}

.search-input::-webkit-input-placeholder {
  /* WebKit-Browser */
}

.search-input:-moz-placeholder {
  /* Mozilla Firefox 4 bis 18 */
}

.search-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
}

.search-input:-ms-input-placeholder {
  /* Internet Explorer 10 */
}

Search (Search Interface)

#branchly-search-interface-container {
}

.search-app-container {
}

.search-entry-point {
}

.branchly-heading-bubble {
}

.branchly-search-bubble {
}

.heading-message-container {
  /* alias: .welcome-heading-container */
}

.welcome-heading-container {
  /* alias: .heading-message-container */
}

.searchbar-container {
}

.searchbar {
}

.searchbar-form {
}

.searchbar-submit-button {
}

.reset-search-button {
  /* alias: .reset-button */
}

.reset-button {
  /* alias: .reset-search-button */
}

.ai-message-container {
}

.ai-message {
}

.search-results-container {
}

.search-result-card {
}

.search-result-card-image {
}

.search-result-card-content {
}

.search-result-card-accordion-content {
}

.suggested-questions-container {
}

.suggested-questions {
}

.suggested-question {
}

.welcome-heading {
}

Search Interface – Praktische Styling-Beispiele

Styling des Einstiegs-Buttons:

Standardmäßig zeigt der Einstiegs-Button (aktiviert über das Attribut data-view-mode="search-button") ein Lupen-Icon zusammen mit dem Text "Search... | ⌘ + K" bzw. "Search... | Strg + K" an. Der zweite Teil des Textes signalisiert den Tastatur-Shortcut zum Öffnen der Oberfläche unter macOS oder Windows.

Wenn du nur das Lupen-Icon ohne den Begleittext anzeigen möchtest, kannst du dies mit folgenden CSS-Regeln umsetzen:

.search-entry-point {
    border: none; /* Entfernt den Rahmen */
    padding: 10px; /* Passt das Padding an; trage hier deinen gewünschten Wert ein */
    svg {
      margin: 0; /* Entfernt den Standard-Icon-Abstand */
    }
  }

  .search-entry-point span {
    display: none; /* Blendet das Element mit dem Text aus */
  }

Das Ergebnis sieht wie folgt aus:

Selbstverständlich kannst du unterschiedliche Stile für verschiedene Endgeräte definieren. Nutze dazu @media-Queries wie im folgenden Beispiel:

/* Nur das Lupen-Icon auf kleineren Bildschirmen anzeigen */

@media (max-width: 768px) { /* Setze hier deinen eigenen Breakpoint */
  .search-entry-point {
    border: none; /* Entfernt den Rahmen */
    padding: 10px; /* Passt das Padding an; trage hier deinen gewünschten Wert ein */
    svg {
      margin: 0;
      font-size: 30px; /* Passt die Icon-Größe an; trage hier deinen gewünschten Wert ein */
    }
  }

  .search-entry-point span {
    display: none; /* Blendet das Element mit dem Text aus */
  }
}

Chat-Widget – Praktische Styling-Beispiele

Widget um 120px nach oben verschieben:

Wenn das Widget Elemente am unteren Bildschirmrand überlagert (z. B. ein Cookie-Banner oder einen Sticky Footer), kannst du das gesamte Widget per CSS nach oben versetzen. Das folgende Beispiel hebt alle UI-Elemente des Widgets – den Einstiegs-Bubble, die vorgeschlagenen Fragen, das geöffnete Chat-Panel und den Schließen-Button – um 120px an, sowohl auf dem Desktop als auch auf mobilen Geräten. Auf Smartphones behält das geöffnete Panel seine standardmäßige Vollbild-Position bei, sodass dort lediglich der Einstiegs-Bubble und die Fragevorschläge angehoben werden.

Füge die Regeln in ein <style>-Tag auf deiner Seite oder in deine externe .css-Datei ein:

/*
 * Verschiebt das Chat-Widget um 120px nach oben – auf Desktop und Mobile:
 * - Einstiegs-Bubble und vorgeschlagene Fragen (bei geschlossenem Widget)
 * - geöffnetes Chat-Panel und Schließen-Button
 *
 * Auf Mobile behält das geöffnete Panel seine standardmäßige Vollbild-Position;
 * dort werden nur der Einstiegs-Bubble und die vorgeschlagenen Fragen angehoben.
 */

/*
 * Widget-Container, verankert in der unteren rechten Ecke. Das Anheben
 * dieses Containers verschiebt das geöffnete Panel auf dem Desktop sowie
 * den Einstiegs-Bubble + Fragevorschläge auf Mobile. Verwende margin-bottom
 * (nicht transform/translate), damit die interne Positionierung des Widgets
 * intakt bleibt.
 */
#branchly-chat-widget-container {
  margin-bottom: 120px !important;
}

/*
 * Nur Desktop und Tablet: Unterhalb von 471px schaltet das Widget auf
 * sein mobiles Layout um. Auf großen Bildschirmen sind der Einstiegs-Bubble,
 * das Popup für Fragevorschläge und der Schließen-Button unabhängig vom
 * Container verankert, weshalb jedes Element um 120px angehoben werden muss.
 */
@media (min-width: 471px) {
  /*
   * Einstiegs-Bubble (wird bei geschlossenem Widget angezeigt). Die :not()-Bedingung
   * lässt den Willkommens-Bubble im geöffneten Panel unberührt – da dieselbe
   * Klasse für beide genutzt wird, behalte diesen Selektor beim Kopieren bei.
   */
  .chat-bubble-container:not(.widget-interaction-container *) {
    margin-bottom: 120px !important;
  }

  /* Popup für Fragevorschläge mit den Frage-Buttons */
  .chat-entry-suggestions-container {
    margin-bottom: 120px !important;
  }

  /* Schließen-Button des geöffneten Chat-Panels */
  .close-widget-button {
    margin-bottom: 120px !important;
  }

  /*
   * Hält das geöffnete Panel auf niedrigen Bildschirmen nach dem Anheben im Viewport.
   * 170px = standardmäßiger Abstand des Widgets von 50px zum unteren Rand + 120px Verschiebung.
   * Passe diesen Wert zusammen mit dem Verschiebungswert oben an.
   * Auf ausreichend hohen Bildschirmen hat diese Regel keine Auswirkung.
   */
  .chat-widget-container {
    max-height: calc(100svh - 170px) !important;
  }
}

/*
 * Nur Mobile: Auf Smartphones würde das geöffnete Panel die 120px-Verschiebung
 * des Containers erben. Dies fixiert es wieder am unteren Bildschirmrand
 * in Standard-Vollbildgröße, sodass mobil nur der Einstiegs-Bubble und
 * die vorgeschlagenen Fragen angehoben werden.
 */
@media (max-width: 470px) {
  .chat-widget-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100svw !important;
    height: 100svh !important;
  }
}

Um das Widget um einen anderen Abstand zu verschieben, ersetze die 120px-Werte. Beachte, dass die 170px in der max-height-Regel die Summe aus dem Standardabstand des Widgets von 50px zum unteren Bildschirmrand und der Verschiebung von 120px darstellen – passe diesen Wert entsprechend an.

Jetzt branchly erleben!

Termin vereinbaren