AI-chatbot hozzáadása a webhelyedhez programozás nélkül

AI-chatbotot adhatsz a webhelyedhez, ha átadod egy Agentnek a vállalkozásod tudásanyagát, beállítod a válaszait, majd bővítménnyel vagy a mellékelt szkripttel telepítesz egy csevegőwidgetet. A Quickchat AI webhelyekhez készült chatbotja egy helyen kezeli a tudásanyagot, a beszélgetési beállításokat és a csapat Inboxát. A látogatók fiók létrehozása nélkül kérdezhetnek a webhelyeden.

Az útmutatóban a Kestrel Kitchens nevű kitalált konyhatervező vállalkozás chatbotját készítjük el. Egy látogató megkérdezi, mennyi ideig tart a felújítás, érdeklődik egy 3-szor 4 méteres konyha várható költségéről, majd árajánlatot kér. Az Agent a cég információi alapján válaszol, összegyűjti a projekt adatait, és lehetővé teszi, hogy egy tervező folytassa a beszélgetést.

Az alapbeállításhoz nem kell programozni. Kövesd a tudás és utasítások, az érdeklődők adatainak gyűjtése és az embernek történő átadás lépéseit, majd telepítsd a widgetet. Egy választható API Action továbbítja a hiánytalan érdeklődéseket egy másik rendszerbe.

Töltsd le a Kestrel Kitchens beállítási csomagot, amely a példawebhelyet, a tudásanyagot, a Main Promptot, a beállításokat és a tesztüzeneteket tartalmazza. Ezek szerkeszthető fájlok a kezelőfelületen végzett beállításhoz, nem egy kattintással importálható Agent. A képernyőképek és a másolható csomag-, prompt- és konfigurációs anyagok angolul maradnak, hogy a tesztelt példa reprodukálható legyen.

Mit fog csinálni a webhely chatbotja?

A chatbot a tartalmadból válaszol a kérdésekre, elmenti a kért kapcsolatfelvétel adatait, és a csapatodhoz irányítja a beszélgetést, ha emberre van szükség.

Ezekhez az eredményekhez eltérő bizonyíték kell. A helyes árkategória a Knowledge Base-ből származik. Az árajánlatkéréshez kapcsolatfelvételi és projektadatok kellenek az Inboxban. Az átadáshoz egy embernek át kell vennie a beszélgetést, és olyan választ kell küldenie, amely megérkezik a látogatóhoz.

A látogató útja a példában. Az árajánlatkérés az érdeklődést rögzíti; az árat és a rendelkezésre állást továbbra is a tervező erősíti meg.

Mire van szükség a chatbot hozzáadása előtt?

Quickchat AI-fiókra, ellenőrizhető üzleti információkra és a webhely bővítmény- vagy egyéni kódbeállításaihoz való hozzáférésre lesz szükséged.

1. Hozz létre Quickchat AI-fiókot, és végezd el a regisztráció lépéseit. Ehhez a gyakorlathoz használj külön Agentet, hogy a példa adatai ne befolyásolhassanak egy meglévő ügyfélszolgálatot.
2. Készítsd elő a szolgáltatási oldalaidat, a GYIK-et és a szabályzatokat, vagy használd a csomag kitalált tudásanyagát. Valódi vállalkozásnál történő bevezetés előtt cseréld le a kitalált árakat és szolgáltatási területet.
3. Ellenőrizd, hogy a webhelyed csomagja engedélyezi-e a megfelelő telepítési módot. A WordPresshez bővítmény-hozzáférés kell; egyes hosztolt webhelykészítők fizetős csomagot igényelnek az egész webhelyre érvényes egyéni kódhoz.
4. Gondoskodj arról, hogy valaki figyelje a teszt Inboxát, amikor kipróbálod az embernek történő átadást. A végső webhelyellenőrzéshez legyen kéznél asztali böngésző és telefon.

A Free személyes, nem kereskedelmi tanulásra való. A Free csomag havi 50 AI-kreditet tartalmaz. Üzleti bevezetéshez kereskedelmi csomag kell, a tesztelés pedig ugyanazt a válaszkeretet használja, mint a többi AI-beszélgetés. A webhelykészítő előfizetése és a külső API-k költsége külön tétel. A költségekről szóló rész megkülönbözteti ezeket.

1. lépés: Hogyan tanítod be a chatbotot a webhelyed tartalmával?

Add hozzá a vállalkozás válaszait tartalmazó oldalakat a Knowledge Base-hez, majd tesztelés előtt ellenőrizd az importált tartalmat. Ezzel referenciaanyagot adsz az Agentnek a válaszaihoz.

Hozd létre a tanuláshoz használt Agentet

1. Az első beállítási képernyőn válaszd a Set up manually lehetőséget. Meglévő kezelőfelületről az AI Agent melletti + jellel (Add new AI Agent) hozz létre külön Agentet, majd válaszd a Set up manually lehetőséget.
2. Az Identity alatt a Name your AI Agent mezőbe írd be: Kestrel Kitchens. A csomag main-prompt.txt fájlját másold a Describe what you want your agent to do mezőbe. Ez lesz az Agent Main Prompt értéke, amelyet a 2. lépés ismertet. Válaszd a Next lehetőséget.
3. Egyelőre hagyd üresen a Knowledge Base részt, és válaszd a Next lehetőséget. Az External apps részen kapcsolat kiválasztása nélkül haladj tovább. A Deployment alatt válaszd a Chat widget, majd a Next lehetőséget.
4. A Choose your plan képernyőn a Skip for now lehetőséggel folytasd a személyes tanulási gyakorlatot, vagy üzleti használathoz válassz megfelelő kereskedelmi csomagot. Az utána megjelenő választható ajánlatot fogadd el vagy zárd be.
5. A kezelőfelületen ellenőrizd az Agent nevét az Identity alatt, majd nyisd meg a Knowledge Base részt. Válaszd a saját oldalaidat vagy az alább megadott példacikket.

