AI chatbot možete dodati na svoju web-stranicu tako da Agentu date znanje o poslovanju, postavite njegove odgovore i instalirate widget za razgovor pomoću dodatka ili priložene skripte. Chatbot za web-stranice u Quickchat AI drži znanje, postavke razgovora i timski Inbox na jednom mjestu. Posjetitelji postavljaju pitanja na vašoj stranici bez izrade računa.
U ovom vodiču izrađujemo Kestrel Kitchens, izmišljenu tvrtku za projektiranje kuhinja. Posjetitelj pita koliko traje renovacija, provjerava okvirnu cijenu kuhinje dimenzija 3 puta 4 metra, a zatim traži ponudu. Agent odgovara na temelju informacija tvrtke, prikuplja pojedinosti projekta i omogućuje dizajneru da nastavi razgovor.
Gotovo iskustvo na web-stranici. Kestrel Kitchens i poslovni podaci izmišljeni su; widget i njegovi odgovori rade kroz stvarnu lokalnu aplikaciju.
Osnovno postavljanje ne zahtijeva programiranje. Slijedite korake za znanje i upute, prikupljanje kontakata i predaju razgovora osobi, zatim instalirajte widget. Dodatna API Action šalje potpune upite u drugi sustav.
Preuzmite komplet za postavljanje Kestrel Kitchens s primjerom web-stranice, znanjem, Main Prompt, postavkama i testnim porukama. To su datoteke koje možete uređivati i pratiti u nadzornoj ploči, a ne uvoz Agenta jednim klikom. Snimke zaslona te sadržaj kompleta, prompt i konfiguracijski primjeri za kopiranje ostaju na engleskom kako biste mogli reproducirati testirani primjer.
Što će chatbot na web-stranici raditi?
Chatbot odgovara na pitanja na temelju vašeg sadržaja, sprema pojedinosti za zatraženi naknadni kontakt i predaje razgovore vašem timu kada je potrebna osoba.
Za te ishode trebaju različiti dokazi. Točan raspon cijena dolazi iz Knowledge Base. Upit za ponudu zahtijeva kontaktne podatke i pojedinosti projekta u Inboxu. Predaja zahtijeva da osoba preuzme razgovor i pošalje odgovor koji stiže posjetitelju.
Put posjetitelja kroz primjer. Upit za ponudu bilježi interes; dizajner i dalje potvrđuje cijenu i raspoloživost.
| Pitanje posjetitelja | Zadatak Agenta | Što trebate provjeriti |
|---|---|---|
| Koliko traje renovacija? | Objasniti objavljeno trajanje projektiranja i ugradnje | Odgovor zadržava uvjete povezane s tim trajanjem |
| Koliko košta kuhinja dimenzija 3 puta 4 metra? | Navesti okvirni raspon i objasniti što se utvrđuje pregledom prostora | Nema izmišljene fiksne ponude ni cijene po kvadratnom metru |
| Mogu li zatražiti ponudu? | Prikupiti ime, e-poštu, poštanski broj i vrstu projekta | Polja se pojavljuju u spremljenim podacima razgovora |
| Nudite li financiranje? | Priznati da dostavljeno znanje to ne navodi | Nema izmišljene ponude financiranja |
| Mogu li razgovarati s dizajnerom? | Upotrijebiti Human Handoff, u skladu s radnim vremenom tima | Dizajner može odgovoriti iz Inboxa, a posjetitelj prima odgovor |
Što vam treba prije dodavanja chatbota?
Trebaju vam Quickchat AI račun, provjerljive informacije o poslovanju i pristup postavkama dodataka ili prilagođenog koda web-stranice.
- Izradite Quickchat AI račun i dovršite registraciju. Za ovu vježbu upotrijebite zasebnog Agenta kako podaci iz primjera ne bi utjecali na postojeću korisničku podršku.
- Pripremite stranice usluga, česta pitanja i pravila ili upotrijebite izmišljeno znanje iz kompleta. Prije primjene za stvarnu tvrtku zamijenite izmišljene cijene i područje pružanja usluga.
- Provjerite dopušta li vaš plan za web-stranicu odgovarajući način instalacije. WordPress zahtijeva pristup dodacima; neki hostani alati za izradu stranica zahtijevaju plaćeni plan za prilagođeni kod na cijeloj web-stranici.
- Dogovorite da netko prati testni Inbox kada isprobavate predaju razgovora osobi. Pripremite preglednik na računalu i telefon za završne provjere na web-stranici.
Free služi osobnom, nekomercijalnom učenju. Plan Free uključuje 50 AI kredita mjesečno. Poslovna primjena zahtijeva komercijalni plan, a testiranje troši isti raspoloživi limit odgovora kao drugi AI razgovori. Pretplate za izradu web-stranica i troškovi vanjskih API-ja zasebni su. Odjeljak o troškovima razlikuje te troškove.
Korak 1: Kako chatbotu dati znanje s vaše web-stranice?
U Knowledge Base dodajte stranice koje sadrže odgovore o vašem poslovanju, zatim prije testiranja provjerite uvezeni sadržaj. Time Agent dobiva referentni materijal za odgovore.
Izradite Agenta za učenje
- Na prvom zaslonu postavljanja odaberite Set up manually. U postojećoj nadzornoj ploči upotrijebite + uz AI Agent (Add new AI Agent) za izradu zasebnog Agenta, zatim odaberite Set up manually.
- U Identity, pod Name your AI Agent unesite
Kestrel Kitchens. U Describe what you want your agent to do zalijepitemain-prompt.txtiz kompleta. To postaje Agentov Main Prompt, objašnjen u koraku 2. Odaberite Next. - Zasad ostavite Knowledge Base prazan i odaberite Next. Nastavite kroz External apps bez odabira veze. U Deployment odaberite Chat widget, zatim Next.
- Na Choose your plan upotrijebite Skip for now za nastavak osobne vježbe ili odaberite odgovarajući komercijalni plan za poslovnu primjenu. Dovršite ili zatvorite eventualnu neobaveznu ponudu prikazanu nakon toga.
- U nadzornoj ploči potvrdite naziv Agenta u Identity, zatim otvorite Knowledge Base. Odaberite vlastite stranice ili priloženi članak iz primjera u nastavku.
Identity sadrži naziv Agenta i Main Prompt. Knowledge Base, Actions & MCPs i Your Website sljedeće su postaje u ovom postupku.
Uvezite vlastite stranice
- U Knowledge Base odaberite Add Website. Odaberite jednu stranicu ili mogućnost uvoza web-stranice, ovisno o tome koliko sadržaja trebate.
- Unesite javni URL. Pri uvozu web-stranice pregledajte pronađene stranice i odaberite stranice usluga, cijena, postupka i čestih pitanja na kojima se odgovori trebaju temeljiti.
- Pregledajte uvezeni tekst. Potvrdite da cijene imaju ispravnu valutu i porezni tretman te da stare promocije ili nepovezane stranice nisu postale izvori.
- Pričekajte dovršetak obrade. Prije testiranja instaliranog widgeta primijenite ili objavite sve promjene znanja na čekanju koje prikazuje nadzorna ploča.
Počnite s nekoliko jasnih stranica. Web-stranica može prikazivati privlačnu karticu s cijenom, a uvjete navoditi drugdje; Agent treba oboje. Uvoz samo početne stranice može izostaviti uvjete ugradnje, zemljopisna ograničenja ili pravila povrata koji odgovor čine korisnim.
Upotrijebite izvor Kestrel Kitchens
Kako biste reproducirali primjer bez prethodnog hostanja web-stranice, dodajte njegove podatke izravno:
- U Knowledge Base odaberite Add Article. Time se izrađuje članak Untitled i otvara Edit Article.
- U Title unesite
Kestrel Kitchens: services, prices and process. Pod Content odaberite Plain Text i zalijepiteknowledge.txtiz kompleta. - Odaberite Save i pričekajte da članak dobije status Ready. Potvrdite da se naslov pojavljuje na popisu Knowledge Base.
Knowledge Base nalazi se u navigaciji Agenta. Primjer zahtijeva jedan članak; za vlastite objavljene stranice upotrijebite Add Website.
Spremljeni članak zadržava uvjete povezane s cijenama i rokovima. Njegovi izmišljeni podaci odgovaraju primjeru web-stranice.
Kopirajte cjelovito znanje iz primjera
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.
Izvor namjerno ne navodi financiranje. To daje koristan test kako Agent postupa kada podatak doista nedostaje. Za stvarnu web-stranicu održavajte izvore ažurnima i upotrijebite podržane postavke osvježavanja gdje su dostupne; vodič za Knowledge Base objašnjava kako organizirati i testirati te izvore.
Korak 2: Što chatbot treba reći, a što nikada ne smije obećati?
Upotrijebite Main Prompt da odredite kako Agent primjenjuje znanje: najprije odgovara, zadržava korisnost odgovora i odluke poput konačne ponude ostavlja timu.
Za Kestrel dimenzije prostorije utvrđuju opseg projekta. Ne utvrđuju kuhinjske elemente, uređaje ni građevinske radove. Agent treba objasniti okvirni raspon iz izvora od £18,000 do £45,000 s uključenim PDV-om, bez izračuna preciznije cijene prema površini poda.
Te su cijene izmišljeni podaci za vodič. Cilj je zadržati razliku između činjenica iz izvora i odluke koju vaš tim tek treba donijeti.
- U Identity odaberite Edit na kartici Main Prompt.
- Zalijepite cijeli prompt u nastavku. Pričekajte spremanje pa ponovno otvorite uređivač kako biste potvrdili spremljeni tekst.
- Poslovne podatke držite u Knowledge Base. Prompt upotrijebite za stil odgovora, ponašanje pri prikupljanju podataka i odluke za koje je potrebna osoba.
Main Prompt je polje s uputama. Cijeli tekst u nastavku i u kompletu verzija je za kopiranje.
Kopirajte cijeli 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.
Otvorite AI Preview i pitajte How long does a full kitchen renovation take?. U lokalnom kontrolnom testu Agent je odgovorio s 2 do 3 tjedna za pregled prostora i projektiranje, zatim 4 do 8 tjedana za ugradnju nakon što svi materijali budu dostupni. Važni su i trajanje i pripadajući uvjet.
Započnite novi razgovor i pitajte Do you offer financing?. Ispravan odgovor priznaje da izvor ne potvrđuje ponudu i upućuje pitanje dizajneru. Samouvjerenije formulacije u promptu ne bi nadomjestile poslovni podatak koji nedostaje.
Poznat odgovor, uključujući uvjet da materijali moraju biti dostupni.
Podatak koji doista nedostaje. Izvor ne sadrži uvjete financiranja.
Korak 3: Kako prikupljati upite za ponudu u razgovoru?
Smart Data Gathering traži odabrane informacije tijekom razgovora i sprema ono što posjetitelj navede. Za upit za ponudu prikupljajte samo ono što dizajneru treba za naknadni kontakt.
Ovdje uključujete i uređujete ugrađene akcije. Kartica Smart Data Gathering u primjeru naziva se Quote enquiries.
- Otvorite Actions & MCPs, uključite Smart Data Gathering i odaberite Edit Action. Postavite Name na
Quote enquiries, a Description naCapture contact and project details for a kitchen design enquiry.Spremljeni naziv postaje naslov kartice. - Pod Data to collect dodajte retke u nastavku. Pri reprodukciji primjera zadržite ove engleske nazive Data point; nazivi kontaktnih podataka imaju posebna mapiranja na polja posjetitelja u Inboxu.
- Postavite Reason for collecting information na
So a Kestrel Kitchens designer can assess your project and follow up by email. - Postavite When to ask for data na After exchanging a few messages, a How to ask for data na Subtle.
- Spremite akciju. U AI Preview postavite korisno pitanje o usluzi prije nego što zatražite ponudu i pregledajte spremljene podatke u Inbox.
| Podatak (Data point) | Pitanje za postavljanje | Format ili primjer vrijednosti |
|---|---|---|
Full name | What is your full name? | Full name |
Email | What email can our designer use? | |
Postcode | What is the property postcode? | Text |
Project type | What kitchen work do you need? | Text |
Timeline | When would you like to start? | Text |
Pitanja opisuju informacije koje treba prikupiti. Postavke vremena i stila usmjeravaju kada pitati; testirajte i stvarni razgovor.
Ime, e-pošta, poštanski broj i vrsta projekta obavezni su podaci za potpun upit u ovom primjeru. Željeni rok nije obavezan, kako objašnjava Main Prompt. Taj poslovni zahtjev odvojen je od postavki prikupljanja kroz razgovor; korak 8 provjerava obavezna polja prije slanja zahtjeva CRM-u.
Agent treba odgovoriti na općenito pitanje o cijeni bez uvjetovanja odgovora adresom e-pošte. Posjetitelj može i odbiti prikupljanje. Upotrijebite I am only researching. I do not want to leave contact details. kako biste provjerili ostaje li razgovor koristan bez ponavljanih zahtjeva.
Kamo odlaze prikupljeni podaci?
Otvorite razgovor u Inbox. Standardni kontaktni podaci pojavljuju se u poljima posjetitelja; ostale prikupljene vrijednosti ostaju povezane s razgovorom i mogu se izvesti putem Export Gathered Data.
Posjetitelj daje kontaktne podatke i pojedinosti projekta u razgovoru.
Spremljena polja dokaz su prikupljanja. Usporedite svaku vrijednost s onime što je posjetitelj naveo.
Pod Where to send data, Email new leads obavještava svakog administratora Agenta kada se prvi put prikupi adresa e-pošte ili telefonski broj. Samo ime ne pokreće slanje e-pošte. Preview i Simulation ne šalju te obavijesti, stoga prije oslanjanja na isporuku e-pošte provjerite vlastiti administratorski sandučić kontroliranim testom u instaliranom widgetu. U lokalnom postupku slanje vanjske e-pošte ostaje isključeno.
Dokumentacija Smart Data Gathering opisuje prikupljanje, obavijesti i izvoz. Na vlastitoj stranici objasnite zašto tražite informacije i u widgetu povežite obavijest o privatnosti. Vodič za zaštitu podataka u chatbotu pomaže pri pregledu šireg toka podataka.
Korak 4: Kako omogućiti osobi da preuzme razgovor?
Human Handoff predaje razgovor vašem timu; osoba ga zatim preuzima u Inbox i odgovara istom posjetitelju.
Pripremite predaju prije objave widgeta. Osoba koja traži dizajnera ne bi trebala prvo morati dovršiti obrazac za ponudu, a Agent ne bi smio sugerirati da je netko dostupan izvan radnog vremena tima.
- U Actions & MCPs uključite Human Handoff i otvorite Edit Action.
- Ostavite uključena standardna pravila Media Message, User Frustration, Customer Support Suggestion i Lack Of Knowledge; Irrelevant Advice ostavite isključenim. Main Prompt već objašnjava kada ponuditi dizajnera. Testirani primjer upotrebljava ta standardna pravila bez dodavanja prilagođenih pravila.
- Postavite poruke i dostupnost prema nastavku, zatim spremite. Za vježbu ostavite Email notifications isključenim i provjerite predaju izravno u Inboxu.
| Postavka | Vrijednost za Kestrel Kitchens |
|---|---|
| Question | Would you like me to connect you with a kitchen designer? |
| Confirmation | I have passed your chat to our design team. A designer will reply here when available. |
| Human Agents’ availability | On |
| Your time zone | Europe/London |
| Working hours | Monday to Friday, 09:00 to 17:00 |
| Message outside working hours | Our design team is available Monday to Friday, 9am to 5pm UK time. Leave your name and email so a designer can follow up. |
Postavite sate kada osoba doista prati Inbox. Izmišljeni raspored nije obećanje trenutačnog odgovora.
Tijekom radnog vremena tima na web-stranici pitajte Can I speak to a designer?. Dovršite eventualnu potvrdu predaje koju Agent zatraži. U Inboxu otvorite razgovor i odaberite Assign to me kada nije dodijeljen ili Take over kada je ta kontrola prikazana. Pošaljite odgovor kao osoba i potvrdite da ga posjetitelj prima. Upotrijebite Reassign to AI kada AI treba nastaviti.
Inbox objedinjuje razgovor, kontrolu preuzimanja i podatke posjetitelja. Prije odgovaranja odaberite razgovor posjetitelja.
Provjerite tko vodi razgovor i isporučeni odgovor osobe, a ne samo Agentovu ponudu predaje.
Ista predaja iz perspektive posjetitelja. Maya Patel izmišljena je dizajnerica upotrijebljena za lokalni test.
Ponovite u novom razgovoru izvan postavljenog radnog vremena. Agent treba objasniti dostupnost i ponuditi navedeni način naknadnog kontakta. Ako privremeno promijenite raspored radi ove provjere, nakon toga vratite stvarni raspored. Dokumentacija Human Handoff objašnjava postavke i postupak u Inboxu.
Vodič za predaju razgovora s chatbota čovjeku uključuje zasebne provjere odgovornosti za razgovor, vraćanja razgovora AI-ju i neuspjelih scenarija izvan radnog vremena.
Korak 5: Kako uskladiti widget s vašom web-stranicom?
Postavite izgled i stalni tekst pod Channels → Your Website. Poruka dobrodošlice neka bude dovoljno konkretna da objasni što posjetitelj može pitati.
Tri kartice odvajaju instalaciju, izgled i stalni tekst. Appearance sadrži i avatar te oznaku gumba za otvaranje.
Izgled widgeta (Appearance)
- Otvorite Appearance. Za Kestrel odaberite temu Custom s bijelom pozadinom, tamnozelenim zaglavljem i naglaskom (
#315448) te bijelim tekstom zaglavlja. Zadržite zadanu veličinu teksta i zaobljene kontrole. - Pod Branding → AI Agent Avatar kliknite ikonu za učitavanje avatara, odaberite
website/kestrel-avatar.pngiz kompleta i u dijaloškom okviru za obrezivanje odaberite Upload. - Postavite Widget window max width na 400px i Widget window max height na 520px. Za veličinu gumba za otvaranje odaberite Small, postavite ga desno i kao oznaku upotrijebite
Ask about your kitchen. Oznaka je dostupna uz mali gumb. Provjerite položaj u odnosu na eventualnu obavijest o kolačićima ili druge plutajuće kontrole na stranici. - Ostavite Auto-open Widget isključenim. Otvaranje widgeta pri svakom učitavanju stranice prekida pregledavanje, osobito na telefonu.
Pri odabiru boja provjeravajte pretpregled. Test na stvarnoj web-stranici i dalje je važan jer gumb za otvaranje dijeli prostor s kontrolama vaše stranice.
Tekstualni sadržaj (Text Content)
Otvorite Text Content i upotrijebite ove vrijednosti:
| Postavka | Vrijednost |
|---|---|
| Header | Kestrel Kitchens |
| Welcome message | Hello, I can help with kitchen costs, timelines and quote enquiries. What are you planning? |
| Conversation starters | How long does a renovation take? / What does a kitchen cost? / Can I request a quote? |
| Disclaimer text | AI assistant. Prices are indicative. A designer confirms your quote after a survey. |
Početna pitanja trebaju pokretati korisne zadatke. Napomena posjetiteljima govori koje odluke još zahtijevaju dizajnera.
Agent može odgovarati na jeziku posjetitelja. Prijevod stalne poruke dobrodošlice i oznaka widgeta zasebna je postavka pod Other languages, dostupna na plaćenim planovima. Za višejezičnu stranicu testirajte i odgovor i stalni tekst sučelja; vodič za višejezične chatbotove objašnjava tu razliku.
Promjenama izgleda može trebati nekoliko minuta da stignu do predmemoriranih sesija posjetitelja. Ponovno učitajte stranicu prije zaključka da spremljena promjena nije uspjela. Hide Quickchat AI Branding zahtijeva Professional ili viši plan; vodič za uklanjanje oznaka brenda obrađuje ostala mjesta koja treba pregledati.
Korak 6: Kako instalirati chatbot na web-stranicu?
Instalirajte Widget u zajednički predložak stranice ili upotrijebite podržanu integraciju platforme. Plutajući Widget mora se izvršavati na stranici koju posjetitelj pregledava.
- Otvorite Channels → Your Website → Install.
- Uključite Widget & Embed access za javni widget.
- Odaberite način instalacije za svoju web-stranicu i kopirajte isječak koda ili Scenario ID prikazan za ovog Agenta.
- Objavite promjenu, otvorite javnu stranicu i postavite pitanje za koje znate da odgovor postoji u Knowledge Base.
Kopirajte sa zaslona Install ovog Agenta. Njegov Scenario ID javni je identifikator widgeta, a ne privatni API ključ.
Bilo koja web-stranica: zalijepite kod widgeta prije završne oznake body
Odaberite Install manually with code i kopirajte isječak koda za Widget. Trenutačni kod za učitavanje ima ovaj oblik:
<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>
Zamijenite YOUR_SCENARIO_ID vrijednošću iz Install. Zalijepite cijeli isječak jednom, neposredno prije </body> u zajedničkom predlošku ili upotrijebite polje podnožja za cijelu web-stranicu u alatu za izradu stranica. Ovaj kod umeće skriptu u tijelo stranice, pa postavljanje u zaglavlje prije nego što tijelo postoji može spriječiti učitavanje.
Položaj je važan. HTML blok temeljen na iframeu zasebna je stranica i nije prikladan za ovaj plutajući Widget.
Zasebna mogućnost Embed postavlja razgovor u spremnik unutar stranice. Upotrijebite njezin generirani isječak ako želite odjeljak za razgovor unutar sadržaja. HTML blok koji kod umeće izravno u stranicu može podržavati takav način; blok alata za izradu stranica koji izolira kod u iframeu drukčiji je slučaj. Pogledajte dokumentaciju kanala Website.
WordPress: instalirajte službeni dodatak
- U WordPressu otvorite Plugins → Add New, potražite Quickchat AI Agent, zatim odaberite Install Now i Activate.
- Otvorite Settings → Quickchat AI Agent.
- Zalijepite Scenario ID sa zaslona Install u Quickchat AI i odaberite Save Changes.
- Otvorite javnu stranicu i provjerite widget. Upotrijebite dodatak ili ručni isječak koda kako kod za učitavanje ne biste instalirali dvaput.
Trebate instalaciju i plan WordPressa koji dopuštaju dodatke. Vodič za chatbot na WordPressu prikazuje sučelje dodatka i provjere specifične za WordPress.
Squarespace: upotrijebite umetanje koda u podnožje
- Otvorite panel Code Injection web-stranice. Ako se navigacija na vašem računu razlikuje, upotrijebite pretraživanje postavki u nadzornoj ploči.
- Zalijepite cijeli isječak koda za Widget u Footer i spremite.
- Otvorite objavljenu stranicu u zasebnoj kartici preglednika i testirajte odgovor.
Squarespace pruža Code Injection na planovima Core, Plus, Advanced i nekim starijim planovima. Umetanje u podnožje postavlja kod prije </body> na cijeloj web-stranici. Za plutajući widget upotrijebite to mjesto; iframe blok na pojedinoj stranici nije ekvivalentan. Taj prilagođeni kod ne obuhvaća Squarespace stranice naplate.
Wix: upotrijebite prilagođeni kod na položaju Body - end
- U nadzornoj ploči web-stranice otvorite Settings → Custom Code, zatim + Add Custom Code.
- Zalijepite isječak koda za Widget i nazovite ga
Quickchat AI widget. - Primijenite ga na All pages i odaberite Body - end, zatim Apply.
- Testirajte objavljenu web-stranicu, uključujući prelazak na drugu stranicu.
Wix za prilagođeni kod zahtijeva objavljenu web-stranicu s povezanom domenom. Za ovaj plutajući widget upotrijebite postavku Custom Code za cijelu web-stranicu.
Webflow: upotrijebite kod podnožja i objavite
- Otvorite Site settings → Custom code.
- Zalijepite isječak koda za Widget u Footer code i odaberite Save changes.
- Odaberite Publish za željenu domenu, zatim testirajte taj objavljeni URL.
Webflowove postavke prilagođenog koda zahtijevaju odgovarajući plaćeni Workspace ili aktivan plan Site. Samo spremanje postavke ne objavljuje je.
Shopify: odaberite kod postojećeg Agenta ili aplikaciju Shopify
Za Agenta Kestrel koji ste već izradili dodajte njegov isječak koda za Widget neposredno prije </body> u Online Store → Themes → Edit code → layout/theme.liquid, zatim spremite i pregledajte trgovinu. Prije uređivanja sačuvajte sigurnosnu kopiju teme i ponovno provjerite instalaciju nakon promjene teme. Ovaj način prikazuje odabranog Agenta; ne konfigurira akcije za proizvode ili narudžbe.
Za Agenta usmjerenog na trgovinu, postavljanje aplikacije Quickchat AI za Shopify povezuje trgovinu kroz vlastiti početni postupak. Nakon povezivanja upotrijebite Enable Widget in Shopify Theme Editor ili otvorite Online Store → Themes → Edit theme → App embeds. Uključite Quickchat AI Widget i spremite. Shopifyjeva dokumentacija o ugrađivanju aplikacija objašnjava kontrole teme; ponovno uključite ugrađivanje aplikacije pri promjeni objavljene teme.
Gornji postupci za alate za izradu stranica provjereni su prema službenoj dokumentaciji. Snimke zaslona u primjeru prikazuju web-stranicu Kestrel i stvarni lokalni widget; nisu snimke prijavljenih računa na svakom alatu za izradu stranica.
Provjerite isječak koda prije traženja problema u Agentu
Ove neobavezne provjere rade s vrijednostima koje navedete:
- Provjerite isječak koda za Widget. Provjerite zalijepljeni kod u odnosu na navedeni Scenario ID. Ova provjera ne dohvaća vašu web-stranicu.
- Usporedite načine implementacije. Provjerite navedene kanale, pristup web-stranici i potrebne značajke u odnosu na mogućnosti postavljanja Quickchat AI. Ova provjera ne pregledava vašu web-stranicu ni račun.
U kompatibilnom pregledniku te su provjere dostupne i kao alati web-stranice. Poveznice otvaraju standardne obrasce.
Korak 7: Kako testirati chatbot prije posjetitelja?
Zasebno testirajte odgovor, spremljene podatke i isporučeni odgovor. AI Preview i Simulation Testing pomažu procijeniti ponašanje; objavljena web-stranica dokazuje da posjetitelj može upotrebljavati instalirani widget.
Pokrenite neovisna pitanja u Simulation Testing
Otvorite Testing → Create Dataset, nazovite skup Kestrel Kitchens: website launch checks i odaberite Paste messages. Dodajte pitanja o trajanju, cijeni i financiranju u nastavku, odvojena retkom koji sadrži --- između pitanja. Sam prijelom retka zadržava tekst unutar jedne testne poruke. Postavite Evaluation criteria tako da provjeravaju činjenice i sažete odgovore, zatim odaberite Run → Start Run. Komplet sadrži točne poruke i kriterije.
Svaki redak skupa podataka započinje zaseban razgovor. Za ta neovisna pitanja upotrijebite Simulation; višekoračne provjere ponude i preuzimanja od strane osobe provedite u jednom razgovoru u AI Preview ili na web-stranici. Zasebno pregledajte zapisnik akcije i primatelja jer procjena transkripta ne može potvrditi vanjsku isporuku.
Otvorite dovršeno izvođenje i pregledajte odgovore. Ovaj odgovor o cijeni zadržava okvirni raspon; njegova ocjena ne potvrđuje isporuku drugom sustavu.
Isti test cijene otvoren kao razgovor u Inboxu. Pregledajte cijeli odgovor, uključujući razlog zašto same dimenzije ne mogu utvrditi konačnu ponudu, umjesto oslanjanja samo na ocjenu.
| Testna poruka ili slijed | Očekivani ishod | Što pregledati |
|---|---|---|
How long does a full kitchen renovation take? | 2 do 3 tjedna za pregled prostora/projektiranje; 4 do 8 tjedana za ugradnju nakon dostupnosti materijala | Odgovor i izvor |
How much would a 3 by 4 metre kitchen cost? | £18,000 do £45,000 s uključenim PDV-om kao okvirni raspon; za konačnu ponudu potreban je pregled prostora | Nema izmišljene fiksne cijene |
Do you offer financing? | Agent to ne može potvrditi iz izvora i nudi razgovor s dizajnerom | Odgovor, zatim predaja ako je zatražena |
Can I get a quote? My name is Sam Taylor. | Tražiti podatke koji nedostaju; još ne slati akciju za potpuni upit | Spremljeno ime; nema primitka u CRM-u |
My email is sam@example.com. The postcode is BS6 7AB and it is a full kitchen renovation. | Spremiti navedenu e-poštu, poštanski broj i vrstu projekta | Polja u Inboxu; zapisnik dodatne akcije i primatelj |
I have not decided when to start. | Prihvatiti nepoznat željeni rok | Nema izmišljenog datuma ni obaveznog roka |
I am only researching. I do not want to leave contact details. | Nastaviti odgovarati bez ponavljanih zahtjeva za prikupljanje | Sljedeći koristan odgovor |
Can I speak to a designer? | Pratiti postavljeni postupak unutar ili izvan radnog vremena | Tko vodi razgovor i isporuka odgovora osobe |
¿Cuánto suele durar una reforma de cocina? | Odgovoriti na španjolskom uz iste raspone trajanja i uvjete | Činjenice i jezik |
Između neovisnih slučajeva upotrijebite novi razgovor. Ponovno učitavanje stranice može nastaviti postojeći razgovor, pa upotrijebite kontrolu za novi razgovor u widgetu kada trebate svjež test.
Provjerite web-stranicu na telefonu
Na zaslonima užim od 768 CSS piksela otvoreni widget prikazuje se preko cijelog zaslona. Provjerite možete li ga otvoriti, pisati uz prikazanu tipkovnicu, pomicati razgovor i zatvoriti ga za povratak na stranicu.
Otvoreni widget na uskom zaslonu. Za ovu web-stranicu usmjerenu na pregledavanje ostavite Auto-open isključenim.
Završite odgovorom stvarne osobe iz Inboxa. Dobar AI odgovor ne dokazuje da put do ljudske podrške radi. Ponovite manji skup ovih provjera nakon promjene izvora, promptova, akcija ili teme web-stranice.
Korak 8: Kako poslati potpun upit u CRM?
Dodatna API Action može poslati spremljena polja HTTP primatelju nakon što razgovor prikupi sve obavezne informacije. Osnovni chatbot na web-stranici već se može upotrebljavati bez tog proširenja.
Važno je razlikovati prikupljen kontakt od potpunog upita. Quickchat AI postavlja lead_captured kada prvi put prikupi standardno kontaktno polje, uključujući ime. Sama oznaka ne potvrđuje da su e-pošta, poštanski broj ili vrsta projekta prisutni.
Platforma provjerava svaki uvjet. Model prikuplja informacije; uvjeti određuju kada zahtjev postaje spreman za slanje.
Pripremite primatelja
Upotrijebite krajnju točku CRM-a ili automatizacije pod svojom kontrolom koja prihvaća JSON tijelo u nastavku. Komplet sadrži mali lokalni demonstracijski primatelj za čitatelje koji žele pregledati zahtjev prije povezivanja CRM-a. Njegove upute za postavljanje izrađuju privatni token i objašnjavaju kako izložiti privremenu HTTPS krajnju točku. Demonstracijskom primatelju šaljite samo izmišljene testne podatke.
Za upravljanu integraciju slijedite vodič za izvještavanje u Google Sheets ili vodič za prilagođeni CRM. Nemojte uključiti dva postupka koja oba izrađuju isti kontakt.
Postavite jednu automatsku API akciju
- Otvorite Actions & MCPs → Custom Actions → Add Action → API Action. Odaberite Create manually ako se otvori izrada na temelju opisa.
- Postavite API Action Name na
Send quote enquiry. - Ostavite What to ask the user first praznim. Ova akcija čita polja koja je Smart Data Gathering već spremio; ne traži od modela da ispuni drugi skup parametara.
- Pod API Endpoint odaberite
POSTi unesite HTTPS URL/enquiriessvojeg primatelja. - Dodajte zaglavlja, tijelo i uvjete u nastavku, zatim spremite i aktivirajte akciju.
| Ključ zaglavlja (Headers: Key) | Vrijednost |
|---|---|
Content-Type | application/json |
Authorization | Bearer YOUR_RECEIVER_TOKEN |
Token unesite samo u postavku zaglavlja akcije. Držite ga izvan prompta, isječka koda na web-stranici i razgovora s posjetiteljem. README demonstracijskog primatelja objašnjava kako ga generirati; za stvarnu integraciju upotrijebite dokumentiranu autentifikaciju svojeg CRM-a.
U kartici Body odaberite JSON i unesite:
{
"conversation_id": "{{conversation_id}}",
"name": "{{metadata_visitor_name}}",
"email": "{{metadata_visitor_email}}",
"postcode": "{{metadata_postcode}}",
"project_type": "{{metadata_project_type}}"
}
Upotrijebite Add AI Data za umetanje odgovarajućih ugrađenih vrijednosti i metapodataka. conversation_id identificira razgovor. Ostale vrijednosti dolaze iz spremljenih polja; engleski nazivi kontaktnih podataka mapiraju se u visitor_name i visitor_email, dok Project type postaje project_type. Dokumentacija varijabli objašnjava ta mapiranja.
Stvarni uređivač sa zamjenskim podacima za povezivanje. Gore unesite vlastitu krajnju točku, vjerodajnice u Headers i JSON u Body; obojene oznake označavaju dinamičke vrijednosti. Ovaj primjer samo konfiguracije ostao je neaktivan.
Pod When to run odaberite When metadata matches. U Run when dodajte svih pet redaka; uvjeti metapodataka kombiniraju se operatorom AND:
| Ključ metapodataka | Uvjet |
|---|---|
lead_captured | is true |
visitor_name | is true |
visitor_email | is true |
postcode | is true |
project_type | is true |
Za ta tekstualna polja is true odbacuje prazne vrijednosti i tekst koji predstavlja neistinitu vrijednost. exists provjerava samo postoji li ključ; spremljeni prazan niz može zadovoljiti taj uvjet. Testovi u nastavku pokazuju zašto je stroži uvjet važan. Time se provjerava je li dostavljen upotrebljiv tekst, a ne jesu li identitet posjetitelja ili podaci o nekretnini neovisno provjereni.
Upotrijebite ovaj 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.
Prva dva od pet spremljenih uvjeta. Dodajte svaki redak iz tablice; When metadata matches provjerava ih nakon AI odgovora bez Agentova odabira akcije.
Akcija se pokušava izvršiti jednom po razgovoru kada su svi uvjeti zadovoljeni. Ne pokreće se ponovno kada stigne neobavezni željeni rok, a neuspješan poslani zahtjev ne pokušava se automatski ponovno u tom razgovoru. Zadržite rok u Inboxu za dizajnera ili izradite izričitu integraciju za stvaranje i ažuriranje ako CRM treba naknadne promjene.
Zahtjev se izvršava nakon AI odgovora, a njegov odgovor ne umeće se u razgovor. Zato Main Prompt potvrđuje primitak podataka posjetitelja bez tvrdnje da ih je CRM prihvatio. Provjerite isporuku u zapisniku akcije i kod primatelja. Dokumentacija automatskih akcija opisuje to ponašanje izvršavanja.
Testirajte djelomične podatke, zatim potpuni upit
Prva verzija upotrebljavala je exists za obavezna tekstualna polja. Sam je naveo ime, zatim e-poštu u sljedećoj poruci. Smart Data Gathering već je izradio prazne vrijednosti poštanskog broja i vrste projekta, pa su ti ključevi postojali i akcija je poslala nepotpun zahtjev. Time je potrošen i njezin jedini pokušaj za taj razgovor.
Ispravak je bio promjena četiriju uvjeta tekstualnih polja u is true, uz nepromijenjen ostatak postavki. Ponovite test u novom razgovoru, dajući samo e-poštu u drugoj poruci. Akcija treba čekati preostale pojedinosti projekta.
| Stanje testa | Kontakt prikupljen | Obavezna polja spremna | Primljeni zahtjevi |
|---|---|---|---|
| Sam navodi ime | Da | Ne | 0 |
| Sam navodi samo e-poštu | Da | Ne | 0 |
| Sam navodi poštanski broj i vrstu projekta | Da | Da | 1 |
| Sam dodaje „next spring” | Da | Da | 1 |
To je jedan opaženi razgovor, a ne stopa uspjeha u produkciji. Reproducirajte ga novim razgovorom, pregledajte spremljena polja nakon svake poruke i provjerite zahtjev na vlastitoj krajnjoj točki.
Stvarni poziv akcije vratio je HTTP 201. Otvorite pojedinosti kako biste pregledali zahtjev; spremljeni zapis u nastavku pokazuje što je primatelj pohranio.
Jedan stvarni spremljeni zapis iz autentificiranog demonstracijskog primatelja. To je upit, a ne potvrđena ponuda ili rezervacija.
Demonstracija je upotrebljavala lokalnog primatelja i zabilježila stvarnu HTTP isporuku. Hostani Quickchat AI Agent zahtijeva javno dostupnu HTTPS krajnju točku; URL localhost na vašem računalu nije dostupan usluzi.
Ako ništa ne stigne, pregledajte View logs na akciji i spremljene metapodatke razgovora. Vrijednosti koje nedostaju, isključena akcija i HTTP pogreška zahtijevaju različite ispravke. Ispravite konfiguraciju i upotrijebite novi razgovor za ponovno testiranje automatskog okidača; zahtjev u istom razgovoru da pokuša ponovno ne poništava pokušaj koji je dopušten jednom po razgovoru.
Zašto chatbot nedostaje ili prikazuje stare postavke?
Prije promjene prompta provjerite objavljenu stranicu, mjesto instalacije i pristup Agentu. Problem učitavanja u pregledniku odvojen je od problema kvalitete odgovora.
| Simptom | Što pregledati | Što učiniti |
|---|---|---|
| Nema gumba za otvaranje na javnoj stranici | Položaj koda i stanje objave | Postavite trenutačni kod u zajedničko podnožje/kraj tijela, spremite i objavite |
| Widget radi drugdje, ali ne u HTML bloku | Stvara li alat za izradu stranica iframe | Za plutajući Widget upotrijebite kod za cijelu web-stranicu; za prikladan spremnik unutar sadržaja upotrijebite podržani kod Embed |
| Pojavljuje se pogrešan Agent | Scenario ID i dvostruke instalacije | Kopirajte ID željenog Agenta i uklonite zastarjele isječke koda ili dvostruke instalacije dodatka |
| Gumb otvara widget, ali odgovori ne uspijevaju | Widget & Embed access, krediti i mrežne pogreške preglednika | Uključite željeni javni kanal, provjerite limit i pregledajte neuspjeli zahtjev |
| Boja ili pozdrav ostaju nepromijenjeni | Predmemorirana konfiguracija ili HTML stranice | Pričekajte nekoliko minuta, ponovno učitajte pa očistite odgovarajuću predmemoriju stranice ako i dalje poslužuje stari kod |
| Nema e-pošte o novom kontaktu tijekom testa | Izvor razgovora i Email new leads | Preview i Simulation ne šalju e-poštu; testirajte stvarni razgovor u widgetu s vlastitim kontroliranim kontaktnim podacima |
| Naizgled potpun upit nikada ne stiže u CRM | Trajno spremljena polja, uvjeti i zapisnik akcije | Provjerite svaki obavezni ključ i HTTP rezultat; nakon ispravka poslanog neuspješnog zahtjeva upotrijebite novi razgovor |
| Nema gumba nakon promjene teme | Uključuje li nova tema instalaciju | Ponovno uključite Shopify ugrađivanje aplikacije ili vratite kod u novi zajednički predložak |
| Odgovor proturječi izvoru | Uvezeni sadržaj i primijenjene promjene znanja | Ispravite izvor, dovršite obradu/objavu i ponovite kontrolno pitanje s poznatim odgovorom |
Ako preglednik prijavljuje blokirani resurs, pregledajte točnu pogrešku Content Security Policy ili blokatora. Izbjegavajte potpuno isključivanje zaštite stranice. Testirajte javnu stranicu preko HTTPS-a i za potrebno postavljanje upotrijebite dokumentaciju kanala.
Koliko košta chatbot za web-stranicu?
Pretplata i raspoloživi limit korištenja plaćaju AI uslugu; plan za web-stranicu i dodatne integracije zasebni su troškovi.
| Primjena | Odgovarajući uvjeti plana |
|---|---|
| Osobno, nekomercijalno učenje | Free uključuje 50 AI kredita mjesečno te osnovni Widget, Smart Data Gathering, Human Handoff i Actions |
| Poslovna web-stranica | Starter dopušta komercijalnu upotrebu i uključuje 150 kredita mjesečno, od $9/mjesečno |
| Prilagođeni prijevodi widgeta ili glasovni unos | Dostupno na plaćenim planovima |
| Hide Quickchat AI Branding | Professional ili viši plan |
AI kredit nije razgovor. Razgovor može sadržavati više AI odgovora, a različiti odabiri modela mogu imati različitu potrošnju kredita. U proračun za testiranje uključite Preview i Simulation. Za procjenu opsega upotrijebite aktualne cijene i limite te vodič za troškove chatbota.
Mogu li ChatGPT ili Claude pomoći pri postavljanju chatbota?
Veza za upravljanje računom Quickchat AI omogućuje kompatibilnom asistentu konfiguriranje podržanih postavki Agenta i pripremu testova iz ovih materijala.
Povežite vlastiti račun putem Quickchat AI u ChatGPT-u ili Quickchat AI u Claudeu, slijedeći vodič Manage with AI. Podržani alati obuhvaćaju znanje, Main Prompt, početna pitanja, Human Handoff, HTTP akcije, testiranje i isječak koda za instalaciju.
Dovršite Smart Data Gathering i detaljne postavke Appearance widgeta u nadzornoj ploči. Trebate i autorizirati vanjske račune te instalirati kod u postavkama web-stranice. Veza računa služi upravljanju Agentom; odvojena je od izlaganja Agenta kao MCP alata.
Kopirajte zahtjev za postavljanje za svojeg 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.
Česta pitanja
Kako dodati AI chatbot na svoju web-stranicu?
Izradite Agenta u Quickchat AI, dodajte znanje o poslovanju, konfigurirajte Main Prompt, Smart Data Gathering i Human Handoff, zatim instalirajte njegov Widget pomoću dodatka ili priloženog koda. Na objavljenoj stranici testirajte odgovor temeljen na izvoru, prikupljene kontaktne podatke i isporučeni odgovor osobe.
Mogu li dodati prilagođeni ChatGPT na svoju web-stranicu?
Možete dodati asistenta nalik ChatGPT-u koji je dobio znanje s vaših stranica. Ovaj vodič postavlja Quickchat AI Agenta putem njegova widgeta za web-stranicu, pa posjetitelji mogu razgovarati na vašoj stranici bez prijave u ChatGPT. Njegovim znanjem, uputama i integracijama upravlja se u Quickchat AI.
Mogu li besplatno dodati AI chatbot na svoju web-stranicu?
Plan Free u Quickchat AI podržava osobno, nekomercijalno učenje i uključuje 50 AI kredita mjesečno. Poslovna web-stranica ili prodaja i podrška namijenjena korisnicima zahtijevaju plan koji dopušta komercijalnu upotrebu. Pretplate za izradu web-stranica zasebne su, a i testiranje troši AI kredite.
Trebam li programirati ili navesti API ključ?
Osnovno postavljanje upotrebljava postavke nadzorne ploče i dodatak, ugrađivanje aplikacije ili priloženu skriptu. Kod za web-stranicu sadrži javni Scenario ID, a ne privatni API ključ. Povezivanje dodatne CRM akcije zahtijeva odgovarajuću krajnju točku i njezinu autentifikaciju; tu vjerodajnicu držite u postavkama akcije.
Može li chatbot na web-stranici prikupljati kontakte i upite za ponudu?
Da. Smart Data Gathering tijekom razgovora traži odabrana polja i sprema ih u Inbox. Email new leads može obavijestiti administratore Agenta nakon prikupljanja adrese e-pošte ili telefonskog broja. API Action može poslati obavezna spremljena polja konfiguriranom primatelju; samo prikupljeno ime ne znači da je upit potpun.
Može li osoba preuzeti razgovor?
Da. Postavite Human Handoff s radnim vremenom tima i porukom izvan radnog vremena. U Inboxu odaberite Assign to me za nedodijeljeni razgovor ili Take over kada je ta kontrola prikazana, zatim odgovorite posjetitelju. Reassign to AI vraća razgovor Agentu.
Radi li na WordPressu, Shopifyju, Squarespaceu, Wixu i Webflowu?
Svaki ima način instalacije. Upotrijebite službeni dodatak za WordPress, ugrađivanje aplikacije Shopify nakon povezivanja Agenta trgovine ili odgovarajući kod u podnožju/na kraju tijela cijele web-stranice za postojećeg Agenta. Dopuštenja dodataka i zahtjevi planova za prilagođeni kod razlikuju se ovisno o alatu za izradu stranica.
Zašto se moj chatbot ne pojavljuje na web-stranici?
Provjerite objavljenu stranicu, ispravan Scenario ID i položaj koda na kraju tijela stranice. Uklonite zastarjele dvostruke instalacije i izbjegavajte blokove temeljene na iframeu za plutajući Widget. Ako se otvara, ali ne može odgovoriti, provjerite Widget & Embed access i dostupne AI kredite.
Hoće li chatbot usporiti moju web-stranicu?
Kod za učitavanje widgeta preuzima se asinkrono, ali svejedno dodaje JavaScript i mrežne zahtjeve. Usporedite učitavanje i odziv pri interakciji prije i nakon instalacije na reprezentativnim stranicama i telefonu. Asinkrono učitavanje ne znači da nema utjecaja na performanse.
Radi li chatbot za web-stranicu na telefonima?
Otvoreni widget prikazuje se preko cijelog zaslona pri širini manjoj od 768 CSS piksela. Na telefonu testirajte gumb za otvaranje, tipkovnicu, pomicanje i kontrolu zatvaranja. Ostavite Auto-open Widget isključenim kada bi automatsko otvaranje prekidalo pregledavanje.
Može li chatbot odgovarati na jezicima mojih posjetitelja?
Agent može odgovarati na jeziku posjetitelja. Prijevod stalnog teksta dobrodošlice, početnih pitanja i oznaka widgeta zasebna je postavka plaćenog plana. Za svaki jezik koji namjeravate podržati testirajte i činjenice u odgovoru i tekst sučelja.