Integrationsleitfaden

1 Schnellstart

Die Integration des FINO ChatBots erfordert nur drei Zeilen Code. Binden Sie CSS und JavaScript vom CDN ein und platzieren Sie das Chat-Element. Optional können Sie eine externe JSON-Konfiguration über config-url laden.

                    <!-- 1. CSS einbinden -->

                    <link rel="stylesheet" href="https://cdn.formbot.ai/widgets/v1/fino-chat/styles.css">

                    <!-- 2. JavaScript einbinden -->

                    <script type="module" src="https://cdn.formbot.ai/widgets/v1/fino-chat/main.js"></script>

                    <!-- 3. Chat-Element platzieren (mit optionaler config-url) -->

                    <fino-chat config-url="https://cdn.formbot.ai/configs/bol/chat-config.json"></fino-chat>

Hinweis: Das <fino-chat>-Element ist eine Web-Komponente und funktioniert in jeder modernen Webseite – unabhängig vom verwendeten Framework oder CMS. Auf Wunsch konfigurieren und hosten wir die Webkomponenten auch kundenspezifisch für Sie.

2 Runtime-Konfiguration

Mit dem Attribut config-url können Sie eine externe JSON-Datei laden, die CSS-Variablen und HTML-Attribute enthält. So lässt sich das Widget zentral konfigurieren, ohne den HTML-Code zu ändern.

JSON-Aufbau

                    {

                      "cssVars": {

                        "--chat-primary": "#005587",

                        "--chat-primary-strong": "#00446b",

                        "--chat-bg": "#f6f7fb",

                        "--chat-surface": "#ffffff",

                        "--chat-text": "#0f172a",

                        "--chat-muted": "#475569",

                        "--chat-border": "#d0d5dd"

                      },

                      "attrs": {

                        "chat-endpoint": "https://chat.formbot.ai/ihr-tenant",

                        "theme": "custom",

                        "supported-languages": "de,en",

                        "default-language": "de",

                        "show-feedback": "true",

                        "square-corners": "false",

                        "brand-title-de": "Bürger-Assistent",

                        "brand-title-en": "Citizen Assistant"

                      }

                    }

Prioritätsreihenfolge

HTML-Attribute (höchste Priorität) – direkt am Element gesetzte Attribute
config-url JSON – Werte aus der externen Konfigurationsdatei
Built-in Defaults – eingebaute Standardwerte des Widgets

3 Branding – Texte

Passen Sie Titel, Begrüßung, Disclaimer und Quick-Reply-Texte über HTML-Attribute an. Alle Attribute unterstützen Sprachsuffixe für mehrsprachige Konfiguration.

Attribut	Beschreibung
`brand-title`	Titel in der Kopfzeile des Chat-Fensters
`brand-subtitle`	Begrüßungszeile unterhalb des Avatars
`brand-greeting`	Ausführlicher Begrüßungstext
`brand-disclaimer`	Hinweistext unterhalb des Eingabefelds
`brand-help-text`	Hilfetext bei Klick auf den Hilfe-Button
`brand-quick-replies-sample-title`	Anzeigetexte der Quick-Reply-Buttons (kommagetrennt)
`brand-quick-replies-query`	Tatsächliche Anfragen pro Button (kommagetrennt oder JSON-Array)

Mehrsprachige Konfiguration

Alle brand-*-Attribute unterstützen Sprachsuffixe: brand-title-de, brand-title-en, etc.

Unterstützte Sprachen: de, en, sk, fr, ar, ru, tr, fa, uk, pl, ro, bs, el, it, es

Quick Replies mit JSON-Array

                    <fino-chat

                      brand-quick-replies-sample-title-de="Termine,Veranstaltungen,Verkehr"

                      brand-quick-replies-query-de='["Ist es möglich, einen Online-Termin zu buchen?","Welche Veranstaltungen sind geplant?","Gibt es derzeit Baustellen?"]'

                    ></fino-chat>

4 Branding – Logos und Bilder

Ersetzen Sie die Standard-Logos durch Ihre eigenen Markenbilder.

Attribut	Beschreibung
`brand-logo-url`	Avatar-Bild im Chat-Fenster
`brand-logo-streaming-url`	Avatar während der Antwortgenerierung (z.B. animiertes GIF)
`brand-launcher-icon-url`	Bild für den Launcher-Button
`brand-launcher-icon-hover-url`	Hover-Variante des Launcher-Bildes

                    <fino-chat

                      brand-logo-url="https://example.com/avatar.svg"

                      brand-logo-streaming-url="https://example.com/avatar-animated.gif"

                      brand-launcher-icon-url="https://example.com/launcher.png"

                      brand-launcher-icon-hover-url="https://example.com/launcher-hover.png"

                    ></fino-chat>

