Jak přidat AI chatbota na web bez programování

Piotr Grudzień
Publikováno Aktualizováno 21 min čtení
Postup webového chatbota Kestrel Kitchens: odpovědi na otázky, sběr poptávky a předání konverzace návrháři

AI chatbota přidáte na svůj web tak, že Agentovi předáte znalosti o své firmě, nastavíte jeho odpovědi a nainstalujete chatovací widget pomocí pluginu nebo dodaného skriptu. Webový chatbot Quickchat AI soustředí znalosti, nastavení konverzace a týmový Inbox na jednom místě. Návštěvníci pokládají otázky na vašem webu bez vytváření účtu.

V tomto návodu vytvoříme chatbota pro Kestrel Kitchens, fiktivní firmu zabývající se návrhem kuchyní. Návštěvník se zeptá, jak dlouho trvá rekonstrukce, ověří přibližnou cenu kuchyně o rozměrech 3 krát 4 metry a potom požádá o cenovou nabídku. Agent odpoví podle firemních informací, shromáždí podrobnosti o projektu a umožní návrháři pokračovat v konverzaci.

Fiktivní web Kestrel Kitchens se skutečným widgetem Quickchat AI, který přijímá poptávku a vysvětluje orientační cenové rozpětí Výsledná podoba na webu. Kestrel Kitchens i údaje o firmě jsou fiktivní; widget a jeho odpovědi běží ve skutečné lokální aplikaci.

Základní nastavení nevyžaduje programování. Projděte znalosti a pokyny, sběr kontaktů a předání člověku, potom nainstalujte widget. Volitelná API Action odesílá úplné poptávky do jiného systému.

Stáhněte sadu pro nastavení Kestrel Kitchens, která obsahuje ukázkový web, znalosti, Main Prompt, nastavení a testovací zprávy. Jde o upravitelné soubory, podle kterých postupujete v panelu, nikoli o import Agenta jedním kliknutím.

Snímky obrazovky a kopírovatelné soubory sady, prompty i konfigurace zůstávají v angličtině, abyste mohli ověřený příklad přesně reprodukovat.

Co bude webový chatbot dělat?

Chatbot odpovídá na otázky podle vašeho obsahu, ukládá údaje potřebné pro vyžádané navázání kontaktu a předává konverzace týmu, když je potřeba člověk.

Každý z těchto výsledků vyžaduje jiné ověření. Správné cenové rozpětí vychází z Knowledge Base. Poptávka vyžaduje kontaktní údaje a podrobnosti o projektu v Inboxu. Při předání musí člověk převzít konverzaci a odeslat odpověď, která dorazí návštěvníkovi.

Vývojový diagram otázky z webu, odpovědi ze znalostí, poptávky a předání člověku Cesta návštěvníka v tomto příkladu. Poptávka zaznamenává zájem; cenu a dostupnost stále potvrzuje návrhář.

Otázka návštěvníkaÚkol AgentaCo ověřit
Jak dlouho trvá rekonstrukce?Vysvětlit zveřejněnou dobu návrhu a montážeOdpověď zachovává podmínky, za kterých tyto doby platí
Kolik stojí kuchyně o rozměrech 3 krát 4 metry?Uvést orientační rozpětí a vysvětlit, co určí zaměření na místěŽádná smyšlená závazná nabídka ani cena za metr čtvereční
Mohu požádat o cenovou nabídku?Získat jméno, e-mail, PSČ a typ projektuPole se objeví v uložených údajích konverzace
Nabízíte financování?Přiznat, že dodané znalosti tuto informaci neobsahujíŽádná smyšlená nabídka financování
Mohu mluvit s návrhářem?Použít Human Handoff podle pracovní doby týmuNávrhář může odpovědět z Inboxu a návštěvník odpověď obdrží

Co potřebujete před přidáním chatbota?

Potřebujete účet Quickchat AI, ověřitelné informace o firmě a přístup k nastavení pluginů nebo vlastního kódu webu.

  1. Vytvořte účet Quickchat AI a dokončete registraci. Pro toto cvičení použijte samostatného Agenta, aby ukázkové údaje nemohly ovlivnit stávající zákaznickou podporu.
  2. Připravte stránky služeb, FAQ a podmínky nebo použijte fiktivní znalosti ze sady. Před nasazením pro skutečnou firmu nahraďte fiktivní ceny a oblast působnosti.
  3. Ověřte, že tarif vašeho webu umožňuje příslušný způsob instalace. WordPress vyžaduje přístup k pluginům; některé hostované editory webů vyžadují pro vlastní kód na celém webu placený tarif.
  4. Domluvte se s někým, kdo bude při testování předání člověku sledovat testovací Inbox. Pro závěrečné kontroly webu si připravte prohlížeč na počítači a telefon.

Free je určen pro osobní nekomerční učení. Tarif Free zahrnuje 50 AI kreditů měsíčně. Firemní nasazení vyžaduje komerční tarif a testování čerpá stejný limit odpovědí jako ostatní AI konverzace. Předplatné editoru webu a náklady na externí API se platí zvlášť. Část o nákladech tyto položky rozlišuje.

Krok 1: Jak chatbota naučíte obsah svého webu?

Přidejte stránky s odpověďmi o své firmě do Knowledge Base a před testováním ověřte importovaný obsah. Agent tak získá podklady pro své odpovědi.

Vytvořte Agenta pro učení

  1. Na první obrazovce nastavení vyberte Set up manually. Ve stávajícím panelu použijte + vedle AI Agent (Add new AI Agent), vytvořte samostatného Agenta a potom vyberte Set up manually.
  2. V Identity zadejte do Name your AI Agent hodnotu Kestrel Kitchens. Do Describe what you want your agent to do vložte obsah souboru main-prompt.txt ze sady. Tím vznikne Agentův Main Prompt, který vysvětluje krok 2. Vyberte Next.
  3. Knowledge Base zatím ponechte prázdnou a vyberte Next. Pokračujte přes External apps bez výběru připojení. V Deployment vyberte Chat widget a potom Next.
  4. Na obrazovce Choose your plan použijte Skip for now, pokud pokračujete v osobním cvičení, nebo vyberte vhodný komerční tarif pro firemní použití. Případnou další volitelnou nabídku dokončete nebo zavřete.
  5. V panelu zkontrolujte jméno Agenta v Identity a potom otevřete Knowledge Base. Vyberte buď vlastní stránky, nebo dodaný ukázkový článek níže.

