Jak dodać chatbota AI na stronę bez programowania

Możesz dodać chatbota AI do swojej witryny, przekazując Agentowi wiedzę o firmie, konfigurując odpowiedzi i instalując widżet czatu za pomocą wtyczki lub dostarczonego skryptu. Chatbot Quickchat AI do witryn internetowych łączy wiedzę, ustawienia rozmów i skrzynkę Inbox zespołu w jednym miejscu. Odwiedzający zadają pytania w Twojej witrynie bez zakładania konta.

W tym poradniku skonfigurujesz chatbota dla Kestrel Kitchens, fikcyjnej firmy projektującej kuchnie. Odwiedzający pyta, ile trwa remont, sprawdza orientacyjny koszt kuchni o wymiarach 3 na 4 metry, a następnie prosi o wycenę. Agent odpowiada na podstawie informacji firmy, zbiera szczegóły projektu i umożliwia projektantowi kontynuowanie rozmowy.

Podstawowa konfiguracja nie wymaga programowania. Skonfiguruj wiedzę i instrukcje, zbieranie danych kontaktowych i przekazywanie rozmów człowiekowi, a następnie zainstaluj widżet. Opcjonalna API Action wysyła kompletne zapytania do innego systemu.

Pobierz zestaw konfiguracyjny Kestrel Kitchens z przykładową witryną, wiedzą, Main Prompt, ustawieniami i wiadomościami testowymi. Są to edytowalne pliki do wykorzystania podczas konfiguracji w panelu, a nie import Agenta jednym kliknięciem.

Zrzuty ekranu oraz przeznaczone do kopiowania pliki zestawu, prompty i konfiguracje pozostają po angielsku, aby można było odtworzyć przetestowany przykład.

Co będzie robić chatbot w witrynie?

Chatbot odpowiada na pytania na podstawie Twoich treści, zapisuje dane potrzebne do dalszego kontaktu i przekazuje rozmowy zespołowi, gdy potrzebna jest pomoc człowieka.

Każdy z tych rezultatów wymaga innego potwierdzenia. Prawidłowy przedział cenowy pochodzi z Knowledge Base. Zapytanie o wycenę wymaga danych kontaktowych i szczegółów projektu w Inbox. Przekazanie rozmowy wymaga przejęcia jej przez człowieka i wysłania odpowiedzi, która dotrze do odwiedzającego.

Przebieg wizyty w tym przykładzie. Zapytanie o wycenę rejestruje zainteresowanie; cenę i dostępność nadal potwierdza projektant.

Czego potrzebujesz przed dodaniem chatbota?

Potrzebujesz konta Quickchat AI, możliwych do zweryfikowania informacji o firmie oraz dostępu do ustawień wtyczek lub własnego kodu w witrynie.

1. Utwórz konto Quickchat AI i dokończ rejestrację. Do tego ćwiczenia użyj osobnego Agenta, aby przykładowe informacje nie wpływały na działającą już obsługę klientów.
2. Przygotuj strony usług, FAQ i zasady firmy lub skorzystaj z fikcyjnej wiedzy w zestawie. Przed wdrożeniem w rzeczywistej firmie zastąp fikcyjne ceny i obszar obsługi.
3. Sprawdź, czy plan Twojej witryny umożliwia daną metodę instalacji. WordPress wymaga dostępu do wtyczek; niektóre kreatory hostowane wymagają płatnego planu, aby dodać własny kod w całej witrynie.
4. Ustal, kto będzie monitorować testową skrzynkę Inbox podczas próby przekazania rozmowy człowiekowi. Do końcowych testów witryny przygotuj przeglądarkę na komputerze i telefon.

Free służy osobistej, niekomercyjnej nauce. Plan Free obejmuje 50 kredytów AI miesięcznie. Wdrożenie firmowe wymaga planu komercyjnego, a testy wykorzystują ten sam limit odpowiedzi co pozostałe rozmowy AI. Abonament kreatora witryny i koszty zewnętrznych API są naliczane osobno. Sekcja o kosztach wyjaśnia te różnice.

Krok 1: Jak nauczyć chatbota treści Twojej witryny?

Dodaj strony zawierające odpowiedzi firmy do Knowledge Base, a przed testami sprawdź zaimportowaną treść. W ten sposób Agent otrzyma materiały źródłowe do udzielania odpowiedzi.

Utwórz Agenta do nauki

1. Na pierwszym ekranie konfiguracji wybierz Set up manually. Jeśli masz już panel, użyj + obok AI Agent (Add new AI Agent), aby utworzyć osobnego Agenta, a następnie wybierz Set up manually.
2. W Identity wpisz Kestrel Kitchens w Name your AI Agent. Wklej main-prompt.txt z zestawu do Describe what you want your agent to do. Zostanie on zapisany jako Main Prompt Agenta, opisany w kroku 2. Wybierz Next.
3. Na razie pozostaw Knowledge Base pustą i wybierz Next. Przejdź przez External apps bez wybierania połączenia. W Deployment wybierz Chat widget, a następnie Next.
4. Na ekranie Choose your plan użyj Skip for now, aby kontynuować ćwiczenie do osobistej nauki, lub wybierz odpowiedni plan komercyjny do zastosowań firmowych. Skorzystaj z ewentualnej opcjonalnej oferty wyświetlonej później albo ją zamknij.
5. W panelu potwierdź nazwę Agenta w Identity, a następnie otwórz Knowledge Base. Wybierz własne strony lub podany poniżej przykładowy artykuł.

