Flexible Chat

Wprowadzenie

• Flexible czat 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 zakładce Elastyczny czat. Wtyczka oferuje trzy podstawowe obszary Historia, Ustawienia oraz Knowlege Exclusion.

Panel Ustawień

Historia

To panel w którym użytkownik ma możliwość przeglądania dotychczaowych czatów. Ekran panelu podzielony jest na dwie części. W tym po lewwej stronie znajdziesz listę dotychczasowych rozmów. W częście po prawej, treść rozmowy.

Ustawienia

Główne menu ustawień wtyczki składa się z zakładek:

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

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.

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

Customer instructions

Wygląd

Elastyczny czat 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 tekstu

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

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)

Wykluczenia z bazy wiedzy

W tym miejscu użytkownik może wskazać, które elementy z bazy danych mają być omijane przez wtyczkę.

Sekcja Wykluczenia z bazwy wiedzy pozwala wykluczyć wybrane treści witryny z wiedzy dostępnej dla wtyczki. Możesz wykluczyć pojedyncze wpisy, strony i produkty lub treści przypisane do kategorii albo tagu.

Wykluczenia nie zmieniają statusu publikacji ani widoczności treści w witrynie. Wykluczone produkty są również pomijane w wynikach wyszukiwania produktów przez wtyczkę.

Wykluczanie wpisu, strony lub produktu

• • Otwórz wpis, stronę lub produkt w edytorze WordPress.
  • Znajdź panel Wyklucz z Elastyczny czat.
  • Włącz przełącznik.
  • Zapisz lub zaktualizuj element.

Element zostanie pominięty podczas kolejnego indeksowania wiedzy. Jeśli został już zindeksowany, wtyczka wyśle żądanie usunięcia go z połączonej bazy wiedzy.

Wykluczanie treści według kategorii lub tagu

• • • • Użyj tej opcji, aby wykluczyć grupę elementów bez edytowania każdego z nich osobno.
      • Przejdź do Wpisy → Kategorie lub Wpisy → Tagi. W przypadku produktów WooCommerce przejdź do Produkty → Kategorie lub Produkty → Tagi.
      • Otwórz kategorię lub tag, które chcesz wykluczyć.
      • Włącz opcję Wyklucz z Elastyczny czat.
      • Zapisz zmiany.

Możesz również włączyć tę opcję podczas tworzenia kategorii lub tagu.

Wykluczenie obejmuje treści przypisane do danej kategorii lub tagu. Element pozostaje wykluczony, jeśli którakolwiek z przypisanych do niego kategorii lub tagów jest wykluczona — nawet gdy przełącznik wykluczenia w samym elemencie jest wyłączony.

Przykładowo możesz wykluczyć tag Archiwalne oferty, aby wpisy oznaczone tym tagiem nie trafiały do bazy wiedzy czatu, a jednocześnie pozostały opublikowane w witrynie.

Zarządzanie wykluczeniami

W panelu WordPress przejdź do Elastyczny Czat → Wykluczenia z bazy wiedzy.

Na tej stronie znajdziesz wykluczenia dodane w edytorach treści, kategorii i tagów.

• • • • Szukana fraza — wpisz szukaną frazę, aby znaleźć pasujące pozycje.
      • Filtruj według typu — ogranicz listę do wybranego typu treści.
      • Tytuł — kliknij tytuł, aby otworzyć edytor elementu.
      • Typ — wskazuje typ pozycji, np. wpis, stronę, produkt, kategorię, tag lub inny obsługiwany typ.
      • Usuń — usuwa wybrane wykluczenie.

Tabela pokazuje elementy, które zostały bezpośrednio oznaczone jako wykluczone. Treści wykluczone przez kategorię lub tag nie pojawiają się jako osobne pozycje, chyba że mają również włączone własne wykluczenie.

Aby dodać kolejne wykluczenie, otwórz edytor odpowiedniej treści, kategorii lub tagu.

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