Pro Widgety schedule 25 min

Widget AI Assistant — chatbot z bazą wiedzy

Osadź inteligentnego chatbota na swojej stronie. Claude API, baza wiedzy z pytaniami i odpowiedziami, sugestie, historia rozmów, wielojęzyczność. Konfiguracja przez JSON.

AI na stronie PRO 16 min czytania

Widget AI Assistant: chatbot, który zna Twoją firmę

Jak postawić chatbota AI z Claude API, bazą wiedzy w JSON, sugestiami pytań, historią w localStorage i personalizacją kolorów — działającego cross-domain przez loader.js.

signal_cellular_alt Średni schedule 2-3 godziny smart_toy Zespół BinSoft

Jest 22:47. Ktoś przegląda Twoją stronę i ma pytanie o cennik. Formularz kontaktowy? Odpowiedź jutro rano. Telefon? Biuro zamknięte. FAQ? Za długie, nie chce się szukać. Efekt: użytkownik zamyka kartę i idzie do konkurencji.

Widget AI Assistant rozwiązuje ten problem. Ikonka czatu w rogu ekranu, klik, pytanie, odpowiedź w 2 sekundy. AI zna Twój cennik, Twoje funkcje, Twoją ofertę. Nie wymyśla — odpowiada na podstawie bazy wiedzy, którą Ty kontrolujesz. A co najlepsze — pamięta rozmowę. Użytkownik wraca za godzinę — historia jest nadal na miejscu.

Jak to działa — architektura

przepływ rozmowy
1. loader.js ładuje widget na stronie klienta
2. Widget sprawdza localStorage → odtwarza historię
3. User klika FAB (Floating Action Button) → otwiera czat
4. Widzi sugestie pytań z JSON (np. "Ile kosztuje pakiet Gold?")
5. Pisze pytanie → POST /api/ai-chat.php
6. PHP: CORS check → rate limit → FAQ match → Claude API
7. Odpowiedź → formatowanie markdown → wyświetlenie
8. Zapis do localStorage (max 20 wiadomości, per domena)
WarstwaTechnologiaGdzie działa
FrontendVanilla JS (~1850 linii), CSS-in-JSPrzeglądarka klienta
APIPHP 8.3, endpoint POSTTwój serwer
AIClaude API (Anthropic)Cloud Anthropic
Baza wiedzyJSON per domenaTwój serwer
HistorialocalStoragePrzeglądarka klienta
lock

Ten poradnik wymaga konta Pro

Dostęp do zaawansowanych poradników, kodu źródłowego i wsparcia technicznego.