Stránka Identity Agenta Kestrel Kitchens se skutečnou navigací Quickchat AI a kartou Main Prompt Identity obsahuje jméno Agenta a Main Prompt. Dalšími zastávkami tohoto postupu jsou Knowledge Base, Actions & MCPs a Your Website.

Importujte vlastní stránky

  1. V Knowledge Base vyberte Add Website. Podle potřebného rozsahu zvolte jednu stránku nebo možnost importu webu.
  2. Zadejte veřejnou URL. Při importu webu projděte nalezené stránky a vyberte stránky služeb, cen, postupu a FAQ, ze kterých mají odpovědi vycházet.
  3. Prohlédněte importovaný text. Ověřte, že ceny obsahují správnou měnu a informace o daních a že se mezi zdroje nedostaly staré akce ani nesouvisející stránky.
  4. Počkejte na dokončení zpracování. Před testováním nainstalovaného widgetu použijte nebo publikujte všechny čekající změny znalostí, které panel zobrazuje.

Začněte několika přehlednými stránkami. Web může zobrazovat přitažlivou cenovou kartu a její podmínky uvádět jinde; Agent potřebuje obojí. Import samotné úvodní stránky může vynechat podmínky montáže, územní omezení nebo pravidla vracení peněz, díky kterým je odpověď užitečná.

Použijte podklady Kestrel Kitchens

Chcete-li příklad zopakovat bez předchozího hostování webu, přidejte údaje přímo:

  1. V Knowledge Base vyberte Add Article. Vytvoří se článek Untitled a otevře se Edit Article.
  2. Do Title zadejte Kestrel Kitchens: services, prices and process. V Content vyberte Plain Text a vložte obsah souboru knowledge.txt ze sady.
  3. Vyberte Save a počkejte, až bude článek ve stavu Ready. Ověřte, že se jeho název zobrazuje v seznamu Knowledge Base.

Knowledge Base Kestrel Kitchens s volbami Add Article, Add Website a ukázkovým článkem ve stavu Ready Knowledge Base najdete v navigaci Agenta. Příklad vyžaduje jeden článek; pro vlastní zveřejněné stránky použijte Add Website.

Knowledge Base Kestrel Kitchens v aplikaci Quickchat AI Uložený článek zachovává podmínky cen a časových odhadů. Jeho fiktivní údaje odpovídají ukázkovému webu.

Zkopírujte úplné ukázkové znalosti
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.

Podklady záměrně neuvádějí financování. Díky tomu můžete otestovat, jak Agent zachází se skutečně chybějící informací. U skutečného webu udržujte zdrojové stránky aktuální a tam, kde jsou dostupná, používejte podporovaná nastavení obnovování; průvodce Knowledge Base vysvětluje uspořádání a testování těchto zdrojů.

Krok 2: Co má chatbot říkat a co nikdy neslibovat?

Pomocí Main Prompt určete, jak Agent používá znalosti: nejprve odpoví, poskytne užitečné informace a rozhodnutí, například závaznou cenovou nabídku, ponechá týmu.

U Kestrel rozměry místnosti určují rozsah projektu. Neurčují skříňky, spotřebiče ani stavební práce. Agent má vysvětlit orientační rozpětí £18,000 až £45,000 včetně DPH uvedené ve zdroji, aniž by z podlahové plochy vypočítával přesnější cenu.

Schéma oddělující orientační cenové rozpětí rekonstrukce kuchyně od zaměření a písemné nabídky potřebných k potvrzení ceny Tyto ceny jsou fiktivní údaje pro návod. Podstatné je zachovat rozdíl mezi fakty ze zdroje a rozhodnutím, které musí teprve udělat váš tým.

  1. V Identity vyberte Edit na kartě Main Prompt.
  2. Vložte celý prompt níže. Nechte jej uložit a potom znovu otevřete editor, abyste ověřili uložený text.
  3. Firemní údaje uchovávejte v Knowledge Base. Prompt použijte pro styl odpovědí, způsob sběru údajů a rozhodnutí vyžadující člověka.

Editor Main Prompt pro Kestrel Kitchens v Quickchat AI Main Prompt je pole s pokyny. Úplný text níže a v sadě je určen ke zkopírování.

Zkopírujte celý Main Prompt
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.

Otevřete AI Preview a zeptejte se How long does a full kitchen renovation take?. V lokálním kontrolním testu Agent odpověděl, že zaměření a návrh trvají 2 až 3 týdny a následná montáž 4 až 8 týdnů od dostupnosti materiálů. Důležitá je jak doba, tak podmínka její platnosti.

Začněte novou konverzaci a zeptejte se Do you offer financing?. Správná odpověď přizná, že zdroj nabídku financování nedokládá, a odkáže s dotazem na návrháře. Sebejistější formulace v promptu chybějící firemní údaj nedoplní.

Krok 3: Jak v chatu shromažďovat poptávky?

Smart Data Gathering se v průběhu konverzace ptá na vybrané informace a ukládá to, co návštěvník poskytne. U poptávky shromažďujte jen údaje, které návrhář potřebuje k navázání kontaktu.