5 Farben und Design

Passen Sie das gesamte Farbschema über CSS Custom Properties an. Diese können per config-url (im cssVars-Objekt) oder direkt per CSS gesetzt werden.

Farben

Variable	Standard	Beschreibung
`--chat-primary`	#008fcf	Hauptfarbe (Header, Buttons, Links)
`--chat-primary-strong`	#006f9f	Dunklere Variante für Hover
`--chat-accent`	#e30613	Akzentfarbe
`--chat-bg`	#f3fafa	Seitenhintergrund
`--chat-surface`	#ffffff	Karten-Hintergrund
`--chat-text`	#0f1f2c	Primäre Textfarbe
`--chat-muted`	#415465	Sekundäre Textfarbe
`--chat-border`	#d0dde5	Rahmenfarbe
`--chat-field-bg`	#ffffff	Eingabefeld-Hintergrund
`--chat-placeholder`	#7f94a4	Platzhalter-Textfarbe

Gradienten

Variable	Beschreibung
`--chat-header-gradient`	Gradient der Kopfzeile
`--chat-launcher-gradient`	Gradient des Launcher-Buttons
`--chat-launcher-hover-gradient`	Launcher-Hover-Gradient
`--chat-user-bubble-gradient`	Nutzer-Nachrichtenblasen
`--chat-bot-bubble-gradient`	Bot-Nachrichtenblasen
`--chat-body-gradient`	Chat-Hintergrund
`--chat-intro-gradient`	Begrüßungsbereich
`--chat-shell-bg`	Chat-Fenster-Hintergrund

Typografie

Variable	Standard	Beschreibung
`--chat-font-family`	Poppins, Montserrat…	Schriftfamilie
`--chat-launcher-size`	92px	Launcher-Button-Größe
`--chat-bubble-radius`	28px	Eckenradius der Sprechblasen