Importáld a saját oldalaidat

1. A Knowledge Base alatt válaszd az Add Website lehetőséget. Válassz egyetlen oldalt vagy webhelyimportálást attól függően, mennyi tartalomra van szükséged.
2. Add meg a nyilvános URL-t. Webhelyimportáláskor nézd át a felismert oldalakat, és válaszd ki a válaszokhoz szükséges szolgáltatási, árazási, folyamatleíró és GYIK-oldalakat.
3. Vizsgáld meg az importált szöveget. Ellenőrizd az árak pénznemét és adókezelését, valamint azt, hogy régi akciók vagy nem kapcsolódó oldalak nem kerültek-e a források közé.
4. Várd meg a feldolgozás végét. A telepített widget tesztelése előtt alkalmazd vagy tedd közzé a kezelőfelületen jelzett függőben lévő tudásmódosításokat.

Kezdd néhány egyértelmű oldallal. Egy webhely látványos árkártyát mutathat, miközben a feltételeket máshol közli; az Agentnek mindkettőre szüksége van. Pusztán a kezdőlap importálásából kimaradhatnak a kivitelezési feltételek, a földrajzi korlátok vagy a visszatérítési szabályzat, amelyek használhatóvá teszik a választ.

Használd a Kestrel Kitchens forrását

Ha a példát webhely üzemeltetése nélkül szeretnéd reprodukálni, add hozzá közvetlenül a tényeket:

1. A Knowledge Base alatt válaszd az Add Article lehetőséget. Ez létrehoz egy Untitled cikket, és megnyitja az Edit Article nézetet.
2. A Title mezőbe írd be: Kestrel Kitchens: services, prices and process. A Content alatt válaszd a Plain Text lehetőséget, és másold be a csomag knowledge.txt fájlját.
3. Válaszd a Save lehetőséget, és várd meg, amíg a cikk Ready állapotú lesz. Ellenőrizd, hogy a címe megjelenik a Knowledge Base listájában.

A mentett cikk megőrzi az árakhoz és időtartamokhoz tartozó feltételeket. Kitalált adatai megegyeznek a példawebhelyével.

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.

A forrás szándékosan nem tér ki a finanszírozásra. Így tesztelheted, hogyan kezeli az Agent a valódi információhiányt. Valódi webhely esetén tartsd naprakészen a forrásoldalakat, és ahol elérhetők, használd a támogatott frissítési beállításokat; a Knowledge Base útmutatója ismerteti a források rendszerezését és tesztelését.

2. lépés: Mit mondjon a chatbot, és mit ne ígérjen soha?

A Main Prompt határozza meg, hogyan alkalmazza az Agent a tudásanyagot: először válaszoljon, adjon hasznos választ, és az olyan döntéseket, mint a végleges árajánlat, hagyja a csapatra.

A Kestrel esetében a helyiség méretei a projekt nagyságrendjét mutatják. Nem határozzák meg a szekrényeket, a gépeket vagy az építési munkákat. Az Agentnek a forrásban szereplő, áfával együtt értendő £18,000 és £45,000 közötti tájékoztató jellegű költségkeretet kell ismertetnie anélkül, hogy az alapterületből pontosabb árat számolna.

Ezek kitalált oktatási árak. A cél a forrásban szereplő tények és a csapat által még meghozandó döntés közötti különbség megőrzése.

1. Az Identity alatt válaszd az Edit lehetőséget a Main Prompt kártyán.
2. Másold be az alábbi teljes promptot. Várd meg a mentést, majd nyisd meg újra a szerkesztőt a tárolt szöveg ellenőrzéséhez.
3. Az üzleti tényeket a Knowledge Base-ben tartsd. A promptban a válaszstílust, az adatgyűjtési viselkedést és az emberi döntést igénylő eseteket határozd meg.

A Main Prompt az utasításmező. A másolható változat az alábbi teljes szövegben és a csomagban található.

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.

Nyisd meg az AI Preview nézetet, és kérdezd meg: How long does a full kitchen renovation take?. A helyi kontrolltesztben az Agent 2 és 3 hét közötti időt adott meg a felmérésre és tervezésre, majd 4 és 8 hét közötti időt a kivitelezésre, miután az anyagok rendelkezésre állnak. Az időtartam és a feltétel egyaránt számít.

Kezdj új beszélgetést, és kérdezd meg: Do you offer financing?. A helyes válasz jelzi, hogy a forrás nem támaszt alá ilyen ajánlatot, és tervezőhöz irányítja a kérdést. A prompt határozottabb megfogalmazása nem pótolná a hiányzó üzleti tényt.

3. lépés: Hogyan gyűjtesz árajánlatkéréseket a csevegésben?

A Smart Data Gathering a beszélgetés során bekéri a kiválasztott információkat, és elmenti a látogató által megadott adatokat. Árajánlatkéréshez csak azt gyűjtsd össze, amire a tervezőnek szüksége van a kapcsolatfelvételhez.

