Integration Guide

1 Quick Start

Integrating the FINO Chatbot requires only three lines of code. Add the following elements to your HTML page:

                    <!-- 1. Include CSS -->

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

                    <!-- 2. Include JavaScript -->

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

                    <!-- 3. Place chat element -->

                    <fino-chat default-language="de"></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 Branding - Customize Text

Customize the title, subtitle, greeting and other text via HTML attributes. Multilingual configuration is supported through language variants.

Attribute	Description	Example
`brand-title`	Title of the chatbot in the header	"My Assistant"
`brand-subtitle`	Subtitle below the title	"Your digital helper"
`brand-greeting`	Greeting when opening the chat	"Hello! How can I help you?"
`brand-disclaimer`	Disclaimer text (e.g. AI notice)	"Answers are AI-generated."
`brand-quick-replies`	Suggested quick replies	"Opening hours\|Contact\|FAQ"

Multilingual Configuration

For multilingual websites, you can define language variants using suffixes:

                    <fino-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-chat>

3 Logos and Images

Replace the default logos with your own brand images.

Attribute	Description	Recommended Size
`brand-logo-url`	Logo in the chat header	max. 200x60 px
`brand-launcher-icon-url`	Icon of the chat button (launcher)	64x64 px
`brand-avatar-url`	Avatar image in chat messages	48x48 px

                    <fino-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-chat>

4 Colors and Design

Customize the color scheme using CSS Custom Properties. Colors can be overridden globally or per element.

CSS Custom Properties

                    /* Customize colors via CSS Custom Properties */

                    fino-chat {

                      --chat-primary: var(--primary-700);    /* Primary color */

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

                      --chat-bg: #ffffff;      /* Background color */

                      --chat-text: #333333;    /* Text color */

                      --chat-border: #e0e0e0;  /* Border color */

                      --chat-user-bg: var(--primary-700); /* User message background */

                      --chat-bot-bg: #f5f5f5;  /* Bot message background */

                    }

Available Themes

Default

Light default theme with neutral colors. Fits most websites.

Dark

Dark theme for pages with dark backgrounds or as a user preference.

High-Contrast

Accessible theme with increased contrast for better readability.

Custom

Fully customizable via CSS Custom Properties - matching your corporate design.

                    <!-- Set theme via attribute -->

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

5 Embedded Mode

By default, the chatbot is displayed as an overlay (floating button). With the embedded attribute, the chat can be embedded directly into the page content - ideal for dedicated support pages or help sections.

                    <!-- Inline integration into a container -->

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

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

                    </div>

Tip: In embedded mode, no launcher button is displayed. The chat is immediately visible and takes the size of the surrounding container.

6 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 the plugin file and your access credentials.

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

7 Complete Example

Here is a complete HTML example with all branding options:

                    <!DOCTYPE html>

                    <html lang="de">

                    <head>

                      <meta charset="UTF-8">

                      <title>My Website</title>

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

                      <style>

                        fino-chat {

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

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

                        }

                      </style>

                    </head>

                    <body>

                      <!-- Your page content -->

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

                      <fino-chat

                        default-language="de"

                        brand-title="My Assistant"

                        brand-subtitle="Your digital helper"

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

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

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

                        brand-quick-replies="Opening hours|Contact|FAQ"

                      ></fino-chat>

                    </body>

                    </html>