Flexible Chat

Wprowadzenie

• Flexible Chat to wtyczka do WordPressa, która łączy stronę z czatem AI opartym na n8n. Tworzy interfejs, który może obsługiwać wsparcie klienta, kwalifikację leadów czy też zautomatyzowane rozmowy bezpośrednio na stronie.
• Wtyczka działa jako pomost między WordPressem a procesem w n8n — wysyła wiadomości użytkownika oraz metadane poprzez webhook i odbiera ustrukturyzowane odpowiedzi w czasie rzeczywistym.
• Wtyczka zapewnia płynną integrację z procesem czatu w n8n za pomocą webhooka, umożliwiając sprawną komunikację między interfejsem czatu a automatyzacjami.
• Interfejs czatu jest w pełni konfigurowalny — możesz dostosować kolory, typografię i układ do swojej marki i preferencji projektowych.
• Wtyczka oferuje ekran powitalny z predefiniowanymi tematami rozmów, które pomagają użytkownikom od samego początku.
• System obsługuje (opcjonalnie) trwałą historię czatu, umożliwiając kontynuowanie rozmów między sesjami.
• Odpowiedzi AI są przesyłane strumieniowo w czasie rzeczywistym, co daje efekt podobny do ChatGPT — wiadomości pojawiają się stopniowo.
• Obsługuje przesyłanie plików z ograniczeniami typu MIME, co pozwala kontrolować, jakie pliki mogą wysyłać użytkownicy.
• Zawiera wbudowany system ocen wiadomości (👍 / 👎) umożliwia szybkie ocenianie odpowiedzi przez użytkowników.
• Wszystkie elementy tekstowe są w pełni lokalizowane, co daje pełną kontrolę nad językiem i komunikacją.
• Okno czatu jest w pełni responsywne i zawiera tzw. pływający przycisk, zapewniając wygodne korzystanie zarówno na komputerach, jak i urządzeniach mobilnych

Pierwsze kroki

Zainstaluj pliki wtyczki poprzez panel wtyczek WordPress. Po uruchomieniu panel z ustawieniami, odnajdziesz w menu bocznym WordPress w Ustawienia > Flexible Chat.

Menu ustawień wtyczki składa się z zakładek:

• ogólne
• wygląd
• dostosowanie tekstu
• zaawansowane

Ustawienia Flexible Chat

Ogólne

Adres URL webhooka to pole jest wymagane, aby czat działał poprawnie. Określa adres, na który wysyłane są wszystkie wiadomości. Wprowadź pełny URL webhooka n8n. To podstawa do poprawnego funkcjonowania wtyczki.
Przykład:
https://n8n.example.com/webhook/your-chat-id/chat

Zachowanie czatu

Pokaż ekran powitalny to opcja, która włącza lub wyłącza ekran powitalny przed rozpoczęciem rozmowy.

Tematy rozmów

Ustawienia pozwalające użytkownikom wybrać temat przed rozpoczęciem rozmowy, co pomaga skierować zapytanie do odpowiedniej logiki w n8n. Innymi słowy, wzrasta szansa, że użytkownicy otrzymają prawidłowe odpowiedzi, na zadawane pytania.
Tytuł wiadomości wyświetlany jest nad przyciskami wyboru tematu. Pozostaw puste pole, jeśli chcesz ukryć nagłówek.
Przykład: “O czym chcesz porozmawiać?”

Tekst wiadomości pole to pozwala zaproponować opcjonalny tekst pomocniczy pod tytułem wiadomości.
Przykład: “Wybierz temat, aby skierować rozmowę do właściwej osoby.”

Sugerowane tematy pole to służy do utworzenia listy predefiniowanych tematów rozmów.

Wygląd

Flexible Chat umożliwia wizualne dostosowanie wyglądu do projektu Twojej strony internetowej.

Schemat kolorów

Panel, w którym ustawisz kolory okna czatu. Barwy są automatycznie przetwarzane pod kątem dostępności i kontrastu.

Główny kolor definiuje główną barwę przycisków, linków i elementów interaktywnych.

Tło wiadomości bota(AI) definiuje kolor tła wiadomości generowanej przez AI.

Tło wiadomości użytkownika definiuje barwę tła wiadomości generowanej przez użytkownika.

Tło okna czatu definiuje kolor tła okna czatu i obszaru wiadomości.

Kolor tekstu podstawowy kolor tekstu tytułów, nagłówków.

Typografia

Panel, w którym zdefiniujesz rozmiar czcionki, zaokrąglenie obramowania, odstępy wypełnienia. Możesz używać w nim px, rem lub em.

Podstawowy rozmiar czcionki określa rozmiar czcionki wiadomości czatu i standardowego tekstu.

Zaokrąglenie obramowania definiuje zaokrąglenie rogów dymków czatu elementów oraz elementów interfejsu.

Podstawowy odstęp określa odstępy w interfejsie.

Wypełnienie komunikatu definiuje wewnętrzne odstępy w dymkach wiadomości.

Wymiary okna czatu

Pozwala ustalić rozmiar okna czatu. Przy większych wartościach warto pamiętać o dostosowaniu do urządzeń mobilnych.
Szerokość okna pozwala określić szerokość czatu

Wysokość okna definiuje wysokość okna czatu

Rozmiar przycisku czatu kontroluje tzw. “pływający” przycisk czatu, kiedy okno jest zamknięte.

Dostępne są:

• Mały
• Normalny
• Wielki

Dostosowanie tekstów

Panel, w którym możesz dostosować wszystkie teksty w interfejsie pojawiające się po jego otwarciu.

Tekst nagłówka okna

Ustaw tytuł oraz podtytuł czatu.
Tytuł okna czatu: np: Cześć! 👋