1. Nyisd meg az Actions & MCPs részt, engedélyezd a Smart Data Gathering funkciót, és válaszd az Edit Action lehetőséget. A Name értéke legyen Quote enquiries, a Description értéke pedig Capture contact and project details for a kitchen design enquiry. A mentett név lesz a kártya címe.
2. A Data to collect alatt add hozzá az alábbi sorokat. A példa reprodukálásakor tartsd meg ezeket az angol Data point neveket; a kapcsolati mezők nevei speciális megfeleltetéssel kapcsolódnak az Inbox látogatói mezőihez.
3. A Reason for collecting information értéke legyen So a Kestrel Kitchens designer can assess your project and follow up by email.
4. A When to ask for data értéke legyen After exchanging a few messages, a How to ask for data értéke pedig Subtle.
5. Mentsd az Actiont. Az AI Preview nézetben tegyél fel egy hasznos szolgáltatási kérdést az árajánlatkérés előtt, majd ellenőrizd a mentett adatokat az Inbox nézetben.

A kérdések a gyűjtendő információt írják le. Az időzítési és stílusbeállítások irányítják, mikor kérdezzen az Agent; a tényleges beszélgetést is teszteld.

A név, e-mail-cím, irányítószám és projekttípus a példában a hiánytalan érdeklődéshez szükséges adat. Az időzítés megadása választható, ahogy a Main Prompt is leírja. Ez az üzleti követelmény különbözik a beszélgetéses adatgyűjtés beállításaitól; a 8. lépés kikényszeríti a szükséges mezők meglétét a CRM-kérés elküldése előtt.

Az Agentnek úgy kell megválaszolnia egy általános költségkérdést, hogy ne szabja a válasz feltételéül az e-mail-cím megadását. A látogató az adatgyűjtést is visszautasíthatja. Az I am only researching. I do not want to leave contact details. üzenettel ellenőrizd, hogy a beszélgetés ismételt adatbekérés nélkül is hasznos marad-e.

Hová kerülnek az összegyűjtött adatok?

Nyisd meg a beszélgetést az Inbox nézetben. A szokásos kapcsolati adatok a látogatói mezőkben jelennek meg; a többi gyűjtött érték a beszélgetéshez kapcsolódik, és az Export Gathered Data funkcióval exportálható.

A Where to send data alatt az Email new leads értesíti az Agent minden adminisztrátorát, amikor először rögzít e-mail-címet vagy telefonszámot. Egy név önmagában nem indít e-mailt. A Preview és a Simulation nem küldi el ezeket az értesítéseket, ezért az e-mail-kézbesítésre való támaszkodás előtt ellenőrizd saját adminisztrátori postaládádat a telepített widgeten végzett kontrollált teszttel. A helyi bemutatóban a külső e-mail-küldés letiltva marad.

A Smart Data Gathering dokumentációja ismerteti az adatgyűjtést, az értesítéseket és az exportálást. Saját webhelyeden magyarázd el az adatbekérés okát, és helyezd el az adatvédelmi tájékoztató hivatkozását a widgetben. A chatbotok adatvédelmi útmutatója segít áttekinteni a teljesebb adatfolyamot.

4. lépés: Hogyan veheti át egy ember a csevegést?

A Human Handoff átadja a beszélgetést a csapatodnak; egy ember ezután az Inbox nézetben átveszi azt, és ugyanannak a látogatónak válaszol.

Az átadást még a widget közzététele előtt készítsd elő. A tervezőt kérő látogatónak ne kelljen előbb kitöltenie az árajánlatkérés összes adatát, és az Agent ne sugallja, hogy valaki elérhető a csapat munkaidején kívül.

1. Az Actions & MCPs alatt engedélyezd a Human Handoff funkciót, és nyisd meg az Edit Action lehetőséget.
2. Hagyd bekapcsolva a szokásos Media Message, User Frustration, Customer Support Suggestion és Lack Of Knowledge szabályokat; az Irrelevant Advice maradjon kikapcsolva. A Main Prompt már leírja, mikor ajánljon fel tervezőt. A tesztelt példa ezeket az alapértelmezett szabályokat használja egyéni szabályok hozzáadása nélkül.
3. Állítsd be az alábbi üzeneteket és elérhetőséget, majd ments. A tanulási gyakorlatban hagyd kikapcsolva az Email notifications beállítást, és az átadást közvetlenül az Inboxban ellenőrizd.

Olyan órákat adj meg, amikor valaki ténylegesen figyeli az Inboxot. A kitalált időbeosztás nem jelent azonnali válaszígéretet.

A csapat munkaidejében kérdezd meg a webhelyen: Can I speak to a designer?. Végezd el az Agent által kért átadási megerősítést. Az Inboxban nyisd meg a beszélgetést, és ha nincs hozzárendelve senkihez, válaszd az Assign to me lehetőséget, vagy a Take over vezérlőt, amikor az jelenik meg. Küldj emberi választ, és ellenőrizd, hogy a látogató megkapja. A Reassign to AI lehetőséget akkor használd, amikor az AI-nak kell folytatnia.

Ellenőrizd a felelőst és a kézbesített emberi választ is, ne csak az Agent átadási ajánlatát.