Beispiel mit CSS

                    /* Farben direkt per CSS setzen */

                    fino-chat {

                      --chat-primary: #005587;

                      --chat-primary-strong: #00446b;

                      --chat-bg: #f6f7fb;

                      --chat-surface: #ffffff;

                      --chat-text: #0f172a;

                      --chat-muted: #475569;

                      --chat-border: #d0d5dd;

                      --chat-header-gradient: linear-gradient(135deg, #005587, #0077b6);

                      --chat-launcher-gradient: linear-gradient(135deg, #005587, #0077b6);

                    }

6 Themes und Modi

Wählen Sie ein vordefiniertes Theme oder nutzen Sie einen der Anzeigemodi für spezielle Einbettungsszenarien.

Verfügbare Themes

default

Helles Design mit Blaugrün-Akzenten. Standard-Theme.

dark

Dunkles Design für Seiten mit dunklem Hintergrund.

high-contrast

Hoher Kontrast (Schwarz/Weiß) für Barrierefreiheit.

custom

Eigene Farben über CSS-Variablen – für vollständige CI-Anpassung.

                    <!-- Theme über Attribut setzen -->

                    <fino-chat theme="dark"></fino-chat>

Anzeigemodi

Modus	Beschreibung
`embedded`	Kein Launcher – Chat füllt den umgebenden Container aus
`docked`	Öffnet sich initial, fixiert oben rechts
`centered`	Öffnet sich initial, zentriert im Viewport
`chat-launcher-movable`	Launcher kann per Drag & Drop verschoben werden

                    <!-- Embedded-Modus: Chat direkt in einen Container einbetten -->

                    <div style="width: 100%; max-width: 600px; height: 500px;">

                      <fino-chat embedded default-language="de"></fino-chat>

                    </div>

7 Sprachsteuerung

Steuern Sie die Sprachauswahl und definieren Sie lokalisierte Quick-Reply-Buttons.

Attribut	Beschreibung
`supported-languages`	Kommagetrennte Liste der unterstützten Sprachen (z.B. `"de,en,fr"`)
`default-language`	Standard-Sprache beim Laden (z.B. `"de"`)
`use-regional-settings`	Browser-Sprache verwenden (`true`/`false`)

Lokalisierte Quick Replies

                    <fino-chat

                      supported-languages="de,en"

                      default-language="de"

                      brand-quick-replies-sample-title-de="Termine,Veranstaltungen,Verkehr"

                      brand-quick-replies-sample-title-en="Appointments,Events,Traffic"

                      brand-quick-replies-query-de='["Ist es möglich, einen Online-Termin zu buchen?","Welche Veranstaltungen sind geplant?","Gibt es derzeit Baustellen?"]'

                      brand-quick-replies-query-en='["Can I book an online appointment?","What events are planned?","Are there currently road works?"]'

                    ></fino-chat>

8 Weitere Attribute

Weitere Attribute zur Steuerung des Verhaltens und der Darstellung.

Attribut	Beschreibung	Standard
`helpMsgDisplay`	Hilfe-Intro-Nachricht anzeigen	false
`hide-reset`	Reset-Button ausblenden	false
`show-feedback`	Daumen hoch/runter Buttons anzeigen	true
`square-corners`	Eckige statt abgerundete Ecken	false
`plain-language`	Leichte-Sprache-Umschalter anzeigen	false
`chat-launcher-movable`	Launcher per Drag verschiebbar	false
`privacy-policy-url`	Link zur Datenschutzerklärung	—
`inter-request-delay-in-seconds`	Min. Sekunden zwischen Anfragen	3

                    <fino-chat

                      show-feedback="true"

                      plain-language="true"

                      privacy-policy-url="https://example.com/datenschutz"

                      chat-launcher-movable="true"

                    ></fino-chat>

9 CMS-Plugins

WordPress (verfügbar)

Für WordPress-Websites bieten wir ein fertiges Plugin an. Installation über die WordPress-Admin-Oberfläche, Konfiguration per grafischer Oberfläche – keine Code-Änderungen nötig.

Das Plugin unterstützt:

Alle Branding-Optionen (Farben, Texte, Logos)
Mehrsprachige Konfiguration
Sichtbarkeitssteuerung pro Seite
WordPress Media Library Integration

Kontaktieren Sie uns für Ihre Zugangsdaten.

Plugin herunterladen (v2.4.0)

WordPress 5.8+ · PHP 7.4+ · Getestet bis WP 7.0

Weitere CMS-Systeme (auf Anfrage)

Integrationen für Drupal, Joomla und Shopware sind in Planung. Kontaktieren Sie uns für Ihren spezifischen Anwendungsfall.

Drupal – auf Anfrage
Joomla – auf Anfrage
Shopware – auf Anfrage

10 Vollständiges Beispiel

Hier ein vollständiges HTML-Beispiel mit CDN-Einbindung, config-url und allen wichtigen Attributen:

                    <!DOCTYPE html>

                    <html lang="de">

                    <head>

                      <meta charset="UTF-8">

                      <title>Meine Website</title>

                      <link rel="stylesheet" href="https://cdn.formbot.ai/widgets/v1/fino-chat/styles.css">

                      <style>

                        fino-chat {

                          --chat-primary: #005587;

                          --chat-primary-strong: #00446b;

                          --chat-header-gradient: linear-gradient(135deg, #005587, #0077b6);

                        }

                      </style>

                    </head>

                    <body>

                      <!-- Ihr Seiteninhalt -->

                      <script type="module" src="https://cdn.formbot.ai/widgets/v1/fino-chat/main.js"></script>

                      <fino-chat

                        config-url="https://cdn.formbot.ai/configs/bol/chat-config.json"

                        default-language="de"

                        supported-languages="de,en"

                        theme="custom"

                        brand-title-de="Bürger-Assistent"

                        brand-title-en="Citizen Assistant"

                        brand-greeting-de="Willkommen! Wie kann ich Ihnen helfen?"

                        brand-greeting-en="Welcome! How can I help you?"

                        brand-disclaimer-de="Antworten sind KI-generiert."

                        brand-disclaimer-en="Answers are AI-generated."

                        brand-logo-url="https://example.com/avatar.svg"

                        brand-quick-replies-sample-title-de="Termine,Veranstaltungen,Verkehr"

                        brand-quick-replies-query-de='["Ist es möglich, einen Online-Termin zu buchen?","Welche Veranstaltungen sind geplant?","Gibt es derzeit Baustellen?"]'

                        show-feedback="true"

                        privacy-policy-url="https://example.com/datenschutz"

                      ></fino-chat>

                    </body>

                    </html>