Sprievodca integráciou

1 Rýchly štart

Integrácia FINO Chatbota vyžaduje iba tri riadky kódu. Pridajte nasledujúce elementy do vašej HTML stránky:

                    <!-- 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-chat default-language="de"></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 Branding - Upravit texty

Prispôsobte názov, podnadpis, pozdrav a ďalšie texty pomocou HTML atribútov. Viacjazyčná konfigurácia je podporovaná prostredníctvom jazykových variantov.

Atribút	Popis	Príklad
`brand-title`	Názov chatbota v hlavičke	"Môj asistent"
`brand-subtitle`	Podnadpis pod názvom	"Váš digitálny pomocník"
`brand-greeting`	Pozdrav pri otvorení chatu	"Ahoj! Ako vám môžem pomôcť?"
`brand-disclaimer`	Upozornenie (napr. AI upozornenie)	"Odpovede sú generované AI."
`brand-quick-replies`	Navrhované rýchle odpovede	"Otváracie hodiny\|Kontakt\|FAQ"

Viacjazyčná konfigurácia

Pre viacjazyčné webové stránky môžete definovať jazykové varianty pomocou prípon:

                    <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 Logá a obrazky

Nahraďte predvolené logá vlastnými.

Atribút	Popis	Odporúčaná veľkosť
`brand-logo-url`	Logo v hlavičke chatu	max. 200x60 px
`brand-launcher-icon-url`	Ikona tlačidla chatu (launcher)	64x64 px
`brand-avatar-url`	Obrázok avatara v chatových správach	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 Farby a dizajn

Prispôsobte farebnú schému pomocou CSS Custom Properties. Farby je možné prepísať globálne alebo pre jednotlivé elementy.

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 */

                    }

Dostupné témy

Default

Svetlá predvolená téma s neutrálnymi farbami. Hodí sa k väčšine webových stránok.

Dark

Tmavá téma pre stránky s tmavým pozadím alebo ako používateľská preferencia.

High-Contrast

Bezbariérová téma so zvýšeným kontrastom pre lepšiu čitateľnosť.

Custom

Plne prispôsobiteľná cez CSS Custom Properties - zodpovedajúca vášmu firemnému dizajnu.

                    <!-- Set theme via attribute -->

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

5 Vstavaný režim

Štandardne sa chatbot zobrazuje ako overlay (plávajúce tlačidlo). S atribútom embedded je možné chat vložiť priamo do obsahu stránky - ideálne pre dedikované stránky podpory alebo sekcie pomoci.

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

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

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

                    </div>

Tip: Vo vstavanom režime sa nezobrazuje žiadne tlačidlo spustenia. Chat je okamžite viditeľný a zaberá veľkosť okolitého kontajnera.

6 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 súbor pluginu a vaše prístupové údaje.

Ď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

7 Kompletný príklad

Tu je kompletný HTML príklad so všetkými možnosťami brandingu:

                    <!DOCTYPE html>

                    <html lang="de">

                    <head>

                      <meta charset="UTF-8">

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

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

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

                      <fino-chat

                        default-language="de"

                        brand-title="Môj asistent"

                        brand-subtitle="Váš digitálny pomocník"

                        brand-greeting="Ahoj! Ako vám môžem pomôcť?"

                        brand-disclaimer="Odpovede sú generované AI."

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

                        brand-quick-replies="Otváracie hodiny|Kontakt|FAQ"

                      ></fino-chat>

                    </body>

                    </html>