Sprievodca integráciou

1 Rýchly štart

Integrácia FINO ChatBota vyžaduje iba tri riadky kódu. Vložte CSS a JavaScript z CDN a umiestnite chatový element. Voliteľne môžete načítať externú JSON konfiguráciu cez config-url.

                    <!-- 1. Vložiť CSS -->

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

                    <!-- 2. Vložiť JavaScript -->

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

                    <!-- 3. Umiestniť chatový element (s voliteľnou config-url) -->

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

Poznámka: Element <fino-chat> je Web Component a funguje na akejkoľvek modernej webovej stránke – nezávisle od použitého frameworku alebo CMS. Na požiadanie vám Web Components nakonfigurujeme a hostujeme individuálne.

2 Runtime konfigurácia

Pomocou atribútu config-url môžete načítať externý JSON súbor obsahujúci CSS premenné a HTML atribúty. To umožňuje centrálnu konfiguráciu widgetu bez zmeny HTML kódu.

Štruktúra JSON

                    {

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

                      }

                    }

Poradie priorít

HTML atribúty (najvyššia priorita) – atribúty nastavené priamo na elemente
config-url JSON – hodnoty z externého konfiguračného súboru
Vstavaný štandard – predvolené hodnoty widgetu

3 Branding – Texty

Prispôsobte názov, pozdrav, disclaimer a texty rýchlych odpovedí pomocou HTML atribútov. Všetky atribúty podporujú jazykové prípony pre viacjazyčnú konfiguráciu.

Atribút	Popis
`brand-title`	Názov v hlavičke chatového okna
`brand-subtitle`	Uvítací riadok pod avatarom
`brand-greeting`	Podrobný uvítací text
`brand-disclaimer`	Text upozornenia pod vstupným poľom
`brand-help-text`	Text nápovedy pri kliknutí na tlačidlo pomoci
`brand-quick-replies-sample-title`	Zobrazovaný text tlačidiel rýchlych odpovedí (oddelené čiarkou)
`brand-quick-replies-query`	Skutočné dotazy pre každé tlačidlo (oddelené čiarkou alebo JSON pole)

Viacjazyčná konfigurácia

Všetky atribúty brand-* podporujú jazykové prípony: brand-title-de, brand-title-en atď.

Podporované jazyky: de, en, sk, fr, ar, ru, tr, fa, uk, pl, ro, bs, el, it, es

Rýchle odpovede s JSON poľom

                    <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 – Logá a obrázky

Nahraďte predvolené logá vlastnými značkovými obrázkami.

Atribút	Popis
`brand-logo-url`	Obrázok avatara v chatovom okne
`brand-logo-streaming-url`	Avatar počas generovania odpovede (napr. animovaný GIF)
`brand-launcher-icon-url`	Obrázok pre tlačidlo spustenia
`brand-launcher-icon-hover-url`	Hover varianta obrázka spustenia

                    <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 Farby a dizajn

Prispôsobte celú farebnú schému pomocou CSS Custom Properties. Tieto je možné nastaviť cez config-url (v objekte cssVars) alebo priamo cez CSS.

Farby

Premenná	Štandard	Popis
`--chat-primary`	#008fcf	Hlavná farba (hlavička, tlačidlá, odkazy)
`--chat-primary-strong`	#006f9f	Tmavšia varianta pre hover
`--chat-accent`	#e30613	Akcentová farba
`--chat-bg`	#f3fafa	Pozadie stránky
`--chat-surface`	#ffffff	Pozadie kariet
`--chat-text`	#0f1f2c	Primárna farba textu
`--chat-muted`	#415465	Sekundárna farba textu
`--chat-border`	#d0dde5	Farba okrajov
`--chat-field-bg`	#ffffff	Pozadie vstupného poľa
`--chat-placeholder`	#7f94a4	Farba zástupného textu

Gradienty

Premenná	Popis
`--chat-header-gradient`	Gradient hlavičky
`--chat-launcher-gradient`	Gradient tlačidla spustenia
`--chat-launcher-hover-gradient`	Hover gradient spustenia
`--chat-user-bubble-gradient`	Bubliny správ používateľa
`--chat-bot-bubble-gradient`	Bubliny správ bota
`--chat-body-gradient`	Pozadie chatu
`--chat-intro-gradient`	Uvítacia oblasť
`--chat-shell-bg`	Pozadie chatového okna