Ismételd meg új beszélgetésben a beállított munkaidőn kívül. Az Agentnek ismertetnie kell az elérhetőséget, és fel kell ajánlania a megadott kapcsolatfelvételi módot. Ha ehhez az ellenőrzéshez ideiglenesen módosítod az időbeosztást, utána állítsd vissza a valódit. A Human Handoff dokumentációja ismerteti a beállításokat és az Inboxban végzett folyamatot.

A chatbot beszélgetéseinek emberhez átadásáról szóló útmutató külön ellenőrzésekkel mutatja be, ki felel a beszélgetésért, hogyan kerül vissza az AI-hoz, és mi történik a munkaidőn kívüli hibáknál.

5. lépés: Hogyan igazítod a widgetet a webhelyedhez?

A megjelenést és a rögzített szöveget a Channels → Your Website alatt állítsd be. Az üdvözlőüzenet legyen elég konkrét ahhoz, hogy a látogató tudja, miről kérdezhet.

Megjelenés

1. Nyisd meg az Appearance fület. A Kestrelhez válassz Custom témát fehér háttérrel, sötétzöld fejléccel és kiemelőszínnel (#315448), valamint fehér fejlécszöveggel. Hagyd meg az alapértelmezett szövegméretet és a lekerekített vezérlőket.
2. A Branding → AI Agent Avatar alatt kattints az avatar feltöltési ikonjára, válaszd ki a csomag website/kestrel-avatar.png fájlját, majd a kivágási párbeszédablakban válaszd az Upload lehetőséget.
3. A Widget window max width értéke legyen 400px, a Widget window max height értéke pedig 520px. Az indítógomb méretéhez válaszd a Small értéket, helyezd jobbra, és feliratként használd az Ask about your kitchen szöveget. A felirat a kis indítógombnál érhető el. Az előnézetben ellenőrizd az elhelyezést a webhely sütisávjához vagy egyéb lebegő vezérlőihez képest.
4. Hagyd kikapcsolva az Auto-open Widget beállítást. A widget minden oldalbetöltéskor történő megnyitása megzavarja a böngészést, különösen telefonon.

A színek kiválasztása közben ellenőrizd az előnézetet. Az élő webhely tesztelése is számít, mert az indítógomb a webhely vezérlőivel osztozik a helyen.

Szöveges tartalom

Nyisd meg a Text Content fület, és használd ezeket az értékeket:

A beszélgetésindítók hasznos feladatokat indítsanak. A felelősségkizáró szöveg jelzi a látogatóknak, mely döntésekhez kell még tervező.

Az Agent a látogató nyelvén is válaszolhat. A rögzített üdvözlőüzenet és widgetfeliratok fordítása külön beállítás az Other languages alatt, fizetős csomagokban. Többnyelvű webhely esetén a választ és a rögzített felületszöveget is teszteld; a többnyelvű chatbotok útmutatója ismerteti ezt a különbséget.

A megjelenés módosításai néhány perc alatt juthatnak el a látogatók gyorsítótárazott munkameneteihez. Töltsd újra az oldalt, mielőtt sikertelennek ítélnéd a mentett módosítást. A Hide Quickchat AI Branding Professional vagy magasabb csomagot igényel; a saját márkás megjelenés útmutatója bemutatja a többi ellenőrizendő felületet.

6. lépés: Hogyan telepíted a chatbotot a webhelyedre?

Telepítsd a Widget kódját a webhely közös elrendezésébe, vagy használd a támogatott platformintegrációt. A lebegő Widgetnek azon az oldalon kell futnia, amelyet a látogató böngész.

1. Nyisd meg a Channels → Your Website → Install részt.
2. Engedélyezd a Widget & Embed access beállítást a nyilvános widgethez.
3. Válaszd ki a webhelyedhez megfelelő telepítési módot, és másold ki az ehhez az Agenthez megjelenített kódrészletet vagy Scenario ID-t.
4. Tedd közzé a módosítást, nyisd meg a nyilvános webhelyet, és tegyél fel olyan kérdést, amelynek válasza biztosan szerepel a Knowledge Base-ben.

Ennek az Agentnek az Install képernyőjéről másolj. A Scenario ID nyilvános widgetazonosító, nem privát API-kulcs.

Bármely webhely: illeszd a Widget kódrészletét a záró body címke elé

Válaszd az Install manually with code lehetőséget, és másold ki a Widget kódrészletét. A jelenlegi betöltő ilyen felépítésű:

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

Cseréld le a YOUR_SCENARIO_ID értékét az Install alatt található értékre. A teljes kódrészletet egyszer, közvetlenül a </body> elé illeszd a közös elrendezésbe, vagy használd a webhelykészítő egész webhelyre érvényes láblécmezőjét. Ez a betöltő a lap törzsébe illeszt egy szkriptet, ezért ha a head részbe kerül, mielőtt a body létezne, előfordulhat, hogy nem töltődik be.

Az elhelyezés számít. Az iframe-alapú HTML-blokk külön oldal, ezért nem alkalmas ehhez a lebegő Widgethez.

A külön Embed lehetőség egy oldal konténerén belül helyez el csevegést. Ha az oldalba ágyazott csevegési részt szeretnél, használd az általa generált kódrészletet. A kódot közvetlenül az oldalba illesztő HTML-blokk támogathatja ezt a megoldást; az iframe-be elkülönített kódot használó webhelykészítő-blokk más eset. Lásd a webhelycsatorna dokumentációját.

WordPress: telepítsd a hivatalos bővítményt

1. A WordPressben nyisd meg a Plugins → Add New részt, keress rá a Quickchat AI Agent bővítményre, majd válaszd az Install Now és az Activate lehetőséget.
2. Nyisd meg a Settings → Quickchat AI Agent részt.
3. Illeszd be a Quickchat AI Install képernyőjéről származó Scenario ID értéket, és válaszd a Save Changes lehetőséget.
4. Nyiss meg egy nyilvános oldalt, és ellenőrizd a widgetet. Vagy a bővítményt, vagy a kézi kódrészletet használd, hogy a betöltő ne legyen kétszer telepítve.

Olyan WordPress-telepítés és csomag kell, amely engedélyezi a bővítményeket. A WordPress-chatbot útmutatója bemutatja a bővítmény felületét és a WordPress-specifikus ellenőrzéseket.

Squarespace: használd a lábléc kódbeszúrását (Footer Code Injection)

1. Nyisd meg a webhely Code Injection paneljét. Ha a fiókodban eltér a navigáció, használd a kezelőfelület beállításkeresőjét.
2. Illeszd be a teljes Widget-kódrészletet a Footer mezőbe, és ments.
3. Nyisd meg a közzétett oldalt külön böngészőfülön, és tesztelj egy választ.

A Squarespace a Core, Plus, Advanced és egyes korábbi csomagokban biztosít Code Injection funkciót. A láblécbe történő beszúrás a teljes webhelyen a </body> elé helyezi a kódot. A lebegő widgethez ezt a felületet használd; az oldalszintű iframe-blokk nem egyenértékű vele. Ez az egyéni kód nem terjed ki a Squarespace pénztároldalaira.

Wix: használd az egyéni kódot a body végén (Body - end)

1. A webhely kezelőfelületén nyisd meg a Settings → Custom Code részt, majd válaszd a + Add Custom Code lehetőséget.
2. Illeszd be a Widget-kódrészletet, és nevezd el Quickchat AI widget néven.
3. Alkalmazd az All pages beállítással, válaszd a Body - end, majd az Apply lehetőséget.
4. Teszteld a közzétett webhelyet, beleértve a másik oldalra navigálást is.

A Wix egyéni kódjához közzétett, csatlakoztatott domainnel rendelkező webhely kell. Ehhez a lebegő widgethez az egész webhelyre érvényes Custom Code beállítást használd.

Webflow: használd a lábléckódot, és tedd közzé

1. Nyisd meg a Site settings → Custom code részt.
2. Illeszd be a Widget-kódrészletet a Footer code mezőbe, és válaszd a Save changes lehetőséget.
3. A Publish lehetőséggel tedd közzé a kívánt domainen, majd teszteld a közzétett URL-t.

A Webflow egyéni kódbeállításaihoz megfelelő fizetős Workspace vagy aktív Site csomag kell. A beállítás mentése önmagában nem teszi közzé a kódot.

Shopify: válaszd a meglévő Agent kódrészletét vagy a Shopify-alkalmazást

A már elkészített Kestrel Agent Widget-kódrészletét közvetlenül a </body> elé add hozzá az Online Store → Themes → Edit code → layout/theme.liquid alatt, majd ments, és ellenőrizd a webáruházat. Szerkesztés előtt készíts biztonsági másolatot a témáról, témaváltás után pedig ellenőrizd újra a telepítést. Ez az útvonal a kiválasztott Agentet jeleníti meg; nem állít be termék- vagy rendelési Actionöket.

Webáruházra összpontosító Agent esetén a Quickchat AI Shopify-alkalmazás beállítása saját bevezetési folyamatán keresztül csatlakoztatja az áruházat. A csatlakozás után használd az Enable Widget in Shopify Theme Editor lehetőséget, vagy nyisd meg az Online Store → Themes → Edit theme → App embeds részt. Engedélyezd a Quickchat AI Widget elemet, és ments. A Shopify alkalmazásbeágyazási dokumentációja ismerteti a téma vezérlőit; a közzétett téma cseréjekor engedélyezd újra az alkalmazásbeágyazást.

A fenti webhelykészítő-útvonalakat a hivatalos dokumentáció alapján ellenőriztük. A bemutató képernyőképei a Kestrel példawebhelyét és a valódi helyi widgetet mutatják; nem minden webhelykészítőbe bejelentkezett fiókról készült képernyőképek.

Az Agent hibakeresése előtt ellenőrizd a kódrészletet

Ezek a választható ellenőrzések a megadott értékeiddel dolgoznak:

• Widget-kódrészlet ellenőrzése. Ellenőrizd a beillesztett kódot a megadott Scenario ID alapján. Ez nem kéri le a webhelyedet.
• Telepítési módok összehasonlítása. Ellenőrizd a megadott csatornákat, webhely-hozzáférést és szükséges funkciókat a Quickchat AI beállítási lehetőségeihez képest. Ez nem vizsgálja meg a webhelyedet vagy a fiókodat.

Kompatibilis böngészőben ezek az ellenőrzések webhelyeszközként is elérhetők. A hivatkozások a szokásos űrlapokat nyitják meg.

7. lépés: Hogyan teszteled a chatbotot a látogatók előtt?

A választ, a tárolt adatokat és a kézbesített választ külön teszteld. Az AI Preview és a Simulation Testing a viselkedés értékelésében segít; a közzétett webhely bizonyítja, hogy a látogató tudja használni a telepített widgetet.

Futtass független kérdéseket a Simulation Testing alatt

Nyisd meg a Testing → Create Dataset részt, nevezd el Kestrel Kitchens: website launch checks néven, és válaszd a Paste messages lehetőséget. Add hozzá az alábbi időtartam-, ár- és finanszírozási kérdéseket, a kérdések közé egy --- tartalmú sort helyezve. Egy egyszerű sortörés egy tesztüzenetben tartja a szöveget. Az Evaluation criteria alatt a tények és a tömör válaszok ellenőrzését add meg, majd válaszd a Run → Start Run lehetőséget. A csomag tartalmazza a pontos üzeneteket és értékelési feltételeket.

Az adatkészlet minden sora külön beszélgetést indít. A Simulationt ezekhez a független kérdésekhez használd; a többfordulós árajánlatkérési és emberi átvételi ellenőrzéseket egyetlen AI Preview- vagy webhelyes beszélgetésben futtasd. Az Action naplóját és a fogadó rendszert külön ellenőrizd, mert a beszélgetést értékelő eszköz nem tudja igazolni a külső kézbesítést.

Nyiss meg egy befejezett futtatást, és vizsgáld meg a válaszait. Ez az árválasz megőrzi a tervezési árkategóriát; a válasz pontszáma nem igazolja a másik rendszerbe történő kézbesítést.

A független esetek között használj új beszélgetést. Az oldal újratöltése folytathat egy meglévő beszélgetést, ezért friss teszthez használd a widget új csevegést indító vezérlőjét.

Ellenőrizd a webhelyet telefonon

768 CSS-pixel alatti képernyőn a nyitott widget teljes képernyős elrendezést használ. Ellenőrizd, hogy meg tudod-e nyitni, tudsz-e gépelni a látható billentyűzet mellett, görgetni a beszélgetést, és bezárni a widgetet a webhelyre való visszatéréshez.

Zárásként egy valódi ember válaszoljon az Inboxból. A jó AI-válasz nem bizonyítja az emberi ügyfélszolgálati útvonal működését. A források, promptok, Actionök vagy a webhelytémák módosítása után ismételd meg ezeknek az ellenőrzéseknek egy kisebb részét.

8. lépés: Hogyan továbbítasz hiánytalan érdeklődést a CRM-edbe?

Egy választható API Action elküldheti a mentett mezőket egy HTTP-fogadónak, miután a beszélgetésben minden szükséges információ rendelkezésre áll. Az alap webhelychatbot e bővítés nélkül is használható.

Fontos különbség, hogy egy kapcsolati adat rögzítve lett, vagy ez az érdeklődés hiánytalan. A Quickchat AI akkor állítja be a lead_captured jelzőt, amikor újonnan rögzít egy szokásos kapcsolati mezőt, akár egy nevet. A jelző önmagában nem igazolja, hogy e-mail-cím, irányítószám vagy projekttípus is rendelkezésre áll.

A platform minden feltételt ellenőriz. A modell összegyűjti az információt; a feltételek határozzák meg, mikor válik jogosulttá a kérés a végrehajtásra.

Készítsd elő a fogadó rendszert

Használj általad felügyelt CRM- vagy automatizálási végpontot, amely elfogadja az alábbi JSON-törzset. A csomag egy kis helyi bemutató fogadót is tartalmaz azoknak, akik a CRM bekötése előtt meg szeretnék vizsgálni a kérést. Beállítási útmutatója privát tokent hoz létre, és elmagyarázza egy ideiglenes HTTPS-végpont elérhetővé tételét. A bemutató fogadónak csak kitalált tesztadatokat küldj.

Felügyelt integrációhoz inkább kövesd a Google Sheets-jelentéskészítési útmutatót vagy az egyéni CRM bekötésének útmutatóját. Ne kapcsolj be két olyan munkafolyamatot, amely ugyanazt az érdeklődőt hozza létre.

Állíts be egy automatikus API Actiont

1. Nyisd meg az Actions & MCPs → Custom Actions → Add Action → API Action útvonalat. Ha a leírásalapú készítő nyílik meg, válaszd a Create manually lehetőséget.
2. Az API Action Name értéke legyen Send quote enquiry.
3. Hagyd üresen a What to ask the user first mezőt. Ez az Action a Smart Data Gathering által már mentett mezőket olvassa; nem kér a modelltől második paraméterkészletet.
4. Az API Endpoint alatt válaszd a POST metódust, és add meg a fogadó HTTPS /enquiries URL-jét.
5. Add hozzá az alábbi fejléceket, törzset és feltételeket, majd mentsd és aktiváld az Actiont.

A tokent csak az Action fejlécbeállításában add meg. Ne kerüljön a promptba, a webhely kódrészletébe vagy a látogatóval folytatott beszélgetésbe. A bemutató fogadó README-fájlja ismerteti az előállítását; valódi integrációhoz a CRM dokumentált hitelesítését használd.

A Body fülön válaszd a JSON formátumot, és add meg:

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

Az Add AI Data segítségével illeszd be a megfelelő beépített és metaadatértékeket. A conversation_id a beszélgetést azonosítja. A többi érték a mentett mezőkből származik; az angol kapcsolati mezőnevek a visitor_name és visitor_email kulcsnak felelnek meg, míg a Project type értékből project_type lesz. A változók dokumentációja ismerteti ezeket a megfeleltetéseket.

A When to run alatt válaszd a When metadata matches lehetőséget. A Run when alatt add hozzá mind az öt sort; a metaadatfeltételek AND kapcsolattal egyesülnek:

Ezeknél a szövegmezőknél az is true elutasítja az üres értékeket és a hamisnak megfelelő szöveget is. Az exists csak a kulcs jelenlétét ellenőrzi; egy mentett üres karakterlánc átmehet rajta. Az alábbi tesztek megmutatják, miért számít az erősebb feltétel. Ez azt ellenőrzi, hogy használható szöveg érkezett-e, nem pedig a látogató személyazonosságának vagy ingatlanadatainak független ellenőrzését végzi.

Használd ezt az API Action Description szöveget:

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.

Az öt mentett feltétel közül az első kettő. A táblázat minden sorát add hozzá; a When metadata matches egy AI-forduló után ellenőrzi őket anélkül, hogy az Agent választaná ki az Actiont.

Az Action beszélgetésenként egyszer kísérli meg a végrehajtást, amikor minden feltétel teljesül. Nem fut újra, ha megérkezik a választható időzítés, és egy sikertelenül elküldött kérést nem próbál újra automatikusan az adott beszélgetésben. Az időzítést tartsd az Inboxban a tervező számára, vagy készíts kifejezett létrehozási és frissítési integrációt, ha a CRM-ednek későbbi módosításokra is szüksége van.

A kérés az AI-forduló után fut, és a válasza nem kerül a csevegésbe. Ezért a Main Prompt visszajelzi a látogató adatait anélkül, hogy azt állítaná, hogy a CRM elfogadta őket. A kézbesítést az Action naplójában és a fogadónál ellenőrizd. Az automatikus Action dokumentációja ismerteti ezt a végrehajtási viselkedést.

Tesztelj részleges adatokat, majd hiánytalan érdeklődést

Az első változat exists feltételt használt a kötelező szövegmezőkhöz. Sam megadott egy nevet, majd a következő üzenetben egy e-mail-címet. A Smart Data Gathering már létrehozott üres irányítószám- és projekttípus-értékeket, ezért ezek a kulcsok léteztek, és az Action hiányos kérést küldött. Ezzel a beszélgetés egyetlen kísérletét is elhasználta.

A javítás a négy szövegmező feltételének is true értékre módosítása volt, a többi beállítás változatlanul hagyásával. Ismételd meg a tesztet friss beszélgetésben úgy, hogy a második fordulóban csak e-mail-címet adsz meg. Az Actionnek várnia kell a többi projektadatra.

Ez egy megfigyelt beszélgetés, nem éles sikerarány. Reprodukálásához kezdj új beszélgetést, minden forduló után vizsgáld meg a mentett mezőket, és ellenőrizd a kérést a saját végpontodon.

A tényleges Action-hívás HTTP 201 választ adott. Nyisd meg a részleteit a kérés ellenőrzéséhez; az alábbi mentett rekord mutatja, mit tárolt a fogadó.

Egy ténylegesen mentett rekord a hitelesített bemutató fogadóból. Ez érdeklődés, nem megerősített árajánlat vagy foglalás.

A bemutató helyi fogadót használt, és tényleges HTTP-kézbesítést rögzített. A hosztolt Quickchat AI Agentnek nyilvánosan elérhető HTTPS-végpont kell; a számítógépeden lévő localhost URL nem érhető el a szolgáltatásból.

Ha semmi nem érkezik meg, vizsgáld meg az Action View logs nézetét és a beszélgetés mentett metaadatait. A hiányzó értékek, a letiltott Action és a HTTP-hiba eltérő javítást igényel. Javítsd a konfigurációt, és friss beszélgetésben teszteld újra az automatikus indítást; ha ugyanazt a csevegést kéred újrapróbálásra, az nem állítja vissza a beszélgetésenként egyszeri kísérletet.

Miért hiányzik a chatbot, vagy miért mutat régi beállításokat?

A prompt módosítása előtt ellenőrizd a közzétett oldalt, a telepítés helyét és az Agent hozzáférését. A böngészős betöltési probléma különbözik a válaszminőségi problémától.

Ha a böngésző blokkolt erőforrást jelez, vizsgáld meg a pontos Content Security Policy- vagy blokkolóhibát. Ne kapcsold ki általánosan a webhely védelmét. HTTPS-en teszteld a nyilvános oldalt, és a szükséges beállításhoz használd a csatorna dokumentációját.

Mennyibe kerül egy webhelychatbot?

Az előfizetés és a használati keret az AI-szolgáltatást fedezi; a webhelycsomagod és a választható integrációk külön költségek.

Egy AI-kredit nem egy beszélgetés. Egy beszélgetés több AI-választ tartalmazhat, és a különböző modellválasztások kreditköltsége eltérhet. A tesztelési keretbe a Preview és a Simulation használatát is számold bele. A várható mennyiség becsléséhez használd az aktuális árakat és kereteket, valamint a chatbotköltségek útmutatóját.

Segíthet a ChatGPT vagy a Claude a chatbot beállításában?

A Quickchat AI fiókkezelési kapcsolata lehetővé teszi, hogy egy kompatibilis asszisztens konfigurálja a támogatott Agent-beállításokat, és ezekből az anyagokból teszteket készítsen elő.

Csatlakoztasd a saját fiókodat a Quickchat AI ChatGPT-kapcsolatán vagy a Quickchat AI Claude-kapcsolatán keresztül, az AI-val történő kezelés útmutatóját követve. A támogatott eszközök lefedik a tudásanyagot, a Main Promptot, a beszélgetésindítókat, a Human Handoffot, a HTTP Actionöket, a tesztelést és a telepítési kódrészletet.

A Smart Data Gathering és a widget részletes Appearance beállításait a kezelőfelületen fejezd be. A külső fiókokat is engedélyezned kell, és a kódrészletet a webhely beállításaiban kell telepítened. A fiókkapcsolat az Agent kezelésére szolgál; különbözik az Agent MCP-eszközként történő elérhetővé tételétől.

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.

Gyakran ismételt kérdések

Hogyan adhatok AI-chatbotot a webhelyemhez?

Hozz létre Agentet a Quickchat AI-ban, add hozzá a vállalkozásod tudásanyagát, állítsd be a Main Prompt, Smart Data Gathering és Human Handoff funkciókat, majd telepítsd a Widgetet bővítménnyel vagy a mellékelt kódrészlettel. A közzétett webhelyen tesztelj egy forrásalapú választ, a kapcsolati adatok rögzítését és egy kézbesített emberi választ.

Hozzáadhatok egyéni ChatGPT-t a webhelyemhez?

Hozzáadhatsz a saját oldalaidon betanított, ChatGPT-jellegű asszisztenst. Ez az útmutató egy Quickchat AI Agentet telepít a webhelywidgetjén keresztül, így a látogatók ChatGPT-bejelentkezés nélkül cseveghetnek a webhelyeden. A tudásanyaga, utasításai és integrációi a Quickchat AI-ban kezelhetők.

Ingyen is adhatok AI-chatbotot a webhelyemhez?

A Quickchat AI Free csomagja személyes, nem kereskedelmi tanulást támogat, és havi 50 AI-kreditet tartalmaz. Céges webhelyhez vagy ügyfeleket kiszolgáló értékesítési és ügyfélszolgálati bevezetéshez kereskedelmi használatot engedélyező csomag kell. A webhelykészítő előfizetése külön tétel, és a tesztelés is AI-kreditet használ.

Kell programoznom vagy API-kulcsot megadnom?

Az alapbeállítás a kezelőfelület beállításait és egy bővítményt, alkalmazásbeágyazást vagy mellékelt szkriptet használ. A webhely kódrészlete nyilvános Scenario ID-t tartalmaz, nem privát API-kulcsot. Egy választható CRM Action bekötéséhez megfelelő végpont és annak hitelesítése kell; a hitelesítő adatot az Action beállításaiban tartsd.

Gyűjthet a webhelychatbot érdeklődőket és árajánlatkéréseket?

Igen. A Smart Data Gathering a beszélgetés során bekéri a kiválasztott mezőket, és elmenti őket az Inboxban. Az Email new leads értesítheti az Agent adminisztrátorait egy e-mail-cím vagy telefonszám rögzítése után. Egy API Action elküldheti a szükséges mentett mezőket egy beállított fogadónak; egy rögzített név önmagában nem jelent hiánytalan érdeklődést.

Átveheti egy ember a csevegést?

Igen. Állítsd be a Human Handoffot a csapat munkaidejével és a munkaidőn kívüli üzenettel. Az Inboxban egy még hozzá nem rendelt beszélgetésnél válaszd az Assign to me lehetőséget, vagy a Take over vezérlőt, amikor az jelenik meg, majd válaszolj a látogatónak. A Reassign to AI visszaadja a beszélgetést az Agentnek.

Működik WordPress, Shopify, Squarespace, Wix és Webflow alatt?

Mindegyikhez van telepítési útvonal. Használd a hivatalos WordPress-bővítményt, a Shopify alkalmazásbeágyazását az áruházi Agent csatlakoztatása után, vagy meglévő Agenthez az egész webhelyre érvényes megfelelő lábléc-/body-végi kódrészletet. A bővítményengedélyek és az egyéni kód csomagkövetelményei webhelykészítőnként eltérnek.

Miért nem jelenik meg a chatbot a webhelyemen?

Ellenőrizd a közzétett oldalt, a helyes Scenario ID-t és a kódrészlet elhelyezését az oldal body részének végén. Távolítsd el az elavult ismételt telepítéseket, és a lebegő Widgethez kerüld az iframe-alapú blokkokat. Ha megnyílik, de nem tud válaszolni, ellenőrizd a Widget & Embed access beállítást és az elérhető AI-krediteket.

Lassítani fogja a chatbot a webhelyemet?

A widget betöltője aszinkron módon töltődik le, de így is JavaScriptet és hálózati kéréseket ad az oldalhoz. Hasonlítsd össze a betöltési és interakciós teljesítményt telepítés előtt és után reprezentatív oldalakon és telefonon. Az aszinkron betöltés nem igazolja a teljesítményhatás hiányát.

Telefonon is működik a webhelychatbot?

A nyitott widget 768 CSS-pixel alatt teljes képernyős elrendezést használ. Telefonon teszteld az indítógombot, a billentyűzetet, a görgetést és a bezárást. Hagyd kikapcsolva az Auto-open Widget beállítást, ha az automatikus megnyitás megzavarná a böngészést.

Válaszolhat a chatbot a látogatóim nyelvén?

Az Agent a látogató nyelvén is válaszolhat. A rögzített üdvözlőszöveg, beszélgetésindítók és widgetfeliratok fordítása külön, fizetős csomaghoz kötött beállítás. Minden támogatni kívánt nyelvnél teszteld a válasz tényeit és a felületszöveget is.