Actions & MCPs v Quickchat AI s Human Handoff a akcí pro sběr poptávek Kestrel Zde zapínáte a upravujete vestavěné akce. Karta Smart Data Gathering se v příkladu jmenuje Quote enquiries.

  1. Otevřete Actions & MCPs, zapněte Smart Data Gathering a vyberte Edit Action. Nastavte Name na Quote enquiries a Description na Capture contact and project details for a kitchen design enquiry. Uložený název se stane titulkem karty.
  2. V Data to collect přidejte níže uvedené řádky. Při reprodukci příkladu zachovejte tyto anglické názvy Data point; názvy kontaktních údajů mají zvláštní mapování na pole návštěvníka v Inboxu.
  3. Nastavte Reason for collecting information na So a Kestrel Kitchens designer can assess your project and follow up by email.
  4. Nastavte When to ask for data na After exchanging a few messages a How to ask for data na Subtle.
  5. Akci uložte. V AI Preview položte před žádostí o nabídku užitečnou otázku o službách a potom zkontrolujte uložené údaje v Inbox.
Datový bod (Data point)Otázka ke sběru údajůFormát nebo příklady hodnot
Full nameWhat is your full name?Full name
EmailWhat email can our designer use?Email
PostcodeWhat is the property postcode?Text
Project typeWhat kitchen work do you need?Text
TimelineWhen would you like to start?Text

Nastavení Smart Data Gathering pro Kestrel Kitchens s poli a způsobem sběru údajů Otázky popisují informace ke sběru. Nastavení načasování a stylu určují, kdy se má Agent ptát; otestujte i skutečnou konverzaci.

Jméno, e-mail, PSČ a typ projektu jsou povinné údaje pro úplnou poptávku v tomto příkladu. Termín je volitelný, jak vysvětluje Main Prompt. Tento firemní požadavek je oddělený od nastavení sběru údajů v konverzaci; krok 8 vyžaduje vyplnění povinných polí před odesláním požadavku do CRM.

Agent má odpovědět na obecnou otázku o ceně, aniž by odpověď podmiňoval poskytnutím e-mailové adresy. Návštěvník může sběr údajů také odmítnout. Zprávou I am only researching. I do not want to leave contact details. ověřte, že konverzace zůstává užitečná bez opakovaných žádostí.

Kam se shromážděné údaje ukládají?

Otevřete konverzaci v Inbox. Standardní kontaktní údaje se zobrazí v polích návštěvníka; ostatní shromážděné hodnoty zůstanou připojené ke konverzaci a lze je exportovat pomocí Export Gathered Data.

V Where to send data volba Email new leads upozorní každého administrátora Agenta při prvním zachycení e-mailové adresy nebo telefonního čísla. Samotné jméno odeslání e-mailu nespustí. Preview a Simulation tato oznámení neodesílají, proto dříve, než se na doručování e-mailů spolehnete, ověřte vlastní administrátorskou schránku kontrolovaným testem na nainstalovaném widgetu. V lokálním postupu zůstává doručování externích e-mailů vypnuté.

Dokumentace Smart Data Gathering popisuje sběr, oznámení a exporty. Na vlastním webu vysvětlete, proč údaje požadujete, a ve widgetu přidejte odkaz na informace o ochraně osobních údajů. Průvodce ochranou dat u chatbotů pomůže prověřit širší tok dat.

Krok 4: Jak umožníte člověku převzít chat?

Human Handoff předá konverzaci vašemu týmu; člověk ji potom převezme v Inbox a odpoví stejnému návštěvníkovi.

Předání připravte před zveřejněním widgetu. Člověk, který požádá o návrháře, by neměl nejprve dokončovat poptávkový formulář a Agent by neměl mimo pracovní dobu naznačovat, že je někdo online.

  1. V Actions & MCPs zapněte Human Handoff a otevřete Edit Action.
  2. Standardní pravidla Media Message, User Frustration, Customer Support Suggestion a Lack Of Knowledge ponechte zapnutá; Irrelevant Advice nechte vypnuté. Main Prompt již vysvětluje, kdy nabídnout návrháře. Ověřený příklad používá tato standardní pravidla bez přidání vlastních pravidel.
  3. Nastavte níže uvedené zprávy a dostupnost a potom uložte. Pro výukové cvičení nechte Email notifications vypnuté a předání ověřte přímo v Inboxu.
NastaveníHodnota pro Kestrel Kitchens
QuestionWould you like me to connect you with a kitchen designer?
ConfirmationI have passed your chat to our design team. A designer will reply here when available.
Human Agents’ availabilityOn
Your time zoneEurope/London
Working hoursMonday to Friday, 09:00 to 17:00
Message outside working hoursOur design team is available Monday to Friday, 9am to 5pm UK time. Leave your name and email so a designer can follow up.

Dostupnost a zprávy Human Handoff nastavené pro návrhářský tým Kestrel Kitchens Použijte dobu, kdy Inbox skutečně někdo sleduje. Fiktivní pracovní doba není příslibem okamžité odpovědi.

Během pracovní doby pošlete z webu Can I speak to a designer?. Dokončete případné potvrzení předání, které Agent požaduje. V Inboxu otevřete konverzaci a vyberte Assign to me, pokud není přiřazená, nebo Take over, pokud se tento ovládací prvek zobrazuje. Odešlete lidskou odpověď a ověřte, že ji návštěvník obdržel. Až má AI pokračovat, použijte Reassign to AI.

Inbox Quickchat AI s vybranou konverzací Sam Taylor, odpovědí Maya Patel a údaji návštěvníka Inbox sdružuje konverzaci, ovládání přiřazení a údaje návštěvníka. Před odpovědí vyberte konverzaci daného návštěvníka.

Konverzace Kestrel Kitchens v Inboxu během převzetí člověkem Ověřte přiřazení a doručenou lidskou odpověď, nejen Agentovu nabídku předání.

Widget Kestrel Kitchens s lidskou odpovědí Maya Patel po převzetí konverzace v Inboxu Stejné předání z pohledu návštěvníka. Maya Patel je fiktivní návrhářka použitá v lokálním testu.

Zopakujte test v nové konverzaci mimo nastavenou pracovní dobu. Agent má vysvětlit dostupnost a nabídnout uvedený způsob následného kontaktu. Pokud kvůli této kontrole dočasně změníte pracovní dobu, poté obnovte skutečný rozvrh. Dokumentace Human Handoff vysvětluje nastavení a postup v Inboxu.

