Integration Guide

1 Quick Start

Integrating the FINO ChatBot requires only three lines of code. Include the CSS and JavaScript from the CDN and place the chat element. Optionally, load an external JSON configuration via config-url.

                    <!-- 1. Include CSS -->

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

                    <!-- 2. Include JavaScript -->

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

                    <!-- 3. Place chat element (with optional config-url) -->

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

Note: The <fino-chat> element is a Web Component and works in any modern website – regardless of the framework or CMS used. On request, we can also configure and host the Web Components specifically for your needs.

2 Runtime Configuration

Use the config-url attribute to load an external JSON file containing CSS variables and HTML attributes. This allows central widget configuration without modifying the HTML code.

JSON Structure

                    {

                      "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/your-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"

                      }

                    }

Priority Order

HTML attributes (highest priority) – attributes set directly on the element
config-url JSON – values from the external configuration file
Built-in defaults – the widget's built-in default values

3 Branding – Text

Customize the title, greeting, disclaimer and quick reply text via HTML attributes. All attributes support language suffixes for multilingual configuration.

Attribute	Description
`brand-title`	Title in the chat window header bar
`brand-subtitle`	Greeting line below the avatar
`brand-greeting`	Detailed greeting text
`brand-disclaimer`	Disclaimer text below the input field
`brand-help-text`	Help text shown on help button click
`brand-quick-replies-sample-title`	Display text for quick reply buttons (comma-separated)
`brand-quick-replies-query`	Actual queries per button (comma-separated or JSON array)

Multilingual Configuration

All brand-* attributes support language suffixes: brand-title-de, brand-title-en, etc.

Supported languages: de, en, sk, fr, ar, ru, tr, fa, uk, pl, ro, bs, el, it, es

Quick Replies with 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 and Images

Replace the default logos with your own brand images.

Attribute	Description
`brand-logo-url`	Avatar image in the chat window
`brand-logo-streaming-url`	Avatar during response generation (e.g. animated GIF)
`brand-launcher-icon-url`	Image for the launcher button
`brand-launcher-icon-hover-url`	Hover variant of the launcher image

                    <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 Colors and Design

Customize the entire color scheme using CSS Custom Properties. These can be set via config-url (in the cssVars object) or directly via CSS.

Colors

Variable	Default	Description
`--chat-primary`	#008fcf	Main color (header, buttons, links)
`--chat-primary-strong`	#006f9f	Darker variant for hover
`--chat-accent`	#e30613	Accent color
`--chat-bg`	#f3fafa	Page background
`--chat-surface`	#ffffff	Card background
`--chat-text`	#0f1f2c	Primary text color
`--chat-muted`	#415465	Secondary text color
`--chat-border`	#d0dde5	Border color
`--chat-field-bg`	#ffffff	Input field background
`--chat-placeholder`	#7f94a4	Placeholder text color

Gradients

Variable	Description
`--chat-header-gradient`	Header bar gradient
`--chat-launcher-gradient`	Launcher button gradient
`--chat-launcher-hover-gradient`	Launcher hover gradient
`--chat-user-bubble-gradient`	User message bubbles
`--chat-bot-bubble-gradient`	Bot message bubbles
`--chat-body-gradient`	Chat background
`--chat-intro-gradient`	Greeting area
`--chat-shell-bg`	Chat window background

Typography

Variable	Default	Description
`--chat-font-family`	Poppins, Montserrat…	Font family
`--chat-launcher-size`	92px	Launcher button size
`--chat-bubble-radius`	28px	Bubble corner radius

CSS Example

                    /* Set colors directly via CSS */

                    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 and Modes

Choose a predefined theme or use one of the display modes for special embedding scenarios.

Available Themes

default

Light design with teal-blue accents. Default theme.

dark

Dark design for pages with dark backgrounds.

high-contrast

High contrast (black/white) for accessibility.

custom

Custom colors via CSS variables – for full corporate design alignment.

                    <!-- Set theme via attribute -->

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

Display Modes

Mode	Description
`embedded`	No launcher – chat fills the surrounding container
`docked`	Opens initially, fixed top-right position
`centered`	Opens initially, centered in viewport
`chat-launcher-movable`	Launcher can be repositioned via drag & drop

                    <!-- Embedded mode: embed chat directly into a container -->

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

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

                    </div>

7 Language Control

Control the language selection and define localized quick reply buttons.

Attribute	Description
`supported-languages`	Comma-separated list of supported languages (e.g. `"de,en,fr"`)
`default-language`	Default language on load (e.g. `"de"`)
`use-regional-settings`	Use browser language (`true`/`false`)

Localized 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 Additional Attributes

Additional attributes to control behavior and appearance.

Attribute	Description	Default
`helpMsgDisplay`	Show help intro message	false
`hide-reset`	Hide the reset button	false
`show-feedback`	Show thumbs up/down buttons	true
`square-corners`	Square instead of rounded corners	false
`plain-language`	Show easy language toggle	false
`chat-launcher-movable`	Launcher draggable to reposition	false
`privacy-policy-url`	Link to privacy policy	—
`inter-request-delay-in-seconds`	Min. seconds between requests	3

                    <fino-chat

                      show-feedback="true"

                      plain-language="true"

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

                      chat-launcher-movable="true"

                    ></fino-chat>

9 CMS Plugins

WordPress (available)

For WordPress websites, we offer a ready-made plugin. Installation via the WordPress admin interface, configuration through a graphical interface – no code changes required.

The plugin supports:

All branding options (colors, text, logos)
Multilingual configuration
Visibility control per page
WordPress Media Library integration

Contact us for your access credentials.

Download Plugin (v2.4.0)

WordPress 5.8+ · PHP 7.4+ · Tested up to WP 7.0

Other CMS Systems (on request)

Integrations for Drupal, Joomla and Shopware are planned. Contact us for your specific use case.

Drupal – on request
Joomla – on request
Shopware – on request

10 Complete Example

Here is a complete HTML example with CDN integration, config-url and all important attributes:

                    <!DOCTYPE html>

                    <html lang="de">

                    <head>

                      <meta charset="UTF-8">

                      <title>My 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>

                      <!-- Your page content -->

                      <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/privacy"

                      ></fino-chat>

                    </body>

                    </html>