Integrationsleitfaden

1 Schnellstart

Die Integration des FINO Chatbots erfordert nur drei Zeilen Code. Fügen Sie die folgenden Elemente in Ihre HTML-Seite ein:

                    <!-- 1. CSS einbinden -->

                    <link rel="stylesheet" href="https://cdn.formbot.ai/webcomponents/chat/style.css">

                    <!-- 2. JavaScript einbinden -->

                    <script type="module" src="https://cdn.formbot.ai/webcomponents/chat/main.js"></script>

                    <!-- 3. Chat-Element platzieren -->

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

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

2 Branding - Texte anpassen

Passen Sie Titel, Untertitel, Begrüßung und weitere Texte über HTML-Attribute an. Mehrsprachige Konfiguration wird über Sprachvarianten unterstützt.

Attribut	Beschreibung	Beispiel
`brand-title`	Titel des Chatbots im Header	"Mein Assistent"
`brand-subtitle`	Untertitel unter dem Titel	"Ihr digitaler Helfer"
`brand-greeting`	Begrüßung beim Öffnen des Chats	"Hallo! Wie kann ich Ihnen helfen?"
`brand-disclaimer`	Hinweistext (z.B. KI-Hinweis)	"Antworten sind KI-generiert."
`brand-quick-replies`	Vorgeschlagene Schnellantworten	"Öffnungszeiten\|Kontakt\|FAQ"

Mehrsprachige Konfiguration

Für mehrsprachige Websites können Sie Sprachvarianten über Suffixe definieren:

                    <fino-smart-chat

                      default-language="de"

                      brand-title-de="Stadt-Assistent"

                      brand-title-en="City Assistant"

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

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

                      brand-quick-replies-de="Öffnungszeiten|Kontakt|Termine"

                      brand-quick-replies-en="Opening hours|Contact|Appointments"

                    ></fino-smart-chat>

3 Logos und Bilder

Ersetzen Sie die Standard-Logos durch Ihre eigenen Markenbilder.

Attribut	Beschreibung	Empfohlene Größe
`brand-logo-url`	Logo im Chat-Header	max. 200x60 px
`brand-launcher-icon-url`	Icon des Chat-Buttons (Launcher)	64x64 px
`brand-avatar-url`	Avatar-Bild in den Chat-Nachrichten	48x48 px

                    <fino-smart-chat

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

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

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

                    ></fino-smart-chat>

4 Farben und Design

Passen Sie das Farbschema über CSS Custom Properties an. Die Farben können global oder pro Element überschrieben werden.

CSS Custom Properties

                    /* Farben über CSS Custom Properties anpassen */

                    fino-smart-chat {

                      --chat-primary: var(--primary-700);    /* Hauptfarbe */

                      --chat-accent: var(--primary-500);    /* Akzentfarbe */

                      --chat-bg: #ffffff;      /* Hintergrundfarbe */

                      --chat-text: #333333;    /* Textfarbe */

                      --chat-border: #e0e0e0;  /* Rahmenfarbe */

                      --chat-user-bg: var(--primary-700); /* Nutzer-Nachricht Hintergrund */

                      --chat-bot-bg: #f5f5f5;  /* Bot-Nachricht Hintergrund */

                    }

Verfügbare Themes

Default

Helles Standard-Theme mit neutralen Farben. Passt zu den meisten Websites.

Dark

Dunkles Theme für Seiten mit dunklem Hintergrund oder als Nutzerpräferenz.

High-Contrast

Barrierefreies Theme mit erhöhtem Kontrast für bessere Lesbarkeit.

Custom

Vollständig anpassbar über CSS Custom Properties - passend zu Ihrem Corporate Design.

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

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

5 Embedded-Modus

Standardmäßig wird der Chatbot als Overlay (Floating Button) angezeigt. Mit dem embedded-Attribut lässt sich der Chat direkt in den Seiteninhalt einbetten - ideal für dedizierte Support-Seiten oder Hilfe-Bereiche.

                    <!-- Inline-Integration in einen Container -->

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

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

                    </div>

Tipp: Im Embedded-Modus wird kein Launcher-Button angezeigt. Der Chat ist sofort sichtbar und nimmt die Größe des umgebenden Containers ein.

6 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 noetig.

Das Plugin unterstützt:

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

Kontaktieren Sie uns für die Plugin-Datei und Ihre Zugangsdaten.

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

7 Vollständiges Beispiel

Hier ein vollstaendiges HTML-Beispiel mit allen Branding-Optionen:

                    <!DOCTYPE html>

                    <html lang="de">

                    <head>

                      <meta charset="UTF-8">

                      <title>Meine Website</title>

                      <link rel="stylesheet" href="https://cdn.formbot.ai/webcomponents/chat/style.css">

                      <style>

                        fino-smart-chat {

                          --chat-primary: var(--primary-700);

                          --chat-accent: var(--primary-500);

                        }

                      </style>

                    </head>

                    <body>

                      <!-- Ihr Seiteninhalt -->

                      <script type="module" src="https://cdn.formbot.ai/webcomponents/chat/main.js"></script>

                      <fino-smart-chat

                        default-language="de"

                        brand-title="Mein Assistent"

                        brand-subtitle="Ihr digitaler Helfer"

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

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

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

                        brand-quick-replies="Öffnungszeiten|Kontakt|FAQ"

                      ></fino-smart-chat>

                    </body>

                    </html>