V návodu na předání konverzace z chatbota člověku najdete samostatné kontroly přiřazení konverzace, návratu k AI a selhání mimo pracovní dobu.

Krok 5: Jak sladíte widget se svým webem?

Vzhled a pevné texty nastavte v Channels → Your Website. Uvítací zpráva má dostatečně konkrétně vysvětlit, na co se návštěvník může ptát.

Vybraná sekce Your Website v Quickchat AI s kartami Install, Appearance a Text Content Tyto tři karty oddělují instalaci, vzhled a pevné texty. Appearance obsahuje také avatar a popisek tlačítka pro otevření chatu.

Vzhled

  1. Otevřete Appearance. Pro Kestrel zvolte motiv Custom s bílým pozadím, tmavě zelenou hlavičkou a barvou zvýraznění (#315448) a bílým textem hlavičky. Ponechte výchozí velikost textu a zaoblené ovládací prvky.
  2. V Branding → AI Agent Avatar klikněte na ikonu nahrávání u avataru, vyberte website/kestrel-avatar.png ze sady a v dialogu oříznutí zvolte Upload.
  3. Nastavte Widget window max width na 400px a Widget window max height na 520px. Pro velikost tlačítka zvolte Small, umístěte jej vpravo a jako popisek použijte Ask about your kitchen. Popisek je dostupný u malého tlačítka. V náhledu zkontrolujte jeho umístění vůči cookie liště a dalším plovoucím prvkům na webu.
  4. Auto-open Widget nechte vypnuté. Otevírání widgetu při každém načtení stránky přerušuje prohlížení, zejména na telefonu.

Nastavení Appearance webového widgetu v aplikaci Quickchat AI Při výběru barev sledujte náhled. Test na živém webu je stále důležitý, protože tlačítko pro otevření chatu sdílí prostor s ovládacími prvky webu.

Textový obsah

Otevřete Text Content a použijte tyto hodnoty:

NastaveníHodnota
HeaderKestrel Kitchens
Welcome messageHello, I can help with kitchen costs, timelines and quote enquiries. What are you planning?
Conversation startersHow long does a renovation take? / What does a kitchen cost? / Can I request a quote?
Disclaimer textAI assistant. Prices are indicative. A designer confirms your quote after a survey.

Uvítací zpráva a úvodní otázky Kestrel Kitchens v Text Content Úvodní otázky mají zahajovat užitečné úkoly. Upozornění návštěvníkům říká, která rozhodnutí stále vyžadují návrháře.

Agent může odpovídat v jazyce návštěvníka. Překlad pevné uvítací zprávy a popisků widgetu je samostatné nastavení v Other languages, dostupné v placených tarifech. U vícejazyčného webu otestujte odpověď i pevný text rozhraní; průvodce vícejazyčnými chatboty tento rozdíl vysvětluje.

Změny vzhledu mohou do návštěvnických relací s mezipamětí dorazit až za několik minut. Než usoudíte, že se uložená změna neprovedla, obnovte stránku. Hide Quickchat AI Branding vyžaduje tarif Professional nebo vyšší; návod na vlastní branding chatbota popisuje další místa ke kontrole.

Krok 6: Jak chatbota nainstalujete na svůj web?

Nainstalujte Widget do sdílené šablony webu nebo použijte podporovanou integraci platformy. Plovoucí Widget musí běžet na stránce, kterou návštěvník prohlíží.

  1. Otevřete Channels → Your Website → Install.
  2. Pro veřejný widget zapněte Widget & Embed access.
  3. Vyberte způsob instalace pro svůj web a zkopírujte úryvek kódu nebo Scenario ID zobrazené pro tohoto Agenta.
  4. Změnu publikujte, otevřete veřejný web a položte otázku, jejíž odpověď je podle vás určitě v Knowledge Base.

Nabídka instalace na web v Quickchat AI s ručním vložením kódu, WordPressem, Shopify a dalšími editory webů Kopírujte z obrazovky Install tohoto Agenta. Jeho Scenario ID je veřejný identifikátor widgetu, nikoli soukromý klíč API.

Libovolný web: vložte kód widgetu před uzavírací značku body

Vyberte Install manually with code a zkopírujte kód Widget. Současný zavaděč má tuto podobu:

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

Nahraďte YOUR_SCENARIO_ID hodnotou z Install. Vložte celý úryvek kódu jednou, bezprostředně před </body> ve sdílené šabloně, nebo použijte pole editoru pro patičku celého webu. Tento zavaděč vkládá skript do těla stránky, takže umístění do hlavičky před vytvořením těla může zabránit načtení.

Schéma umístění kódu widgetu na konec těla hlavní stránky, mimo iframe Na umístění záleží. HTML blok založený na iframe je samostatná stránka a pro tento plovoucí Widget není vhodný.

Samostatná volba Embed umístí chat do kontejneru na stránce. Pokud chcete chat jako součást obsahu stránky, použijte její vygenerovaný kód. HTML blok vkládající kód přímo do stránky může tento způsob podporovat; blok editoru, který kód izoluje v iframe, je jiný případ. Viz dokumentace webového kanálu.

WordPress: nainstalujte oficiální plugin

  1. Ve WordPressu otevřete Plugins → Add New, vyhledejte Quickchat AI Agent a potom zvolte Install Now a Activate.
  2. Otevřete Settings → Quickchat AI Agent.
  3. Vložte Scenario ID z obrazovky Install v Quickchat AI a vyberte Save Changes.
  4. Otevřete veřejnou stránku a zkontrolujte widget. Použijte buď plugin, nebo ruční vložení kódu, abyste zavaděč nenainstalovali dvakrát.

Potřebujete instalaci a tarif WordPressu, které umožňují pluginy. Průvodce chatbotem pro WordPress ukazuje rozhraní pluginu a kontroly specifické pro WordPress.

Squarespace: vložte kód do patičky pomocí Code Injection

  1. Otevřete panel Code Injection webu. Pokud se navigace ve vašem účtu liší, použijte vyhledávání nastavení v panelu.
  2. Vložte celý kód widgetu do Footer a uložte.
  3. Otevřete publikovanou stránku na samostatné kartě prohlížeče a otestujte odpověď.

Squarespace poskytuje Code Injection v tarifech Core, Plus, Advanced a některých starších tarifech. Vložení do patičky umístí kód před </body> na celém webu. Pro plovoucí widget použijte toto nastavení; blok iframe na jednotlivé stránce není rovnocenná náhrada. Tento vlastní kód se nevztahuje na stránky pokladny Squarespace.

Wix: použijte vlastní kód v umístění Body - end

  1. V panelu webu otevřete Settings → Custom Code a potom + Add Custom Code.
  2. Vložte kód widgetu a pojmenujte jej Quickchat AI widget.
  3. Použijte jej na All pages, vyberte Body - end a potom Apply.
  4. Otestujte publikovaný web včetně přechodu na jinou stránku.

Wix vyžaduje pro vlastní kód publikovaný web s připojenou doménou. Pro tento plovoucí widget použijte nastavení Custom Code pro celý web.

Webflow: vložte kód do patičky a publikujte

  1. Otevřete Site settings → Custom code.
  2. Vložte kód widgetu do Footer code a zvolte Save changes.
  3. Pomocí Publish publikujte na požadovanou doménu a potom otestujte tuto publikovanou URL.

Nastavení vlastního kódu ve Webflow vyžaduje odpovídající placený Workspace nebo aktivní tarif Site. Samotné uložení nastavení jej nepublikuje.

Shopify: zvolte kód stávajícího Agenta nebo aplikaci Shopify

U již vytvořeného Agenta Kestrel přidejte jeho kód widgetu bezprostředně před </body> v Online Store → Themes → Edit code → layout/theme.liquid, potom uložte a zkontrolujte obchod. Před úpravou si vytvořte zálohu motivu a po změně motivu instalaci znovu ověřte. Tento postup zobrazí vybraného Agenta; nenastavuje akce pro produkty ani objednávky.

Pro Agenta zaměřeného na obchod propojí nastavení aplikace Quickchat AI pro Shopify obchod prostřednictvím vlastního úvodního postupu. Po připojení použijte Enable Widget in Shopify Theme Editor nebo otevřete Online Store → Themes → Edit theme → App embeds. Zapněte Quickchat AI Widget a uložte. Dokumentace vložených aplikací Shopify vysvětluje ovládací prvky motivu; při změně publikovaného motivu vloženou aplikaci znovu zapněte.

Výše uvedené postupy pro editory webů byly ověřeny podle oficiální dokumentace. Snímky v návodu ukazují ukázkový web Kestrel a skutečný lokální widget; nejde o snímky přihlášených účtů ve všech editorech.

Než začnete řešit problémy Agenta, zkontrolujte vložený kód

Tyto volitelné kontroly pracují s hodnotami, které zadáte:

  • Zkontrolujte kód widgetu. Porovnejte vložený kód se zadaným Scenario ID. Tato kontrola váš web nenačítá.
  • Porovnejte způsoby nasazení. Porovnejte deklarované kanály, přístup k webu a požadované funkce s možnostmi nastavení Quickchat AI. Tato kontrola neprohlíží váš web ani účet.

V kompatibilním prohlížeči jsou tyto kontroly dostupné také jako nástroje webu. Odkazy otevírají standardní formuláře.

Krok 7: Jak chatbota otestujete před návštěvníky?

Odpověď, uložená data a doručenou zprávu testujte odděleně. AI Preview a Simulation Testing pomáhají vyhodnotit chování; publikovaný web ověří, že návštěvník může nainstalovaný widget používat.

Spusťte nezávislé otázky v Simulation Testing

Otevřete Testing → Create Dataset, pojmenujte sadu Kestrel Kitchens: website launch checks a vyberte Paste messages. Přidejte níže uvedené otázky na dobu trvání, cenu a financování, oddělené řádkem obsahujícím ---. Samotné zalomení řádku ponechá text v jedné testovací zprávě. V Evaluation criteria nastavte kontrolu faktů a stručnosti odpovědí, potom vyberte Run → Start Run. Sada obsahuje přesné zprávy a kritéria.

Každý řádek datové sady zahajuje samostatnou konverzaci. Pro tyto nezávislé otázky použijte Simulation; kontroly poptávky s více zprávami a převzetí člověkem proveďte v jedné konverzaci AI Preview nebo na webu. Protokol akce a příjemce zkontrolujte zvlášť, protože hodnotitel přepisu nemůže ověřit externí doručení.

Datová sada Kestrel pro kontroly před spuštěním webu se třemi dokončenými případy Simulation a rozbalenou odpovědí na cenu kuchyně Otevřete dokončený běh a prohlédněte odpovědi. Tato odpověď na cenu zachovává orientační rozpětí; její skóre nedokládá doručení do jiného systému.

Uložená konverzace Simulation s úplnou otázkou na cenu kuchyně a odpovědí uvádějící orientační rozpětí místo závazné nabídky Stejný test ceny otevřený jako konverzace v Inboxu. Prohlédněte celou odpověď včetně vysvětlení, proč samotné rozměry nestačí k závazné nabídce, místo spoléhání pouze na skóre.

Testovací zpráva nebo posloupnostOčekávaný výsledekCo zkontrolovat
How long does a full kitchen renovation take?2 až 3 týdny na zaměření a návrh; 4 až 8 týdnů na montáž od dostupnosti materiálůOdpověď a zdroj
How much would a 3 by 4 metre kitchen cost?£18,000 až £45,000 včetně DPH jako orientační rozpětí; závazná nabídka vyžaduje zaměřeníŽádná smyšlená pevná cena
Do you offer financing?Agent to ze zdroje nemůže potvrdit a nabízí kontakt s návrhářemOdpověď a potom předání, pokud je vyžádáno
Can I get a quote? My name is Sam Taylor.Zeptat se na chybějící informace; zatím nespouštět akci pro úplnou poptávkuUložené jméno; žádný příjem v CRM
My email is sam@example.com. The postcode is BS6 7AB and it is a full kitchen renovation.Uložit poskytnutý e-mail, PSČ a typ projektuPole v Inboxu; volitelně protokol akce a příjemce
I have not decided when to start.Přijmout neznámý termínŽádné smyšlené datum ani povinný termín
I am only researching. I do not want to leave contact details.Pokračovat v odpovídání bez opakovaných žádostí o údajeNásledující užitečná odpověď
Can I speak to a designer?Postupovat podle nastavené cesty v pracovní době nebo mimo niPřiřazení konverzace a doručení lidské odpovědi
¿Cuánto suele durar una reforma de cocina?Odpovědět španělsky a zachovat stejná časová rozpětí i podmínkyFakta i jazyk

Mezi nezávislými případy použijte novou konverzaci. Obnovení stránky může navázat na stávající konverzaci, takže pro nový test použijte ovládací prvek widgetu pro nový chat.

Zkontrolujte web na telefonu

Na obrazovkách užších než 768 CSS pixelů používá otevřený widget celoobrazovkové rozložení. Ověřte, že jej můžete otevřít, psát se zobrazenou klávesnicí, posouvat konverzaci a zavřít jej pro návrat na web.

Na závěr nechte skutečného člověka odpovědět z Inboxu. Dobrá odpověď AI nedokládá, že funguje i cesta k lidské podpoře. Po změně zdrojů, promptů, akcí nebo motivu webu zopakujte menší sadu těchto kontrol.

Krok 8: Jak odešlete úplnou poptávku do CRM?

Volitelná API Action může odeslat uložená pole příjemci přes HTTP, jakmile konverzace obsahuje všechny povinné informace. Základní webový chatbot je použitelný i bez tohoto rozšíření.

Důležitý je rozdíl mezi tím, že byl zachycen kontakt, a tím, že je poptávka úplná. Quickchat AI nastaví lead_captured, když nově zachytí standardní kontaktní pole včetně jména. Samotný příznak nedokládá přítomnost e-mailu, PSČ ani typu projektu.

Vývojový diagram zachycených kontaktních údajů procházejících podmínkami povinných polí před jednorázovou akcí odeslání kontaktu Platforma kontroluje každou podmínku. Model shromažďuje informace; podmínky určují, kdy lze požadavek odeslat.

Připravte příjemce

Použijte endpoint CRM nebo automatizace, který spravujete a který přijímá níže uvedené tělo JSON. Sada obsahuje malý lokální demonstrační server pro čtenáře, kteří chtějí požadavek prohlédnout před připojením CRM. Jeho návod k nastavení vytváří soukromý token a vysvětluje zpřístupnění dočasného endpointu HTTPS. Demonstračnímu serveru posílejte pouze fiktivní testovací údaje.

Pokud chcete spravovanou integraci, postupujte podle návodu na reportování do Google Sheets nebo návodu na vlastní CRM. Nezapínejte dva postupy, které oba vytvářejí stejný kontakt.

Nastavte jednu automatickou API Action

  1. Otevřete Actions & MCPs → Custom Actions → Add Action → API Action. Pokud se otevře tvorba podle popisu, vyberte Create manually.
  2. Nastavte API Action Name na Send quote enquiry.
  3. What to ask the user first ponechte prázdné. Tato akce čte pole již uložená pomocí Smart Data Gathering; nežádá model o vyplnění druhé sady parametrů.
  4. V API Endpoint vyberte POST a zadejte HTTPS URL /enquiries svého příjemce.
  5. Přidejte níže uvedené hlavičky, tělo a podmínky, potom akci uložte a aktivujte.
Klíč hlavičky (Headers: Key)Hodnota
Content-Typeapplication/json
AuthorizationBearer YOUR_RECEIVER_TOKEN

Token zadávejte pouze do nastavení hlavičky akce. Neuvádějte jej v promptu, kódu webu ani konverzaci s návštěvníkem. README demonstračního serveru vysvětluje jeho vygenerování; pro skutečnou integraci použijte autentizaci popsanou v dokumentaci CRM.

Na kartě Body vyberte JSON a zadejte:

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

Pomocí Add AI Data vložte odpovídající vestavěné hodnoty a metadata. conversation_id identifikuje konverzaci. Ostatní hodnoty pocházejí z uložených polí; anglické názvy kontaktních polí se mapují na visitor_name a visitor_email, zatímco Project type se změní na project_type. Dokumentace proměnných tato mapování vysvětluje.

Nastavení API Endpoint s POST, ukázkovou URL příjemce, kartou Body a proměnnými uložených polí vloženými přes Add AI Data Skutečný editor se zástupnými údaji připojení. Nahoře zadejte vlastní endpoint, přihlašovací údaje do Headers a JSON do Body; barevné štítky označují dynamické hodnoty. Tento příklad ukazuje pouze konfiguraci a zůstal neaktivní.

V When to run vyberte When metadata matches. Do Run when přidejte všech pět řádků; podmínky metadat se spojují pomocí AND:

Klíč metadatPodmínka
lead_capturedis true
visitor_nameis true
visitor_emailis true
postcodeis true
project_typeis true

U těchto textových polí is true odmítá prázdné hodnoty i text představující nepravdivou hodnotu. exists pouze kontroluje přítomnost klíče; uložený prázdný řetězec může projít. Níže uvedené testy ukazují, proč je silnější podmínka důležitá. Ověřuje se tím, že byl poskytnut použitelný text, nikoli že byla nezávisle ověřena totožnost návštěvníka nebo údaje o nemovitosti.

Použijte tento 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.

Editor akce Send quote enquiry s podmínkami lead_captured a visitor_email nastavenými na is true První dvě z pěti uložených podmínek. Přidejte každý řádek tabulky; When metadata matches je kontroluje po tahu AI, aniž by Agent akci vybíral.

Akce se pokusí provést jednou za konverzaci, když odpovídají všechny podmínky. Nespustí se znovu po doplnění volitelného termínu a odeslaný požadavek, který skončí chybou, se v dané konverzaci automaticky neopakuje. Termín ponechte pro návrháře v Inboxu, nebo vytvořte integraci se samostatnými operacemi pro vytváření a aktualizaci, pokud CRM potřebuje i pozdější změny.

Požadavek se spustí po tahu AI a jeho odpověď se do chatu nevkládá. Proto Main Prompt potvrzuje přijetí údajů návštěvníka, aniž by tvrdil, že je přijalo CRM. Doručení ověřte v protokolu akce a u příjemce. Dokumentace automatických akcí popisuje toto chování při spuštění.

Otestujte částečné údaje a potom úplnou poptávku

První verze používala pro povinná textová pole exists. Sam poskytl jméno a v následující zprávě e-mail. Smart Data Gathering již vytvořil prázdné hodnoty PSČ a typu projektu, takže tyto klíče existovaly a akce odeslala neúplný požadavek. Tím také vyčerpala svůj jediný pokus pro danou konverzaci.

Oprava spočívala ve změně čtyř podmínek textových polí na is true, ostatní nastavení zůstalo stejné. Zopakujte test v nové konverzaci a ve druhém tahu poskytněte pouze e-mail. Akce má počkat na zbývající podrobnosti o projektu.

Stav testuKontakt zachycenPovinná pole připravenaPřijaté požadavky
Sam uvede jménoAnoNe0
Sam poskytne pouze e-mailAnoNe0
Sam poskytne PSČ a typ projektuAnoAno1
Sam přidá „next spring“AnoAno1

Jde o jednu pozorovanou konverzaci, nikoli o míru úspěšnosti v produkci. Zopakujte ji v nové konverzaci, po každém tahu prohlédněte uložená pole a ověřte požadavek na vlastním endpointu.

Volání akce Send quote enquiry zobrazující v Quickchat AI stav HTTP odpovědi 201 Skutečné volání akce vrátilo HTTP 201. Otevřete jeho podrobnosti a prohlédněte požadavek; uložený záznam níže ukazuje, co příjemce uchoval.

Exportovaný databázový záznam lokálního demonstračního serveru se jménem, e-mailem, PSČ a typem projektu návštěvníka Sam Jeden skutečně uložený záznam z autentizovaného demonstračního serveru. Jde o poptávku, nikoli o potvrzenou cenovou nabídku nebo rezervaci.

Ukázka používala lokálního příjemce a zachytila skutečné doručení přes HTTP. Hostovaný Agent Quickchat AI potřebuje veřejně dostupný endpoint HTTPS; URL localhost na vašem počítači není ze služby dostupná.

Pokud nic nedorazí, prohlédněte View logs u akce a uložená metadata konverzace. Chybějící hodnoty, vypnutá akce a selhání HTTP vyžadují odlišné opravy. Opravte konfiguraci a automatické spuštění znovu otestujte v nové konverzaci; žádost o opakování ve stejném chatu neobnoví pokus omezený na jedno provedení za konverzaci.

Proč chatbot chybí nebo zobrazuje staré nastavení?

Před změnou promptu zkontrolujte publikovanou stránku, umístění instalace a přístup k Agentovi. Problém s načítáním v prohlížeči je odlišný od problému s kvalitou odpovědí.

PříznakCo zkontrolovatCo udělat
Na veřejné stránce není tlačítko chatuUmístění kódu a stav publikaceVložte aktuální kód do sdílené patičky nebo na konec těla stránky, uložte a publikujte
Widget funguje jinde, ale ne v HTML blokuZda editor vytváří iframePro plovoucí Widget použijte kód pro celý web; pro vhodný kontejner v obsahu použijte podporovaný kód Embed
Zobrazuje se nesprávný AgentScenario ID a duplicitní instalaceZkopírujte ID zamýšleného Agenta a odstraňte zastaralý kód nebo duplicitní instalace pluginu
Tlačítko otevře chat, ale odpovědi selhávajíWidget & Embed access, kredity a síťové chyby prohlížečeZapněte zamýšlený veřejný kanál, zkontrolujte limit a prohlédněte neúspěšný požadavek
Barva nebo uvítání zůstává beze změnyKonfigurace v mezipaměti nebo HTML stránkyPočkejte několik minut, obnovte stránku a pokud stále poskytuje starý kód, vymažte příslušnou mezipaměť webu
Při testu nepřijde e-mail s kontaktemZdroj konverzace a Email new leadsPreview a Simulation e-maily potlačují; otestujte skutečnou konverzaci widgetu s vlastními kontrolovanými kontaktními údaji
Zdánlivě úplná poptávka nikdy nedorazí do CRMUložená pole, podmínky a protokol akceZkontrolujte každý povinný klíč a výsledek HTTP; po opravě neúspěšně odeslaného požadavku použijte novou konverzaci
Po změně motivu chybí tlačítko chatuZda nový motiv obsahuje instalaciZnovu zapněte vloženou aplikaci Shopify nebo obnovte kód v nové sdílené šabloně
Odpověď odporuje zdrojiImportovaný obsah a použité změny znalostíOpravte zdroj, dokončete zpracování a publikaci a zopakujte kontrolní otázku se známou odpovědí

Pokud prohlížeč hlásí zablokovaný prostředek, prohlédněte přesnou chybu Content Security Policy nebo blokátoru. Nevypínejte plošně ochranu webu. Veřejnou stránku testujte přes HTTPS a požadované nastavení ověřte v dokumentaci kanálu.

Kolik webový chatbot stojí?

Předplatné a limit použití hradí službu AI; tarif webu a volitelné integrace představují samostatné náklady.

PoužitíPříslušné podmínky tarifu
Osobní nekomerční učeníFree zahrnuje 50 AI kreditů měsíčně a základní funkce Widget, Smart Data Gathering, Human Handoff a Actions
Firemní webStarter umožňuje komerční použití a zahrnuje 150 kreditů měsíčně, od $9/měsíc
Vlastní překlady widgetu nebo hlasový vstupDostupné v placených tarifech
Skrytí brandingu (Hide Quickchat AI Branding)Professional nebo vyšší

AI kredit není konverzace. Konverzace může obsahovat několik odpovědí AI a různé volby modelu mohou mít různé kreditové náklady. Do rozpočtu na testování zahrňte Preview i Simulation. K odhadu objemu použijte aktuální ceny a limity a průvodce náklady na chatbota.

Mohou ChatGPT nebo Claude pomoci s nastavením chatbota?

Připojení pro správu účtu Quickchat AI umožňuje kompatibilnímu asistentovi nastavit podporované vlastnosti Agenta a připravit testy z těchto souborů.

Připojte vlastní účet prostřednictvím Quickchat AI v ChatGPT nebo Quickchat AI v Claude podle průvodce Manage with AI. Podporované nástroje pokrývají znalosti, Main Prompt, úvodní otázky, Human Handoff, HTTP Actions, testování a kód pro nasazení.

Smart Data Gathering a podrobné nastavení vzhledu widgetu v Appearance dokončete v panelu. Musíte také autorizovat externí účty a nainstalovat kód v nastavení webu. Připojení účtu slouží ke správě Agenta; je oddělené od zpřístupnění Agenta jako nástroje MCP.

Zkopírujte požadavek na nastavení pro svého asistenta
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.

Často kladené otázky

Jak přidám AI chatbota na svůj web?

Vytvořte Agenta v Quickchat AI, přidejte firemní znalosti, nastavte Main Prompt, Smart Data Gathering a Human Handoff a potom nainstalujte jeho Widget pomocí pluginu nebo dodaného kódu. Na publikovaném webu otestujte odpověď vycházející ze zdroje, zachycené kontaktní údaje a doručenou lidskou odpověď.

Mohu na svůj web přidat vlastní ChatGPT?

Můžete přidat asistenta ve stylu ChatGPT naučeného na vlastních stránkách. Tento návod nasazuje Agenta Quickchat AI prostřednictvím jeho webového widgetu, takže návštěvníci mohou chatovat na vašem webu bez přihlášení k ChatGPT. Jeho znalosti, pokyny a integrace se spravují v Quickchat AI.

Mohu na svůj web přidat AI chatbota zdarma?

Tarif Free v Quickchat AI podporuje osobní nekomerční učení a zahrnuje 50 AI kreditů měsíčně. Firemní web nebo nasazení pro prodej a podporu zákazníků potřebuje tarif umožňující komerční použití. Předplatné editorů webů se platí zvlášť a testování také spotřebovává AI kredity.

Musím programovat nebo poskytnout klíč API?

Základní konfigurace využívá volby v panelu a plugin, vloženou aplikaci nebo dodaný skript. Kód webu obsahuje veřejné Scenario ID, nikoli soukromý klíč API. Připojení volitelné akce pro CRM vyžaduje vhodný endpoint a jeho autentizaci; přihlašovací údaj uchovávejte v nastavení akce.

Může webový chatbot shromažďovat kontakty a poptávky?

Ano. Smart Data Gathering se během konverzace ptá na vybraná pole a ukládá je do Inboxu. Email new leads může upozornit administrátory Agenta po zachycení e-mailové adresy nebo telefonního čísla. API Action může odeslat povinná uložená pole nastavenému příjemci; samotné zachycené jméno nedokládá úplnou poptávku.

Může chat převzít člověk?

Ano. Nastavte Human Handoff s pracovní dobou týmu a zprávou mimo pracovní dobu. V Inboxu vyberte Assign to me u nepřiřazené konverzace nebo Take over, pokud se tento prvek zobrazuje, a potom návštěvníkovi odpovězte. Reassign to AI vrátí konverzaci Agentovi.

Funguje to na WordPressu, Shopify, Squarespace, Wixu a Webflow?

Každá platforma má svůj způsob instalace. Použijte oficiální plugin WordPressu, vloženou aplikaci Shopify po připojení jejího Agenta pro obchod nebo příslušný kód do patičky či na konec těla všech stránek pro stávajícího Agenta. Oprávnění pro pluginy a tarifní požadavky na vlastní kód se podle editoru liší.

Proč se chatbot na mém webu nezobrazuje?

Zkontrolujte publikovanou stránku, správné Scenario ID a umístění kódu na konci těla stránky. Odstraňte zastaralé duplicitní instalace a pro plovoucí Widget nepoužívejte bloky založené na iframe. Pokud se otevře, ale neodpovídá, zkontrolujte Widget & Embed access a dostupné AI kredity.

Zpomalí chatbot můj web?

Zavaděč widgetu se stahuje asynchronně, ale stále přidává JavaScript a síťové požadavky. Porovnejte výkon načítání a interakcí před instalací a po ní na reprezentativních stránkách a na telefonu. Asynchronní načítání nedokládá nulový dopad na výkon.

Funguje webový chatbot na telefonech?

Otevřený widget používá pod šířkou 768 CSS pixelů celoobrazovkové rozložení. Na telefonu otestujte tlačítko pro otevření, klávesnici, posouvání a zavírací prvek. Auto-open Widget nechte vypnuté, pokud by automatické otevření přerušovalo prohlížení.

Může chatbot odpovídat v jazycích mých návštěvníků?

Agent může odpovídat v jazyce návštěvníka. Překlad pevného uvítacího textu, úvodních otázek a popisků widgetu je samostatné nastavení v placeném tarifu. U každého jazyka, který chcete podporovat, otestujte fakta v odpovědích i text rozhraní.

Quickchat AI Quickchat AI Ask Quickchat AI a question