Podtytuł okna czatu: np: Jesteśmy dostępni 24/7.

Tekst interakcji czatu

Pozwala zdefiniować teksty pomocnicze, które będą wyświetlane w polu czatu, zanim użytkownik coś napisze.
Tekst zastępczy w polu wprowadzania: np: Napisz wiadomość…

Informacja dotycząca zgodności: np: Rozmawiasz z AI, więc nie podawaj danych wrażliwych.

Wiadomość powitalna

Panel służący do konfiguracji wiadomości powitalnej, która pojawi się, kiedy użytkownik po raz pierwszy otworzy czat. Każda kolejna linia to osobna wiadomość.

Pierwsza wiadomość bota: np: Cześć! 👋 Jak możemy Ci pomóc?

Zaawansowane

Zachowanie czatu

Panel, w którym zdefiniujesz dodatkowe ustawienia wtyczki, takie jak historię czatu, odpowiedzi na żywo, czy też przyciski pozwalające wyrażać opinię o pomocy.
Historia czatu Opcja ta pozwala włączyć/wyłączyć historię rozmów między sesjami. Jeśli jest włączona, użytkownik będzie widzieć poprzednią rozmowę, po powrocie na stronę.
Wymaga obsługi lokalnej pamięci przeglądarki (localStorage). Może mieć wpływ na zgodność z zasadami prywatności.

Odpowiedzi na żywo Umożliwia strumieniowe przesyłanie odpowiedzi AI w czasie rzeczywistym. Odpowiedzi bota pojawiają się stopniowo, w miarę ich generowania.

Wymaga:

• wsparcia n8n z obsługą streamingu
• kompatybilnych węzłów AI

Przyciski do zgłaszania opinii o wiadomościach Opcja pozwala odwiedzającym oceniać każdą odpowiedź bota. Polega na wysyłaniu akcji feedback do webhooka. Wymaga, aby proces n8n obsługiwał akcję i zapisywał treść odpowiedzi.

Konfiguracja przesyłania plików

W tym panelu można włączyć przesył plików za pośrednictwem czatu, a także zdefiniować ich typ.

Włącz przesyłanie plików opcja włącza przesyłanie plików za pomocą okna czatu.

Dozwolone typy plików określ dozwolone typy plików, które użytkownik prześle za pomocą okna czatu.

Przykładowe konfiguracje:

• image/* – wszystkie pliki graficzne
• image/jpeg,image/png,image/gif – konkretne formaty obrazów
• application/pdf,application/msword – tylko dokumenty
• image/*,application/pdf,text/* – obrazy, pliki PDF i pliki tekstowe

Pozostawienie pustego pola umożliwia przesyłanie wszystkich typów plików (niezalecane).

Ustawienia Integracji z n8n

Panel służący konfiguracji metody wysyłania danych do procesu n8n. Zalecana zmiana tylko wówczas gdy scenariusz przewiduje użycie innych nazw pól.
Nazwa pola wiadomości użytkownika Użyj tego pola, aby określić, pod jakim kluczem dane wejściowe użytkownika zostaną przekazane w payloadzie żądania. Wartość powinna odpowiadać polu oczekiwanemu przez proces n8n (np. message, text lub user_input). Domyślnie: chatInput.

Domyślna treść webhooka:
{
"chatInput": "Hello, how can you help me?"
}

Nazwa pola identyfikatora sesji

Pole JSON określające nazwę, pod którą znajduje się unikalny identyfikator sesji używany do śledzenia konwersacji. Użyj tego pola, aby zdefiniować, pod jakim kluczem identyfikator sesji będzie przekazywany w payloadzie żądania. Dzięki temu proces n8n może rozpoznać i utrzymać kontekst konkretnej rozmowy użytkownika w wielu wiadomościach (np. session_id, chat_id lub conversation_id). Domyślnie: sessionId.

Przykładowa treść webhooka:
{
"sessionId": "abc123def456"
}

Niestandardowe metadane

Wysyłaj dodatkowe dane kontekstowe przy każdym żądaniu czatu. Muszą być w poprawnym formacie JSON. Użyj tego pola, aby przekazać dodatkowe informacje w payloadzie, takie jak atrybuty użytkownika, szczegóły środowiska lub własne flagi. Dane te mogą być wykorzystane przez Twój workflow n8n do personalizacji odpowiedzi lub sterowania logiką (np. {"user_role": "admin", "source": "website"}).
Wysyłaj dodatkowy kontekst przy każdym żądaniu.

Przykład:
{
"user_id": 123,
"plan": "premium",
"source": "landing_page",
}
Zastosowanie:

• identyfikacja użytkownika (user_id, email, account_type)
• śledzenie kontekstu (current_page, referrer, UTM parameters)
• segmentacja klientów (subscription_plan, customer_tier)

Bezpieczeństwo i dobre praktyki

• zawsze weryfikuj dane przychodzące w procesie n8n
• ogranicz dozwolone typy plików w środowisku produkcyjnym
• unikaj przechowywania wrażliwych danych w localStorage, jeśli nie jest to konieczne
• używaj wyłącznie endpointów webhooków działających przez HTTPS
• oczyszczaj metadane przed ich przetwarzaniem

Rozwiązywanie problemów

Czat nie działa

• sprawdź adres URL webhooka
• upewnij się, że proces n8n działa poprawnie

Brak odpowiedzi AI

• sprawdź wykonanie procesów
• weryfikuj format danych wyjściowych

Problemy z załączaniem plików

• sprawdź ustawienia dodawania plików
• sprawdź ograniczenia typów MIME

Streaming nie działa

• Upewnij się, że node AI obsługuje strumieniowe przesyłanie odpowiedzi
• Sprawdź konfigurację procesów