Typografia

Premenná	Štandard	Popis
`--chat-font-family`	Poppins, Montserrat…	Rodina písma
`--chat-launcher-size`	92px	Veľkosť tlačidla spustenia
`--chat-bubble-radius`	28px	Polomer rohov bublín

Príklad s CSS

                    /* Nastaviť farby priamo cez 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 Témy a režimy

Vyberte preddefinovanú tému alebo použite jeden z režimov zobrazenia pre špeciálne scenáre vkladania.

Dostupné témy

default

Svetlý dizajn s modrozelenými akcentmi. Predvolená téma.

dark

Tmavý dizajn pre stránky s tmavým pozadím.

high-contrast

Vysoký kontrast (čierna/biela) pre prístupnosť.

custom

Vlastné farby cez CSS premenné – pre úplné prispôsobenie firemného dizajnu.

                    <!-- Nastaviť tému cez atribút -->

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

Režimy zobrazenia

Režim	Popis
`embedded`	Žiadny launcher – chat vyplní okolný kontajner
`docked`	Otvorí sa na začiatku, fixovaný vpravo hore
`centered`	Otvorí sa na začiatku, vycentrovaný vo viewporte
`chat-launcher-movable`	Launcher je možné presunúť pomocou drag & drop

                    <!-- Vstavaný režim: vložiť chat priamo do kontajnera -->

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

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

                    </div>

7 Jazykové ovládanie

Ovládajte výber jazyka a definujte lokalizované tlačidlá rýchlych odpovedí.

Atribút	Popis
`supported-languages`	Zoznam podporovaných jazykov oddelený čiarkami (napr. `"de,en,fr"`)
`default-language`	Predvolený jazyk pri načítaní (napr. `"de"`)
`use-regional-settings`	Použiť jazyk prehliadača (`true`/`false`)

Lokalizované rýchle odpovede

                    <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 Ďalšie atribúty

Ďalšie atribúty na ovládanie správania a vzhľadu.

Atribút	Popis	Štandard
`helpMsgDisplay`	Zobraziť úvodnú správu nápovedy	false
`hide-reset`	Skryť tlačidlo resetovania	false
`show-feedback`	Zobraziť tlačidlá palec hore/dole	true
`square-corners`	Hranaté namiesto zaoblených rohov	false
`plain-language`	Zobraziť prepínač jednoduchého jazyka	false
`chat-launcher-movable`	Launcher presúvateľný ťahaním	false
`privacy-policy-url`	Odkaz na zásady ochrany osobných údajov	—
`inter-request-delay-in-seconds`	Min. sekúnd medzi požiadavkami	3

                    <fino-chat

                      show-feedback="true"

                      plain-language="true"

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

                      chat-launcher-movable="true"

                    ></fino-chat>

9 CMS pluginy

WordPress (dostupný)

Pre WordPress webové stránky ponúkame hotový plugin. Inštalácia cez WordPress admin rozhranie, konfigurácia cez grafické rozhranie – nie sú potrebné žiadne zmeny kódu.

Plugin podporuje:

Všetky možnosti brandingu (farby, texty, logá)
Viacjazyčná konfigurácia
Ovládanie viditeľnosti na stránku
Integrácia WordPress Media Library

Kontaktujte nás pre vaše prístupové údaje.

Stiahnuť plugin (v2.4.0)

WordPress 5.8+ · PHP 7.4+ · Testované do WP 7.0

Ďalšie CMS systémy (na požiadanie)

Integrácie pre Drupal, Joomla a Shopware sú v pláne. Kontaktujte nás pre váš konkrétny prípad použitia.

Drupal – na požiadanie
Joomla – na požiadanie
Shopware – na požiadanie

10 Kompletný príklad

Tu je kompletný HTML príklad s CDN integráciou, config-url a všetkými dôležitými atribútmi:

                    <!DOCTYPE html>

                    <html lang="de">

                    <head>

                      <meta charset="UTF-8">

                      <title>Moja webová stránka</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>

                      <!-- Obsah vašej stránky -->

                      <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/ochrana-udajov"

                      ></fino-chat>

                    </body>

                    </html>