Zaimportuj własne strony

1. W Knowledge Base wybierz Add Website. Wybierz pojedynczą stronę lub import witryny, zależnie od potrzebnego zakresu.
2. Wpisz publiczny URL. Przy imporcie witryny przejrzyj wykryte strony i wybierz strony usług, cen, procesu i FAQ, które mają stanowić podstawę odpowiedzi.
3. Sprawdź zaimportowany tekst. Potwierdź, że ceny mają właściwą walutę i informacje o podatkach, a stare promocje lub niezwiązane strony nie stały się źródłami.
4. Zaczekaj na zakończenie przetwarzania. Przed testowaniem zainstalowanego widżetu zastosuj lub opublikuj wszystkie oczekujące zmiany wiedzy widoczne w panelu.

Zacznij od kilku jednoznacznych stron. Witryna może prezentować atrakcyjny cennik, a zastrzeżenia umieszczać w innym miejscu; Agent potrzebuje obu tych elementów. Import samej strony głównej może pominąć warunki montażu, ograniczenia geograficzne lub zasady zwrotów, dzięki którym odpowiedź jest użyteczna.

Wykorzystaj źródło Kestrel Kitchens

Aby odtworzyć przykład bez wcześniejszego publikowania witryny, dodaj informacje bezpośrednio:

1. W Knowledge Base wybierz Add Article. Powstanie artykuł Untitled i otworzy się Edit Article.
2. Wpisz Kestrel Kitchens: services, prices and process w Title. W Content wybierz Plain Text i wklej knowledge.txt z zestawu.
3. Wybierz Save i zaczekaj, aż artykuł uzyska status Ready. Sprawdź, czy jego tytuł pojawia się na liście Knowledge Base.

Zapisany artykuł zachowuje warunki dotyczące cen i terminów. Fikcyjne informacje odpowiadają przykładowej witrynie.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

Źródło celowo nie określa warunków finansowania. Pozwala to sprawdzić, jak Agent radzi sobie z rzeczywistym brakiem informacji. W prawdziwej witrynie aktualizuj strony źródłowe i korzystaj z obsługiwanych ustawień odświeżania, jeśli są dostępne; poradnik Knowledge Base wyjaśnia, jak organizować i testować te źródła.

Krok 2: Co chatbot powinien mówić, a czego nie może obiecywać?

Użyj Main Prompt, aby określić sposób korzystania z wiedzy przez Agenta: najpierw odpowiedź na pytanie, użyteczna treść i pozostawienie zespołowi decyzji takich jak wiążąca wycena.

W Kestrel wymiary pomieszczenia określają skalę projektu. Nie określają zabudowy, sprzętu AGD ani prac budowlanych. Agent powinien wyjaśnić podany w źródle orientacyjny przedział od £18,000 do £45,000 z VAT, bez obliczania dokładniejszej ceny na podstawie powierzchni podłogi.

Te ceny to fikcyjne dane z poradnika. Celem jest zachowanie rozróżnienia między informacjami źródłowymi a decyzją, którą musi jeszcze podjąć zespół.

1. W Identity wybierz Edit na karcie Main Prompt.
2. Wklej cały poniższy prompt. Zaczekaj na zapis, a następnie ponownie otwórz edytor, aby potwierdzić zapisaną treść.
3. Informacje o firmie przechowuj w Knowledge Base. Prompt wykorzystaj do określenia stylu odpowiedzi, sposobu zbierania danych i decyzji wymagających człowieka.

Main Prompt to pole instrukcji. Pełny tekst poniżej i w zestawie jest wersją do skopiowania.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

Otwórz AI Preview i zapytaj How long does a full kitchen renovation take?. W lokalnym teście kontrolnym Agent odpowiedział, że wizja lokalna i projektowanie trwają od 2 do 3 tygodni, a następnie montaż od 4 do 8 tygodni od momentu dostępności materiałów. Znaczenie mają zarówno czas trwania, jak i warunek.

Rozpocznij nową rozmowę i zapytaj Do you offer financing?. Prawidłowa odpowiedź przyznaje, że źródło nie potwierdza takiej oferty, i kieruje pytanie do projektanta. Bardziej stanowcze sformułowania w prompcie nie uzupełnią brakującej informacji o firmie.

Krok 3: Jak zbierać zapytania o wycenę na czacie?

Smart Data Gathering pyta w trakcie rozmowy o wybrane informacje i zapisuje dane podane przez odwiedzającego. W zapytaniu o wycenę zbieraj tylko to, czego projektant potrzebuje do dalszego kontaktu.

1. Otwórz Actions & MCPs, włącz Smart Data Gathering i wybierz Edit Action. Ustaw Name na Quote enquiries, a Description na Capture contact and project details for a kitchen design enquiry. Zapisana nazwa stanie się tytułem karty.
2. W Data to collect dodaj poniższe wiersze. Odtwarzając przykład, zachowaj angielskie nazwy Data point; nazwy danych kontaktowych mają specjalne mapowania na pola odwiedzającego w Inbox.
3. Ustaw Reason for collecting information na So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Ustaw When to ask for data na After exchanging a few messages, a How to ask for data na Subtle.
5. Zapisz akcję. W AI Preview zadaj konkretne pytanie o usługę, zanim poprosisz o wycenę, i sprawdź zapisane dane w Inbox.

Pytania określają informacje do zebrania. Ustawienia momentu i stylu zadawania pytań wskazują, kiedy pytać; przetestuj też rzeczywistą rozmowę.

Imię i nazwisko, e-mail, kod pocztowy i rodzaj projektu to dane wymagane do kompletnego zapytania w tym przykładzie. Termin jest opcjonalny, zgodnie z Main Prompt. Ten wymóg biznesowy jest odrębny od ustawień zbierania danych podczas rozmowy; krok 8 wymusza obecność wymaganych pól przed wysłaniem żądania do CRM.

Agent powinien odpowiedzieć na ogólne pytanie o koszty bez uzależniania odpowiedzi od podania adresu e-mail. Odwiedzający może też odmówić podania danych. Użyj I am only researching. I do not want to leave contact details., aby sprawdzić, czy rozmowa pozostaje użyteczna bez ponawiania próśb.

Dokąd trafiają zebrane dane?

Otwórz rozmowę w Inbox. Standardowe dane kontaktowe pojawiają się w polach odwiedzającego; pozostałe zebrane wartości pozostają przypisane do rozmowy i można je wyeksportować przez Export Gathered Data.

W Where to send data opcja Email new leads powiadamia każdego administratora Agenta przy pierwszym zebraniu adresu e-mail lub numeru telefonu. Samo imię i nazwisko nie powoduje wysłania wiadomości. Preview i Simulation nie wysyłają tych powiadomień, więc zanim zaczniesz polegać na dostarczaniu e-maili, sprawdź własną skrzynkę administratora w kontrolowanym teście zainstalowanego widżetu. W lokalnym przykładzie wysyłanie zewnętrznych e-maili pozostaje wyłączone.

Dokumentacja Smart Data Gathering opisuje zbieranie danych, powiadomienia i eksport. We własnej witrynie wyjaśnij cel zbierania informacji i umieść w widżecie link do informacji o prywatności. Poradnik ochrony danych w chatbotach pomaga przeanalizować szerszy przepływ danych.

Krok 4: Jak umożliwić człowiekowi przejęcie czatu?

Human Handoff przekazuje rozmowę zespołowi; człowiek przejmuje ją następnie w Inbox i odpowiada temu samemu odwiedzającemu.

Przygotuj przekazywanie rozmów przed opublikowaniem widżetu. Osoba prosząca o projektanta nie powinna musieć najpierw wypełnić formularza wyceny, a Agent nie powinien sugerować, że ktoś jest dostępny poza godzinami pracy zespołu.

1. W Actions & MCPs włącz Human Handoff i otwórz Edit Action.
2. Pozostaw włączone standardowe reguły Media Message, User Frustration, Customer Support Suggestion i Lack Of Knowledge; pozostaw Irrelevant Advice wyłączone. Main Prompt już określa, kiedy proponować kontakt z projektantem. Testowany przykład wykorzystuje te standardowe reguły bez dodawania reguł niestandardowych.
3. Skonfiguruj poniższe wiadomości i dostępność, a następnie zapisz. W ćwiczeniu pozostaw Email notifications wyłączone i sprawdź przekazanie rozmowy bezpośrednio w Inbox.

Ustaw godziny, w których ktoś rzeczywiście monitoruje Inbox. Fikcyjny harmonogram nie jest obietnicą natychmiastowej odpowiedzi.

W godzinach pracy zespołu zapytaj w witrynie Can I speak to a designer?. Potwierdź przekazanie rozmowy, jeśli Agent o to poprosi. W Inbox otwórz rozmowę i wybierz Assign to me, gdy nie jest przypisana, lub Take over, gdy pojawi się ten przycisk. Wyślij odpowiedź jako człowiek i potwierdź, że odwiedzający ją otrzymał. Użyj Reassign to AI, gdy AI ma wznowić obsługę.

Sprawdź przypisanie i dostarczoną odpowiedź człowieka, nie tylko propozycję przekazania rozmowy przez Agenta.

Powtórz test w nowej rozmowie poza ustawionymi godzinami. Agent powinien wyjaśnić dostępność i zaproponować określoną ścieżkę dalszego kontaktu. Jeśli tymczasowo zmienisz harmonogram na potrzeby testu, przywróć potem rzeczywiste godziny. Dokumentacja Human Handoff wyjaśnia ustawienia i przebieg obsługi w Inbox.

W poradniku przekazywania rozmów z chatbota człowiekowi znajdziesz osobne testy przypisania rozmowy, powrotu do AI i błędów poza godzinami pracy.

Krok 5: Jak dopasować widżet do witryny?

Ustaw wygląd i stałe teksty w Channels → Your Website. Wiadomość powitalna powinna jasno wskazywać, o co odwiedzający może zapytać.

Wygląd

1. Otwórz Appearance. Dla Kestrel wybierz motyw Custom z białym tłem, ciemnozielonym nagłówkiem i kolorem akcentu (#315448) oraz białym tekstem nagłówka. Zachowaj domyślny rozmiar tekstu i zaokrąglone elementy sterujące.
2. W Branding → AI Agent Avatar kliknij ikonę przesyłania awatara, wybierz website/kestrel-avatar.png z zestawu i wybierz Upload w oknie kadrowania.
3. Ustaw Widget window max width na 400px, a Widget window max height na 520px. Wybierz Small jako rozmiar przycisku otwierającego czat, umieść go po prawej stronie i użyj etykiety Ask about your kitchen. Etykieta jest dostępna przy małym przycisku. Sprawdź jego pozycję względem banera plików cookie i innych pływających elementów witryny.
4. Pozostaw Auto-open Widget wyłączone. Otwieranie widżetu przy każdym załadowaniu strony przerywa przeglądanie, zwłaszcza na telefonie.

Sprawdzaj podgląd podczas wybierania kolorów. Test opublikowanej witryny nadal jest potrzebny, ponieważ przycisk otwierający czat współdzieli przestrzeń z elementami witryny.

Treści tekstowe

Otwórz Text Content i użyj poniższych wartości:

Propozycje rozpoczęcia rozmowy powinny prowadzić do konkretnych zadań. Zastrzeżenie informuje odwiedzających, które decyzje nadal wymagają projektanta.

Agent może odpowiadać w języku odwiedzającego. Tłumaczenie stałej wiadomości powitalnej i etykiet widżetu to osobne ustawienie w Other languages, dostępne w płatnych planach. W witrynie wielojęzycznej sprawdź zarówno odpowiedź, jak i stałe teksty interfejsu; poradnik chatbotów wielojęzycznych wyjaśnia to rozróżnienie.

Zmiany wyglądu mogą docierać do sesji odwiedzających korzystających z pamięci podręcznej przez kilka minut. Odśwież stronę, zanim uznasz, że zapisanie zmiany się nie powiodło. Hide Quickchat AI Branding wymaga planu Professional lub wyższego; poradnik konfiguracji pod własną marką opisuje pozostałe miejsca do sprawdzenia.

Krok 6: Jak zainstalować chatbota w witrynie?

Zainstaluj Widget we wspólnym układzie witryny lub użyj obsługiwanej integracji z platformą. Pływający Widget musi działać na stronie przeglądanej przez odwiedzającego.

1. Otwórz Channels → Your Website → Install.
2. Włącz Widget & Embed access dla publicznego widżetu.
3. Wybierz metodę instalacji dla swojej witryny i skopiuj fragment kodu lub Scenario ID wyświetlony dla tego Agenta.
4. Opublikuj zmianę, otwórz publiczną witrynę i zadaj pytanie, na które odpowiedź znajduje się w Knowledge Base.

Skopiuj dane z ekranu Install tego Agenta. Jego Scenario ID to publiczny identyfikator widżetu, a nie prywatny klucz API.

Dowolna witryna: wklej kod Widget przed zamykającym znacznikiem body

Wybierz Install manually with code i skopiuj kod Widget. Obecny skrypt ładujący ma następującą postać:

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

Zastąp YOUR_SCENARIO_ID wartością z Install. Wklej cały fragment raz, bezpośrednio przed </body> we wspólnym układzie lub użyj pola stopki działającego w całej witrynie w kreatorze. Skrypt dodaje element script do treści strony, więc umieszczenie go w sekcji head, zanim powstanie body, może uniemożliwić załadowanie.

Miejsce ma znaczenie. Blok HTML oparty na iframe jest osobną stroną i nie nadaje się do tego pływającego widżetu Widget.

Osobna opcja Embed umieszcza czat wewnątrz kontenera na stronie. Jeśli chcesz osadzić sekcję czatu w treści, użyj wygenerowanego dla niej kodu. Blok HTML dodający kod bezpośrednio do strony może obsługiwać taki układ; blok kreatora izolujący kod w iframe to inny przypadek. Zobacz dokumentację kanału Website.

WordPress: zainstaluj oficjalną wtyczkę

1. W WordPress otwórz Plugins → Add New, wyszukaj Quickchat AI Agent, a następnie wybierz Install Now i Activate.
2. Otwórz Settings → Quickchat AI Agent.
3. Wklej Scenario ID z ekranu Install w Quickchat AI i wybierz Save Changes.
4. Otwórz publiczną stronę i sprawdź widżet. Użyj wtyczki albo ręcznego fragmentu kodu, aby nie instalować skryptu ładującego dwukrotnie.

Potrzebujesz instalacji i planu WordPress, które pozwalają używać wtyczek. Poradnik chatbota dla WordPress pokazuje interfejs wtyczki i testy właściwe dla WordPress.

Squarespace: użyj kodu w stopce (Footer Code Injection)

1. Otwórz panel Code Injection witryny. Jeśli nawigacja na Twoim koncie wygląda inaczej, użyj wyszukiwarki ustawień w panelu.
2. Wklej cały kod Widget do Footer i zapisz.
3. Otwórz opublikowaną stronę w osobnej karcie przeglądarki i przetestuj odpowiedź.

Squarespace udostępnia Code Injection w planach Core, Plus, Advanced i niektórych starszych planach. Wstrzyknięcie kodu do stopki umieszcza go przed </body> w całej witrynie. Użyj tego miejsca dla pływającego widżetu; blok iframe na pojedynczej stronie nie jest równoważny. Ten własny kod nie obejmuje stron realizacji zakupu Squarespace.

Wix: użyj Custom Code w pozycji Body - end

1. W panelu witryny otwórz Settings → Custom Code, a następnie + Add Custom Code.
2. Wklej kod Widget i nadaj mu nazwę Quickchat AI widget.
3. Zastosuj go do All pages, wybierz Body - end, a następnie Apply.
4. Przetestuj opublikowaną witrynę, w tym przejście na inną stronę.

Wix wymaga opublikowanej witryny z podłączoną domeną, aby używać własnego kodu. Dla tego pływającego widżetu użyj ustawienia Custom Code działającego w całej witrynie.

Webflow: użyj Footer code i opublikuj witrynę

1. Otwórz Site settings → Custom code.
2. Wklej kod Widget do Footer code i wybierz Save changes.
3. Użyj Publish, aby opublikować witrynę w docelowej domenie, a następnie przetestuj opublikowany URL.

Ustawienia własnego kodu w Webflow wymagają odpowiedniego płatnego planu Workspace lub aktywnego planu Site. Sam zapis ustawienia go nie publikuje.

Shopify: wybierz kod istniejącego Agenta lub aplikację Shopify

Dla utworzonego już Agenta Kestrel dodaj jego kod Widget bezpośrednio przed </body> w Online Store → Themes → Edit code → layout/theme.liquid, a następnie zapisz i sprawdź sklep. Przed edycją utwórz kopię zapasową motywu, a po zmianie motywu sprawdź instalację ponownie. Ta metoda wyświetla wybranego Agenta; nie konfiguruje akcji produktów ani zamówień.

Dla Agenta przeznaczonego do sklepu konfiguracja aplikacji Quickchat AI dla Shopify łączy sklep przez osobny proces wdrożenia. Po połączeniu użyj Enable Widget in Shopify Theme Editor lub otwórz Online Store → Themes → Edit theme → App embeds. Włącz Quickchat AI Widget i zapisz. Dokumentacja osadzania aplikacji Shopify wyjaśnia ustawienia motywu; przy zmianie opublikowanego motywu ponownie włącz osadzenie aplikacji.

Powyższe ścieżki w kreatorach sprawdzono na podstawie oficjalnej dokumentacji. Zrzuty ekranu z przykładu pokazują witrynę Kestrel i rzeczywisty lokalny widżet; nie są to zrzuty z zalogowanych kont w każdym kreatorze.

Sprawdź kod przed diagnozowaniem Agenta

Te opcjonalne testy działają na podanych przez Ciebie wartościach:

• Sprawdź kod Widget. Porównaj wklejony kod z podanym Scenario ID. Ten test nie pobiera Twojej witryny.
• Porównaj metody wdrożenia. Sprawdź zadeklarowane kanały, dostęp do witryny i wymagane funkcje względem opcji konfiguracji Quickchat AI. Ten test nie sprawdza witryny ani konta.

W zgodnej przeglądarce testy te są dostępne także jako narzędzia witryny. Linki otwierają standardowe formularze.

Krok 7: Jak przetestować chatbota przed odwiedzającymi?

Przetestuj osobno odpowiedź, zapisane dane i dostarczoną wiadomość. AI Preview i Simulation Testing pomagają ocenić zachowanie; opublikowana witryna potwierdza, że odwiedzający może korzystać z zainstalowanego widżetu.

Przeprowadź niezależne testy pytań w Simulation Testing

Otwórz Testing → Create Dataset, nadaj nazwę Kestrel Kitchens: website launch checks i wybierz Paste messages. Dodaj poniższe pytania o czas, cenę i finansowanie, rozdzielając je wierszem zawierającym ---. Sam podział wiersza pozostawia tekst w jednej wiadomości testowej. Ustaw Evaluation criteria, aby sprawdzać fakty i zwięzłość odpowiedzi, a następnie wybierz Run → Start Run. Zestaw zawiera dokładne wiadomości i kryteria.

Każdy wiersz zbioru danych rozpoczyna osobną rozmowę. Do niezależnych pytań użyj Simulation; wieloetapowe testy wyceny i przejęcia przez człowieka przeprowadź w jednej rozmowie AI Preview lub w witrynie. Dziennik akcji i odbiorcę sprawdź osobno, ponieważ ocena transkrypcji nie potwierdza dostarczenia do zewnętrznego systemu.

Otwórz zakończone wykonanie i sprawdź odpowiedzi. Ta odpowiedź o cenie zachowuje orientacyjny przedział; ocena odpowiedzi nie potwierdza dostarczenia do innego systemu.

Między niezależnymi przypadkami rozpoczynaj nową rozmowę. Odświeżenie strony może wznowić istniejącą rozmowę, więc jeśli potrzebujesz nowego testu, użyj funkcji nowego czatu w widżecie.

Sprawdź witrynę na telefonie

Na ekranach poniżej 768 pikseli CSS otwarty widżet używa układu pełnoekranowego. Sprawdź, czy można go otworzyć, pisać przy widocznej klawiaturze, przewijać rozmowę i zamknąć go, aby wrócić do witryny.

Na koniec sprawdź odpowiedź rzeczywistej osoby z Inbox. Dobra odpowiedź AI nie potwierdza działania ścieżki obsługi przez człowieka. Po zmianie źródeł, promptów, akcji lub motywu witryny powtórz niewielki zestaw tych testów.

Krok 8: Jak wysłać kompletne zapytanie do CRM?

Opcjonalna API Action może wysłać zapisane pola do odbiorcy HTTP, gdy rozmowa zawiera wszystkie wymagane informacje. Podstawowy chatbot witryny jest już użyteczny bez tego rozszerzenia.

Istotne jest rozróżnienie między zebraniem danych kontaktowych a kompletnością zapytania. Quickchat AI ustawia lead_captured, gdy zbierze nową wartość standardowego pola kontaktowego, w tym imię i nazwisko. Sama flaga nie potwierdza obecności e-maila, kodu pocztowego ani rodzaju projektu.

Platforma sprawdza każdy warunek. Model zbiera informacje; warunki określają, kiedy żądanie kwalifikuje się do wysłania.

Przygotuj odbiorcę

Użyj kontrolowanego przez siebie endpointu CRM lub automatyzacji, który przyjmuje poniższą treść JSON. Zestaw zawiera mały lokalny serwer demonstracyjny dla osób, które chcą sprawdzić żądanie przed podłączeniem CRM. Instrukcje konfiguracji tworzą prywatny token i wyjaśniają udostępnienie tymczasowego endpointu HTTPS. Do serwera demonstracyjnego wysyłaj wyłącznie fikcyjne dane testowe.

Jeśli wolisz gotową integrację, skorzystaj z poradnika raportowania w Google Sheets lub poradnika podłączenia własnego CRM. Nie włączaj dwóch procesów, które tworzą ten sam kontakt.

Skonfiguruj jedną automatyczną API Action

1. Otwórz Actions & MCPs → Custom Actions → Add Action → API Action. Wybierz Create manually, jeśli otworzy się kreator oparty na opisie.
2. Ustaw API Action Name na Send quote enquiry.
3. Pozostaw What to ask the user first puste. Ta akcja odczytuje pola już zapisane przez Smart Data Gathering; nie zleca modelowi wypełnienia drugiego zestawu parametrów.
4. W API Endpoint wybierz POST i wpisz adres HTTPS /enquiries swojego odbiorcy.
5. Dodaj poniższe nagłówki, treść i warunki, a następnie zapisz i aktywuj akcję.

Wpisz token wyłącznie w ustawieniu nagłówka akcji. Nie umieszczaj go w prompcie, kodzie witryny ani rozmowie z odwiedzającym. README serwera demonstracyjnego wyjaśnia jego generowanie; w rzeczywistej integracji użyj uwierzytelniania opisanego w dokumentacji CRM.

W karcie Body wybierz JSON i wpisz:

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Użyj Add AI Data, aby wstawić odpowiednie wartości wbudowane i metadane. conversation_id identyfikuje rozmowę. Pozostałe wartości pochodzą z zapisanych pól; angielskie nazwy danych kontaktowych mapują się na visitor_name i visitor_email, a Project type staje się project_type. Dokumentacja zmiennych wyjaśnia te mapowania.

W When to run wybierz When metadata matches. W Run when dodaj wszystkie pięć wierszy; warunki metadanych są łączone operatorem AND:

Dla tych pól tekstowych is true odrzuca puste wartości oraz tekst interpretowany jako fałsz. exists sprawdza tylko obecność klucza; zapisana pusta wartość tekstowa może spełnić ten warunek. Poniższe testy pokazują, dlaczego silniejszy warunek ma znaczenie. Sprawdza on podanie użytecznego tekstu, a nie niezależne zweryfikowanie tożsamości odwiedzającego czy danych nieruchomości.

Użyj poniższej treści API Action Description:

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

Pierwsze dwa z pięciu zapisanych warunków. Dodaj każdy wiersz tabeli; When metadata matches sprawdza je po turze AI bez wybierania akcji przez Agenta.

Próba wykonania akcji następuje raz na rozmowę, gdy wszystkie warunki są spełnione. Akcja nie uruchamia się ponownie po podaniu opcjonalnego terminu, a wysłane żądanie zakończone błędem nie jest automatycznie ponawiane w tej rozmowie. Zachowaj termin w Inbox dla projektanta lub zbuduj integrację z osobnymi operacjami tworzenia i aktualizacji, jeśli CRM wymaga późniejszych zmian.

Żądanie jest wykonywane po turze AI, a odpowiedź na nie nie trafia do czatu. Dlatego Main Prompt potwierdza przyjęcie danych odwiedzającego bez twierdzenia, że CRM je zaakceptował. Sprawdź dostarczenie w dzienniku akcji i u odbiorcy. Dokumentacja automatycznych akcji opisuje ten sposób wykonania.

Przetestuj częściowe dane, a następnie kompletne zapytanie

Pierwsza wersja używała exists dla wymaganych pól tekstowych. Sam podał imię i nazwisko, a w kolejnej wiadomości e-mail. Smart Data Gathering utworzyło już puste wartości kodu pocztowego i rodzaju projektu, więc klucze istniały i akcja wysłała niekompletne żądanie. Zużyło to również jedyną próbę dla tej rozmowy.

Poprawka polegała na zmianie warunków czterech pól tekstowych na is true, bez pozostałych zmian konfiguracji. Powtórz test w nowej rozmowie, podając w drugiej turze tylko e-mail. Akcja powinna zaczekać na pozostałe szczegóły projektu.

To jedna zaobserwowana rozmowa, a nie wskaźnik skuteczności produkcyjnej. Odtwórz ją w nowej rozmowie, sprawdzaj zapisane pola po każdej turze i skontroluj żądanie we własnym endpoincie.

Rzeczywiste wywołanie akcji zwróciło HTTP 201. Otwórz szczegóły, aby sprawdzić żądanie; zapisany rekord poniżej pokazuje, co przechował odbiorca.

Jeden rzeczywiście zapisany rekord z uwierzytelnianego serwera demonstracyjnego. To zapytanie, a nie potwierdzona wycena czy rezerwacja.

Demonstracja używała lokalnego serwera i zarejestrowała rzeczywiste dostarczenie HTTP. Hostowany Agent Quickchat AI wymaga publicznie dostępnego endpointu HTTPS; usługa nie ma dostępu do adresu localhost na Twoim komputerze.

Jeśli nic nie dociera, sprawdź View logs akcji oraz zapisane metadane rozmowy. Brakujące wartości, wyłączona akcja i błąd HTTP wymagają różnych rozwiązań. Popraw konfigurację i użyj nowej rozmowy, aby ponownie przetestować automatyczne uruchomienie; prośba o ponowienie w tym samym czacie nie resetuje jednorazowej próby.

Dlaczego chatbot się nie wyświetla lub pokazuje stare ustawienia?

Przed zmianą promptu sprawdź opublikowaną stronę, miejsce instalacji i dostęp do Agenta. Problem z ładowaniem w przeglądarce jest odrębny od problemu z jakością odpowiedzi.

Jeśli przeglądarka zgłasza zablokowany zasób, sprawdź dokładny błąd Content Security Policy lub mechanizmu blokującego. Nie wyłączaj zbiorczo zabezpieczeń witryny. Testuj publiczną stronę przez HTTPS i skorzystaj z dokumentacji kanału, aby sprawdzić wymaganą konfigurację.

Ile kosztuje chatbot w witrynie?

Abonament i limit użycia pokrywają usługę AI; plan witryny i opcjonalne integracje to osobne koszty.

Kredyt AI nie oznacza rozmowy. Jedna rozmowa może zawierać kilka odpowiedzi AI, a różne modele mogą zużywać różną liczbę kredytów. Uwzględnij Preview i Simulation w budżecie testów. Korzystaj z aktualnego cennika i limitów oraz poradnika kosztów chatbotów, aby oszacować swoje użycie.

Czy ChatGPT lub Claude mogą pomóc skonfigurować chatbota?

Połączenie do zarządzania kontem Quickchat AI pozwala zgodnemu asystentowi konfigurować obsługiwane ustawienia Agenta i przygotowywać testy na podstawie tych materiałów.

Połącz własne konto przez Quickchat AI w ChatGPT lub Quickchat AI w Claude, zgodnie z poradnikiem Manage with AI. Obsługiwane narzędzia obejmują wiedzę, Main Prompt, propozycje rozpoczęcia rozmowy, Human Handoff, akcje HTTP, testy i kod wdrożenia.

Dokończ konfigurację Smart Data Gathering i szczegółowych ustawień Appearance widżetu w panelu. Musisz też autoryzować konta zewnętrzne i zainstalować kod w ustawieniach witryny. Połączenie konta służy zarządzaniu Agentem; jest odrębne od udostępnienia Agenta jako narzędzia MCP.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

Często zadawane pytania

Jak dodać chatbota AI na swoją stronę internetową?

Utwórz Agenta w Quickchat AI, dodaj wiedzę o firmie, skonfiguruj Main Prompt, Smart Data Gathering i Human Handoff, a następnie zainstaluj jego Widget za pomocą wtyczki lub dostarczonego kodu. W opublikowanej witrynie przetestuj odpowiedź na podstawie źródła, zapis danych kontaktowych i dostarczenie odpowiedzi człowieka.

Czy mogę dodać własny ChatGPT do witryny?

Możesz dodać asystenta podobnego do ChatGPT, nauczonego treści Twoich stron. W tym poradniku wdrażasz Agenta Quickchat AI przez widżet witryny, dzięki czemu odwiedzający mogą rozmawiać w Twojej witrynie bez logowania do ChatGPT. Jego wiedzą, instrukcjami i integracjami zarządzasz w Quickchat AI.

Czy mogę bezpłatnie dodać chatbota AI do witryny?

Plan Free w Quickchat AI służy osobistej, niekomercyjnej nauce i obejmuje 50 kredytów AI miesięcznie. Witryna firmowa lub wdrożenie do sprzedaży i obsługi klientów wymaga planu dopuszczającego użytek komercyjny. Abonament kreatora witryny jest osobnym kosztem, a testy również zużywają kredyty AI.

Czy muszę programować lub podawać klucz API?

Podstawowa konfiguracja wykorzystuje ustawienia panelu oraz wtyczkę, osadzenie aplikacji lub dostarczony skrypt. Kod witryny zawiera publiczny Scenario ID, a nie prywatny klucz API. Podłączenie opcjonalnej akcji CRM wymaga odpowiedniego endpointu i jego uwierzytelniania; dane uwierzytelniające przechowuj w ustawieniach akcji.

Czy chatbot w witrynie może zbierać dane potencjalnych klientów i zapytania o wycenę?

Tak. Smart Data Gathering pyta o wybrane pola w trakcie rozmowy i zapisuje je w Inbox. Email new leads może powiadomić administratorów Agenta po zebraniu adresu e-mail lub numeru telefonu. API Action może wysłać wymagane zapisane pola do skonfigurowanego odbiorcy; samo zapisanie imienia i nazwiska nie oznacza kompletnego zapytania.

Czy człowiek może przejąć czat?

Tak. Skonfiguruj Human Handoff z godzinami pracy zespołu i wiadomością poza tymi godzinami. W Inbox wybierz Assign to me dla nieprzypisanej rozmowy lub Take over, gdy ten przycisk jest widoczny, a następnie odpowiedz odwiedzającemu. Reassign to AI przekazuje rozmowę z powrotem Agentowi.

Czy rozwiązanie działa w WordPress, Shopify, Squarespace, Wix i Webflow?

Każda z tych platform ma ścieżkę instalacji. Użyj oficjalnej wtyczki WordPress, osadzenia aplikacji Shopify po połączeniu Agenta sklepu lub odpowiedniego kodu w stopce albo na końcu body w całej witrynie dla istniejącego Agenta. Uprawnienia do wtyczek i wymagania planów dotyczące własnego kodu zależą od kreatora.

Dlaczego chatbot nie pojawia się w mojej witrynie?

Sprawdź opublikowaną stronę, prawidłowy Scenario ID i umieszczenie kodu na końcu body strony. Usuń stare powielone instalacje i unikaj bloków opartych na iframe w przypadku pływającego widżetu (Widget). Jeśli się otwiera, ale nie odpowiada, sprawdź Widget & Embed access i dostępne kredyty AI.

Czy chatbot spowolni moją witrynę?

Skrypt ładujący widżet pobiera się asynchronicznie, ale nadal dodaje JavaScript i żądania sieciowe. Porównaj wydajność ładowania i interakcji przed instalacją i po niej na reprezentatywnych stronach oraz na telefonie. Asynchroniczne ładowanie nie oznacza braku wpływu na wydajność.

Czy chatbot witryny działa na telefonach?

Otwarty widżet używa układu pełnoekranowego poniżej 768 pikseli CSS. Przetestuj na telefonie przycisk otwierający czat, klawiaturę, przewijanie i przycisk zamykania. Pozostaw Auto-open Widget wyłączone, jeśli automatyczne otwieranie przerywałoby przeglądanie.

Czy chatbot może odpowiadać w językach odwiedzających?

Agent może odpowiadać w języku odwiedzającego. Tłumaczenie stałego tekstu powitalnego, propozycji rozpoczęcia rozmowy i etykiet widżetu to osobne ustawienie w płatnych planach. Dla każdego obsługiwanego języka sprawdź zarówno fakty w odpowiedzi, jak i teksty interfejsu.