Näin lisäät tekoälychatbotin sivustollesi ilman koodaamista

Voit lisätä tekoälychatbotin verkkosivustollesi antamalla agentille yrityksesi tiedot, määrittämällä sen vastaukset ja asentamalla chat-widgetin lisäosalla tai mukana toimitettavalla komentosarjalla. Quickchat AI:n verkkosivustochatbot kokoaa tiedot, keskusteluasetukset ja tiimin Inboxin yhteen paikkaan. Kävijät voivat esittää kysymyksiä sivustollasi luomatta tiliä.

Tässä oppaassa rakennetaan chatbot kuvitteelliselle keittiösuunnitteluyritykselle Kestrel Kitchens. Kävijä kysyy remontin kestoa, selvittää 3 kertaa 4 metrin keittiön todennäköistä hintaa ja pyytää sitten tarjousta. Agentti vastaa yrityksen tietojen pohjalta, kerää projektin tiedot ja antaa suunnittelijan jatkaa keskustelua.

Peruskokoonpano ei edellytä ohjelmointia. Käy läpi tiedot ja ohjeet, liidien kerääminen ja siirto ihmiselle ja asenna sitten widget. Valinnainen API Action lähettää täydelliset tarjouspyynnöt toiseen järjestelmään.

Lataa Kestrel Kitchensin asennuspaketti, joka sisältää esimerkkisivuston, tiedot, Main Prompt -ohjeen, asetukset ja testiviestit. Tiedostoja voi muokata ja käyttää hallintapaneelin vaiheissa. Kyse ei ole agentin tuonnista yhdellä napsautuksella. Kuvakaappaukset sekä kopioitavat paketin tiedostot, kehotteet ja asetukset pysyvät englanninkielisinä, jotta testatun esimerkin voi toistaa.

Mitä verkkosivuston chatbot tekee?

Chatbot vastaa kysymyksiin sisältösi perusteella, tallentaa pyydetyn jatkoyhteydenoton tiedot ja siirtää keskustelun tiimillesi, kun tarvitaan ihmistä.

Näiden tulosten varmistamiseen tarvitaan erilaista näyttöä. Oikea hintahaarukka perustuu Knowledge Baseen. Tarjouspyyntö edellyttää yhteys- ja projektitietoja Inboxissa. Siirrossa ihmisen on otettava keskustelu vastuulleen ja lähetettävä vastaus, joka saapuu kävijälle.

Kävijän polku esimerkissä. Tarjouspyyntö kirjaa kiinnostuksen; suunnittelija vahvistaa edelleen hinnan ja saatavuuden.

Mitä tarvitset ennen chatbotin lisäämistä?

Tarvitset Quickchat AI -tilin, yritystiedot, joiden oikeellisuuden voit varmistaa, ja pääsyn sivuston lisäosa- tai mukautetun koodin asetuksiin.

1. Luo Quickchat AI -tili ja suorita rekisteröitymisen vaiheet. Käytä harjoituksessa erillistä agenttia, jotta esimerkkitiedot eivät voi vaikuttaa olemassa olevaan asiakaspalveluun.
2. Valmistele palvelusivut, usein kysytyt kysymykset ja käytännöt tai käytä paketin kuvitteellisia tietoja. Vaihda kuvitteelliset hinnat ja palvelualue ennen käyttöönottoa oikealle yritykselle.
3. Tarkista, että verkkosivustosi tilaus sallii kyseisen asennustavan. WordPressissä tarvitset oikeudet lisäosiin; jotkin ylläpidetyt sivustotyökalut edellyttävät maksullista tilausta koko sivuston mukautettua koodia varten.
4. Järjestä joku seuraamaan testin Inboxia, kun kokeilet siirtoa ihmiselle. Varaa työpöytäselain ja puhelin sivuston lopputarkistuksia varten.

Free on tarkoitettu henkilökohtaiseen, ei-kaupalliseen opiskeluun. Free sisältää 50 AI-krediittiä kuukaudessa. Yrityskäyttö edellyttää kaupallista tilausta, ja testaus kuluttaa samaa vastauskiintiötä kuin muut tekoälykeskustelut. Sivustotyökalun tilaukset ja ulkoisten rajapintojen kustannukset ovat erillisiä. Kustannuksia käsittelevä osio erittelee ne.

Vaihe 1: Miten opetat chatbotille verkkosivustosi tiedot?

Lisää yrityksesi vastaukset sisältävät sivut Knowledge Base -tietopankkiin ja tarkista tuotu sisältö ennen testaamista. Näin agentti saa lähdeaineistoa vastauksiinsa.

Luo agentti harjoittelua varten

1. Valitse ensimmäisessä asetusnäkymässä Set up manually. Jos olet jo hallintapaneelissa, luo erillinen agentti AI Agent -kohdan vieressä olevalla +-painikkeella (Add new AI Agent) ja valitse sitten Set up manually.
2. Kirjoita Identity-näkymän Name your AI Agent -kenttään Kestrel Kitchens. Liitä paketin main-prompt.txt kenttään Describe what you want your agent to do. Siitä tulee agentin Main Prompt, jota käsitellään vaiheessa 2. Valitse Next.
3. Jätä Knowledge Base toistaiseksi tyhjäksi ja valitse Next. Jatka External apps -vaiheen läpi valitsematta yhteyttä. Valitse Deployment-vaiheessa Chat widget ja sitten Next.
4. Jatka henkilökohtaista harjoitusta valitsemalla Choose your plan -näkymässä Skip for now tai valitse yrityskäyttöön sopiva kaupallinen tilaus. Hyväksy tai sulje tämän jälkeen mahdollisesti näkyvä valinnainen tarjous.
5. Varmista hallintapaneelin Identity-näkymästä agentin nimi ja avaa sitten Knowledge Base. Valitse joko omat sivusi tai alla oleva esimerkkiartikkeli.

Tuo omat sivusi

1. Valitse Knowledge Base -näkymässä Add Website. Valitse yksittäisen sivun tai verkkosivuston tuonti tarpeesi mukaan.
2. Anna julkinen URL-osoite. Jos tuot verkkosivuston, tarkista löydetyt sivut ja valitse vastauksia varten palvelu-, hinnoittelu-, prosessi- ja UKK-sivut.
3. Tarkista tuotu teksti. Varmista hintojen valuutta ja verojen käsittely sekä se, etteivät vanhat kampanjat tai asiaankuulumattomat sivut ole päätyneet lähteiksi.
4. Odota käsittelyn valmistumista. Ota käyttöön tai julkaise hallintapaneelissa näkyvät odottavat tietomuutokset ennen asennetun widgetin testaamista.

Aloita muutamasta selkeästä sivusta. Sivusto voi näyttää houkuttelevan hintakortin mutta sijoittaa sen ehdot muualle; agentti tarvitsee molemmat. Pelkän etusivun tuonnista voivat puuttua asennuksen ehdot, maantieteelliset rajaukset tai palautuskäytäntö, jotka tekevät vastauksesta hyödyllisen.

Käytä Kestrel Kitchensin lähdeaineistoa

Voit toistaa esimerkin julkaisematta ensin verkkosivustoa lisäämällä tiedot suoraan:

1. Valitse Knowledge Base -näkymässä Add Article. Tämä luo Untitled-artikkelin ja avaa Edit Article -näkymän.
2. Kirjoita Title-kenttään Kestrel Kitchens: services, prices and process. Valitse Content-kohdassa Plain Text ja liitä paketin knowledge.txt.
3. Valitse Save ja odota, kunnes artikkelin tila on Ready. Varmista, että sen otsikko näkyy Knowledge Basen luettelossa.

Tallennettu artikkeli säilyttää hintojen ja aikataulujen ehdot. Sen kuvitteelliset tiedot vastaavat esimerkkisivustoa.

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.

Lähde jättää rahoituksen tarkoituksella määrittelemättä. Näin voit testata, miten agentti käsittelee todellisen tietoaukon. Pidä oikean sivuston lähdesivut ajan tasalla ja käytä tuettuja päivitysasetuksia, kun niitä on saatavilla; Knowledge Base -opas kertoo lähteiden järjestämisestä ja testaamisesta.

Vaihe 2: Mitä chatbotin pitäisi sanoa ja mitä sen ei pidä luvata?

Määritä Main Prompt -ohjeella, miten agentti soveltaa tietoja: vastaa ensin, pidä vastaus hyödyllisenä ja jätä sitovan tarjouksen kaltaiset päätökset tiimille.

Kestrelin tapauksessa huoneen mitat kertovat projektin mittakaavan. Ne eivät määritä kalusteita, kodinkoneita tai rakennustöitä. Agentin pitäisi selittää lähteen arvonlisäverollinen suunnitteluvaiheen hintahaarukka £18,000 ja £45,000 välillä laskematta pinta-alasta tarkempaa hintaa.

Hinnat ovat oppaan kuvitteellista aineistoa. Tarkoituksena on säilyttää ero lähteen tietojen ja tiimisi vielä tehtävänä olevan päätöksen välillä.

1. Valitse Identity-näkymän Main Prompt -kortista Edit.
2. Liitä alla oleva ohje kokonaisuudessaan. Anna sen tallentua ja avaa editori uudelleen varmistaaksesi tallennetun tekstin.
3. Pidä yritystiedot Knowledge Basessa. Käytä ohjetta vastaustyyliin, tietojen keräämiseen ja ihmistä edellyttäviin päätöksiin.

Main Prompt on ohjekenttä. Alla ja paketissa oleva koko teksti on tarkoitettu kopioitavaksi.

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.

Avaa AI Preview ja kysy How long does a full kitchen renovation take?. Paikallisessa vertailutestissä agentti vastasi kartoituksen ja suunnittelun kestävän kahdesta kolmeen viikkoa ja asennuksen neljästä kahdeksaan viikkoa sen jälkeen, kun materiaalit ovat saatavilla. Sekä kesto että siihen liittyvä ehto ovat olennaisia.

Aloita uusi keskustelu ja kysy Do you offer financing?. Oikea vastaus kertoo, ettei lähde vahvista rahoitustarjousta, ja ohjaa kysymyksen suunnittelijalle. Varmempi sanamuoto ohjeessa ei tuottaisi puuttuvaa yritystietoa.

Vaihe 3: Miten keräät tarjouspyyntöjä chatissa?

Smart Data Gathering kysyy valitut tiedot keskustelun aikana ja tallentaa kävijän antamat vastaukset. Kerää tarjouspyyntöön vain ne tiedot, joita suunnittelija tarvitsee jatkoyhteydenottoon.

1. Avaa Actions & MCPs, ota Smart Data Gathering käyttöön ja valitse Edit Action. Aseta Name-kentän arvoksi Quote enquiries ja Description-kentän arvoksi Capture contact and project details for a kitchen design enquiry. Tallennetusta nimestä tulee kortin otsikko.
2. Lisää alla olevat rivit Data to collect -kohtaan. Säilytä englanninkieliset Data point -nimet esimerkkiä toistaessasi; yhteystietojen nimet yhdistyvät erityisellä tavalla Inboxin kävijäkenttiin.
3. Aseta Reason for collecting information -kentän arvoksi So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Valitse When to ask for data -asetukseksi After exchanging a few messages ja How to ask for data -asetukseksi Subtle.
5. Tallenna Action. Kysy AI Preview -näkymässä hyödyllinen palvelua koskeva kysymys ennen tarjouksen pyytämistä ja tarkista tallennetut tiedot Inbox-näkymästä.

Kysymykset kuvaavat kerättävät tiedot. Ajoitus- ja tyyliasetukset ohjaavat kysymisen ajankohtaa; testaa myös varsinainen keskustelu.

Nimi, sähköposti, postinumero ja projektin tyyppi ovat tämän esimerkin täydellisen tarjouspyynnön pakolliset tiedot. Aikataulu on vapaaehtoinen, kuten Main Prompt kertoo. Tämä liiketoimintavaatimus on erillinen keskustelun tiedonkeruuasetuksista; vaihe 8 varmistaa pakolliset kentät ennen CRM-pyynnön lähettämistä.

Agentin pitäisi vastata yleiseen hintakysymykseen vaatimatta sähköpostiosoitetta vastauksen ehdoksi. Kävijä voi myös kieltäytyä tietojen antamisesta. Varmista viestillä I am only researching. I do not want to leave contact details., että keskustelu pysyy hyödyllisenä ilman toistuvia pyyntöjä.

Minne kerätyt tiedot tallentuvat?

Avaa keskustelu Inbox-näkymässä. Tavalliset yhteystiedot näkyvät kävijäkentissä; muut kerätyt arvot pysyvät keskustelun yhteydessä, ja ne voi viedä Export Gathered Data -toiminnolla.

Where to send data -kohdan Email new leads ilmoittaa kaikille agentin ylläpitäjille, kun sähköpostiosoite tai puhelinnumero kerätään ensimmäisen kerran. Pelkkä nimi ei lähetä sähköpostia. Preview ja Simulation eivät lähetä näitä ilmoituksia, joten varmista ilmoituksen saapuminen omaan ylläpitäjän sähköpostiisi hallitulla testillä asennetussa widgetissä ennen kuin luotat sähköpostitoimitukseen. Paikallisessa esimerkissä ulkoisten sähköpostien toimitus on pois käytöstä.

Smart Data Gathering -dokumentaatio kuvaa tietojen keräämisen, ilmoitukset ja viennit. Selitä omalla sivustollasi, miksi pyydät tietoja, ja linkitä tietosuojaseloste widgetiin. Chatbotin tietosuojaopas auttaa arvioimaan laajempaa tiedonkulkua.

Vaihe 4: Miten annat ihmisen jatkaa keskustelua?

Human Handoff siirtää keskustelun tiimillesi; ihminen ottaa sen sitten vastuulleen Inbox-näkymässä ja vastaa samalle kävijälle.

Valmistele siirto ennen widgetin julkaisemista. Suunnittelijaa pyytävän ei pitäisi joutua täyttämään tarjouslomaketta ensin, eikä agentin pidä antaa ymmärtää, että joku on paikalla henkilökunnan työaikojen ulkopuolella.

1. Ota Actions & MCPs -näkymässä Human Handoff käyttöön ja avaa Edit Action.
2. Pidä vakiosäännöt Media Message, User Frustration, Customer Support Suggestion ja Lack Of Knowledge käytössä; jätä Irrelevant Advice pois käytöstä. Main Prompt kertoo jo, milloin suunnittelijaa tarjotaan. Testattu esimerkki käyttää näitä vakiosääntöjä lisäämättä mukautettuja sääntöjä.
3. Määritä alla olevat viestit ja saatavuus ja tallenna. Pidä Email notifications pois käytöstä harjoituksen aikana ja tarkista siirto suoraan Inboxissa.

Käytä aikoja, jolloin ihminen todella seuraa Inboxia. Kuvitteellinen aikataulu ei lupaa välitöntä vastausta.

Kysy sivustolla henkilökunnan työaikana Can I speak to a designer?. Vahvista siirto, jos agentti pyytää sitä. Avaa keskustelu Inboxissa ja valitse Assign to me, jos sitä ei ole osoitettu kenellekään, tai Take over, kun kyseinen toiminto näkyy. Lähetä ihmisen vastaus ja varmista, että kävijä saa sen. Käytä Reassign to AI -toimintoa, kun tekoälyn pitäisi jatkaa.

Tarkista vastuu ja ihmisen vastauksen toimitus, älä pelkästään agentin tarjousta siirtää keskustelu.

Toista testi uudessa keskustelussa määritettyjen työaikojen ulkopuolella. Agentin pitäisi kertoa saatavuudesta ja tarjota määritetty jatkoyhteydenottotapa. Jos muutat aikataulua tilapäisesti tätä testiä varten, palauta todellinen aikataulu sen jälkeen. Human Handoff -dokumentaatio selittää asetukset ja Inboxin työnkulun.

Chatbotin ihmiselle siirron oppaassa tarkistetaan erikseen, kenen vastuulla keskustelu on, miten se palautetaan AI:lle ja mitä tapahtuu työajan ulkopuolisissa virhetilanteissa.

Vaihe 5: Miten sovitat widgetin verkkosivustosi ilmeeseen?

Määritä ulkoasu ja kiinteät tekstit kohdassa Channels → Your Website. Tee tervetuloviestistä riittävän täsmällinen, jotta kävijä ymmärtää, mitä hän voi kysyä.

Ulkoasu

1. Avaa Appearance. Valitse Kestrelille Custom-teema, jossa on valkoinen tausta, tummanvihreä otsake ja korostusväri (#315448) sekä valkoinen otsaketeksti. Säilytä oletustekstikoko ja pyöristetyt säätimet.
2. Napsauta Branding → AI Agent Avatar -kohdassa avatarin latauskuvaketta, valitse paketista website/kestrel-avatar.png ja valitse rajausikkunassa Upload.
3. Aseta Widget window max width -arvoksi 400px ja Widget window max height -arvoksi 520px. Valitse avauspainikkeen kooksi Small, sijoita se oikealle ja käytä tekstinä Ask about your kitchen. Teksti on käytettävissä pienessä avauspainikkeessa. Tarkista esikatselussa sen sijainti suhteessa sivustosi evästebanneriin ja muihin kelluviin säätimiin.
4. Jätä Auto-open Widget pois käytöstä. Widgetin avaaminen jokaisella sivulatauksella keskeyttää selaamisen etenkin puhelimella.

Tarkista esikatselu värejä valitessasi. Testi varsinaisella sivustolla on silti tärkeä, sillä avauspainike jakaa tilan sivustosi muiden säätimien kanssa.

Tekstisisältö

Avaa Text Content ja käytä näitä arvoja:

Keskustelunavausten pitäisi käynnistää hyödyllisiä tehtäviä. Vastuuvapausteksti kertoo kävijälle, mitkä päätökset edellyttävät edelleen suunnittelijaa.

Agentti voi vastata kävijän kielellä. Kiinteän tervetuloviestin ja widgetin tekstien kääntäminen on erillinen asetus kohdassa Other languages, joka on käytettävissä maksullisissa tilauksissa. Testaa monikielisellä sivustolla sekä vastaus että kiinteät käyttöliittymätekstit; monikielisen chatbotin opas selittää tämän eron.

Ulkoasumuutosten välittyminen välimuistissa oleviin kävijäistuntoihin voi kestää muutaman minuutin. Lataa sivu uudelleen ennen kuin päättelet tallennetun muutoksen epäonnistuneen. Hide Quickchat AI Branding edellyttää Professional-tilausta tai sitä laajempaa tilausta; white label -opas käsittelee muut tarkistettavat kohteet.

Vaihe 6: Miten asennat chatbotin verkkosivustollesi?

Asenna Widget sivuston yhteiseen sivupohjaan tai käytä tuettua alustaintegraatiota. Kelluvan Widgetin täytyy toimia sivulla, jota kävijä selaa.

1. Avaa Channels → Your Website → Install.
2. Ota julkiselle widgetille käyttöön Widget & Embed access.
3. Valitse sivustosi asennustapa ja kopioi tälle agentille näytetty koodikatkelma tai Scenario ID.
4. Julkaise muutos, avaa julkinen sivusto ja kysy kysymys, jonka vastauksen tiedät löytyvän Knowledge Basesta.

Kopioi tiedot tämän agentin Install-näkymästä. Sen Scenario ID on widgetin julkinen tunniste, ei yksityinen API-avain.

Mikä tahansa verkkosivusto: liitä Widget-koodikatkelma ennen sulkevaa body-tunnistetta

Valitse Install manually with code ja kopioi Widget-koodikatkelma. Nykyinen latauskoodi on tämän muotoinen:

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

Korvaa YOUR_SCENARIO_ID Install-näkymän arvolla. Liitä koko katkelma kerran, välittömästi ennen </body>-tunnistetta yhteiseen sivupohjaan tai käytä sivustotyökalun koko sivuston alatunnistekenttää. Latauskoodi lisää komentosarjan sivun body-osaan, joten sen sijoittaminen head-osaan ennen body-osan olemassaoloa voi estää latautumisen.

Sijainnilla on merkitystä. Iframe-pohjainen HTML-lohko on erillinen sivu, eikä se sovellu tähän kelluvaan Widgetiin.

Erillinen Embed-vaihtoehto sijoittaa chatin sivun sisältöelementtiin. Käytä sen luomaa koodikatkelmaa, jos haluat sivun sisään upotetun chat-osion. Koodin suoraan sivuun lisäävä HTML-lohko voi tukea tätä tapaa; koodin iframe-kehykseen eristävä sivustotyökalun lohko on eri asia. Katso Website-kanavan dokumentaatio.

WordPress: asenna virallinen lisäosa

1. Avaa WordPressissä Plugins → Add New, hae Quickchat AI Agent ja valitse Install Now ja Activate.
2. Avaa Settings → Quickchat AI Agent.
3. Liitä Scenario ID Quickchat AI:n Install-näkymästä ja valitse Save Changes.
4. Avaa julkinen sivu ja tarkista widget. Käytä joko lisäosaa tai manuaalista koodikatkelmaa, jotta et asenna latauskoodia kahdesti.

Tarvitset WordPress-asennuksen ja tilauksen, jotka sallivat lisäosat. WordPress-chatbotin opas esittelee lisäosan käyttöliittymän ja WordPress-kohtaiset tarkistukset.

Squarespace: käytä alatunnisteen koodilisäystä (Footer Code Injection)

1. Avaa sivuston Code Injection -paneeli. Käytä hallintapaneelin asetushakua, jos tilisi navigaatio on erilainen.
2. Liitä koko Widget-koodikatkelma Footer-kenttään ja tallenna.
3. Avaa julkaistu sivu erilliseen selainvälilehteen ja testaa vastaus.

Squarespacen Code Injection on käytettävissä Core-, Plus- ja Advanced-tilauksissa sekä joissakin vanhoissa tilauksissa. Alatunnisteen koodilisäys sijoittaa koodin ennen </body>-tunnistetta koko sivustolla. Käytä sitä kelluvalle widgetille; sivukohtainen iframe-lohko ei vastaa sitä. Tämä mukautettu koodi ei ulotu Squarespacen kassasivuille.

Wix: lisää mukautettu koodi body-osan loppuun (Body - end)

1. Avaa sivuston hallintapaneelissa Settings → Custom Code ja sitten + Add Custom Code.
2. Liitä Widget-koodikatkelma ja anna sille nimeksi Quickchat AI widget.
3. Kohdista se valinnalla All pages, valitse Body - end ja sitten Apply.
4. Testaa julkaistu sivusto, myös siirtyminen toiselle sivulle.

Wix edellyttää mukautettua koodia varten julkaistua sivustoa, johon on yhdistetty verkkotunnus. Käytä tälle kelluvalle widgetille koko sivuston Custom Code -asetusta.

Webflow: käytä alatunnistekoodia ja julkaise

1. Avaa Site settings → Custom code.
2. Liitä Widget-koodikatkelma Footer code -kenttään ja valitse Save changes.
3. Valitse Publish halutulle verkkotunnukselle ja testaa sitten julkaistu URL-osoite.

Webflown mukautetun koodin asetukset edellyttävät soveltuvaa maksullista Workspace-tilausta tai aktiivista Site-tilausta. Pelkkä asetuksen tallentaminen ei julkaise sitä.

Shopify: valitse nykyisen agentin koodikatkelma tai Shopify-sovellus

Jos käytät jo rakentamaasi Kestrel-agenttia, lisää sen Widget-koodikatkelma välittömästi ennen </body>-tunnistetta kohdassa Online Store → Themes → Edit code → layout/theme.liquid, tallenna ja tarkista verkkokauppa. Tee teemasta varmuuskopio ennen muokkaamista ja tarkista asennus uudelleen teeman vaihtamisen jälkeen. Tämä tapa näyttää valitsemasi agentin; se ei määritä tuote- tai tilauskohtaisia Action-toimintoja.

Kauppaan keskittyvää agenttia varten Quickchat AI:n Shopify-sovelluksen käyttöönotto yhdistää kaupan oman käyttöönottoprosessinsa kautta. Käytä yhdistämisen jälkeen Enable Widget in Shopify Theme Editor -toimintoa tai avaa Online Store → Themes → Edit theme → App embeds. Ota Quickchat AI Widget käyttöön ja tallenna. Shopifyn sovellusupotusten dokumentaatio selittää teeman säätimet; ota sovellusupotus uudelleen käyttöön vaihtaessasi julkaistua teemaa.

Yllä olevat sivustotyökalujen polut tarkistettiin virallisesta dokumentaatiosta. Vaiheiden kuvakaappaukset näyttävät Kestrelin esimerkkisivuston ja aidon paikallisen widgetin; ne eivät ole kuvakaappauksia jokaisen sivustotyökalun kirjautuneilta tileiltä.

Tarkista koodikatkelma ennen agentin vianmääritystä

Nämä valinnaiset tarkistukset käyttävät antamiasi arvoja:

• Tarkista Widget-koodikatkelma. Vertaa liitettyä koodia annettuun Scenario ID -tunnisteeseen. Tämä ei nouda verkkosivustoasi.
• Vertaa käyttöönottotapoja. Vertaa ilmoittamiasi kanavia, sivuston käyttöoikeuksia ja vaadittuja ominaisuuksia Quickchat AI:n asennusvaihtoehtoihin. Tämä ei tutki sivustoasi tai tiliäsi.

Yhteensopivassa selaimessa nämä tarkistukset ovat käytettävissä myös sivustotyökaluina. Linkit avaavat tavalliset lomakkeet.

Vaihe 7: Miten testaat chatbotin ennen kävijöitä?

Testaa vastaus, tallennetut tiedot ja vastauksen toimitus erikseen. AI Preview ja Simulation Testing auttavat arvioimaan toimintaa; julkaistu sivusto osoittaa, että kävijä voi käyttää asennettua widgetiä.

Suorita erilliset kysymykset Simulation Testing -toiminnolla

Avaa Testing → Create Dataset, anna nimeksi Kestrel Kitchens: website launch checks ja valitse Paste messages. Lisää alla olevat kestoa, hintaa ja rahoitusta koskevat kysymykset erottaen ne rivillä, joka sisältää ---. Pelkkä rivinvaihto säilyttää tekstin yhdessä testiviestissä. Aseta Evaluation criteria tarkistamaan tiedot ja vastausten tiiviys ja valitse Run → Start Run. Paketti sisältää täsmälleen käytetyt viestit ja kriteerit.

Jokainen aineiston rivi aloittaa erillisen keskustelun. Käytä Simulationia näihin itsenäisiin kysymyksiin; suorita monivaiheiset tarjous- ja ihmiselle siirtämisen tarkistukset yhdessä AI Preview- tai verkkosivustokeskustelussa. Tarkista Action-loki ja vastaanottaja erikseen, sillä keskustelutekstin arvioija ei voi varmistaa ulkoista toimitusta.

Avaa valmistunut testiajo ja tarkista vastaukset. Tämä hintavastaus säilyttää suunnitteluvaiheen hintahaarukan; vastauksen pisteytys ei osoita toimitusta toiseen järjestelmään.

Käytä itsenäisten tapausten välillä uutta keskustelua. Sivun uudelleenlataus voi jatkaa olemassa olevaa keskustelua, joten käytä widgetin uuden keskustelun toimintoa, kun tarvitset uuden testin.

Tarkista sivusto puhelimella

Alle 768 CSS-pikselin levyisillä näytöillä avoin widget käyttää koko näytön asettelua. Tarkista, että voit avata sen, kirjoittaa näppäimistön ollessa näkyvissä, vierittää keskustelua ja sulkea sen palataksesi sivustolle.

Varmista lopuksi, että oikea ihminen vastaa Inboxista. Hyvä tekoälyvastaus ei osoita ihmisen asiakaspalvelupolun toimivan. Toista pieni joukko näistä tarkistuksista lähteiden, ohjeiden, Action-toimintojen tai sivuston teeman muuttamisen jälkeen.

Vaihe 8: Miten lähetät täydellisen tarjouspyynnön CRM-järjestelmään?

Valinnainen API Action voi lähettää tallennetut kentät HTTP-vastaanottajalle, kun keskustelussa on kaikki pakolliset tiedot. Verkkosivuston peruschatbot on jo käyttökelpoinen ilman tätä laajennusta.

On erotettava toisistaan yhteystiedon kerääminen ja täydellinen tarjouspyyntö. Quickchat AI asettaa lead_captured-arvon kerätessään uuden vakiomuotoisen yhteystietokentän, myös nimen. Pelkkä lippu ei osoita, että sähköposti, postinumero tai projektin tyyppi ovat mukana.

Alusta tarkistaa jokaisen ehdon. Malli kerää tiedot; ehdot määrittävät, milloin pyyntö on valmis suoritettavaksi.

Valmistele vastaanottaja

Käytä hallitsemaasi CRM- tai automaatiorajapinnan päätepistettä, joka hyväksyy alla olevan JSON-rungon. Paketti sisältää pienen paikallisen esimerkkivastaanottajan lukijoille, jotka haluavat tarkistaa pyynnön ennen CRM:n yhdistämistä. Sen asennusohjeissa luodaan yksityinen tunniste ja selitetään väliaikaisen HTTPS-päätepisteen julkaiseminen. Lähetä esimerkkivastaanottajalle vain kuvitteellista testidataa.

Jos haluat sen sijaan hallitun integraation, seuraa Google Sheets -raportoinnin opasta tai mukautetun CRM-integraation opasta. Älä ota käyttöön kahta työnkulkua, jotka molemmat luovat saman liidin.

Määritä yksi automaattinen API Action

1. Avaa Actions & MCPs → Custom Actions → Add Action → API Action. Valitse Create manually, jos kuvaukseen perustuva luontityökalu avautuu.
2. Aseta API Action Name -kentän arvoksi Send quote enquiry.
3. Jätä What to ask the user first tyhjäksi. Tämä Action lukee Smart Data Gatheringin jo tallentamat kentät; se ei pyydä mallia täyttämään toista parametrijoukkoa.
4. Valitse API Endpoint -kohdassa POST ja anna vastaanottajasi HTTPS-osoite polulle /enquiries.
5. Lisää alla olevat otsakkeet, runko ja ehdot ja tallenna sekä aktivoi Action.

Anna tunniste vain Actionin otsakeasetuksessa. Älä lisää sitä ohjeeseen, sivuston koodikatkelmaan tai kävijän keskusteluun. Esimerkkivastaanottajan README kertoo sen luomisesta; käytä oikeassa integraatiossa CRM-järjestelmäsi dokumentoitua todennusta.

Valitse Body-välilehdessä JSON ja kirjoita:

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

Käytä Add AI Data -toimintoa vastaavien sisäänrakennettujen ja metatietoarvojen lisäämiseen. conversation_id yksilöi keskustelun. Muut arvot tulevat tallennetuista kentistä; englanninkieliset yhteystietojen nimet yhdistyvät arvoihin visitor_name ja visitor_email, kun taas Project type muuttuu muotoon project_type. Muuttujien dokumentaatio selittää nämä vastaavuudet.

Valitse When to run -kohdassa When metadata matches. Lisää Run when -kohtaan kaikki viisi riviä; metatietoehdot yhdistetään AND-operaatiolla:

Näissä tekstikentissä is true hylkää tyhjät arvot sekä epätotta vastaavan tekstin. exists tarkistaa vain avaimen olemassaolon; tallennettu tyhjä merkkijono voi läpäistä sen. Alla olevat testit osoittavat tiukemman ehdon merkityksen. Tämä varmistaa käyttökelpoisen tekstin antamisen, ei kävijän henkilöllisyyden tai kiinteistötietojen riippumatonta vahvistamista.

Käytä seuraavaa API Action Description -tekstiä:

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.

Kaksi ensimmäistä viidestä tallennetusta ehdosta. Lisää taulukon jokainen rivi; When metadata matches tarkistaa ne tekoälyn vastausvuoron jälkeen ilman, että agentti valitsee Actionin.

Actionia yritetään kerran keskustelun aikana, kun kaikki ehdot täyttyvät. Sitä ei suoriteta uudelleen valinnaisen aikataulun saapuessa, eikä epäonnistunutta lähetettyä pyyntöä yritetä automaattisesti uudelleen samassa keskustelussa. Säilytä aikataulu Inboxissa suunnittelijalle tai rakenna erillinen luonti- ja päivitysintegraatio, jos CRM tarvitsee myöhemmät muutokset.

Pyyntö suoritetaan tekoälyn vastausvuoron jälkeen, eikä sen vastausta lisätä chatiin. Siksi Main Prompt kuittaa kävijän tiedot väittämättä CRM:n hyväksyneen niitä. Varmista toimitus Action-lokista ja vastaanottajalta. Automaattisen Actionin dokumentaatio kuvaa tämän suoritustavan.

Testaa ensin osittaiset tiedot ja sitten täydellinen tarjouspyyntö

Ensimmäinen versio käytti pakollisille tekstikentille exists-ehtoa. Sam antoi nimen ja seuraavassa viestissä sähköpostin. Smart Data Gathering oli jo luonut tyhjät postinumero- ja projektityyppiarvot, joten avaimet olivat olemassa ja Action lähetti puutteellisen pyynnön. Tämä myös kulutti keskustelun ainoan yrityksen.

Korjauksessa neljän tekstikentän ehdot muutettiin muotoon is true ja muut asetukset säilytettiin. Toista testi uudessa keskustelussa antamalla toisella vuorolla vain sähköposti. Actionin pitäisi odottaa jäljellä olevia projektitietoja.

Tämä on yksi havaittu keskustelu, ei tuotannon onnistumisprosentti. Toista se uudessa keskustelussa, tarkista tallennetut kentät jokaisen vuoron jälkeen ja tarkista pyyntö omassa päätepisteessäsi.

Varsinainen Action-kutsu palautti HTTP 201 -vastauksen. Avaa sen tiedot tarkistaaksesi pyynnön; alla oleva tallennettu tietue näyttää vastaanottajan tallentamat tiedot.

Yksi todellinen tallennettu tietue todennetusta esimerkkivastaanottajasta. Tämä on tarjouspyyntö, ei vahvistettu tarjous tai varaus.

Esimerkissä käytettiin paikallista vastaanottajaa ja tallennettiin toteutunut HTTP-toimitus. Ylläpidetty Quickchat AI -agentti tarvitsee julkisesti saavutettavan HTTPS-päätepisteen; tietokoneesi localhost-osoite ei ole palvelun saavutettavissa.

Jos mitään ei saavu, tarkista Actionin View logs ja keskustelun tallennetut metatiedot. Puuttuvat arvot, pois käytöstä oleva Action ja HTTP-virhe vaativat erilaiset korjaukset. Korjaa määritykset ja testaa automaattinen käynnistys uudessa keskustelussa; uudelleenyrityksen pyytäminen samassa chatissa ei nollaa kerran keskustelussa tehtävää yritystä.

Miksi chatbot puuttuu tai näyttää vanhoja asetuksia?

Tarkista julkaistu sivu, asennuksen sijainti ja agentin käyttöoikeudet ennen ohjeen muuttamista. Selaimen latausongelma on eri asia kuin vastauksen laatuongelma.

Jos selain ilmoittaa estetystä resurssista, tarkista täsmällinen Content Security Policy- tai estotyökalun virhe. Vältä sivustosi suojausten poistamista kokonaan. Testaa julkinen sivu HTTPS-yhteydellä ja käytä vaadittuihin asetuksiin kanavan dokumentaatiota.

Mitä verkkosivuston chatbot maksaa?

Tilaus ja käyttökiintiö kattavat tekoälypalvelun; sivustosi tilaus ja valinnaiset integraatiot ovat erillisiä kustannuksia.

AI-krediitti ei tarkoita yhtä keskustelua. Keskustelu voi sisältää useita tekoälyvastauksia, ja eri mallivalinnoilla voi olla eri krediittihinta. Sisällytä Preview ja Simulation testausbudjettiin. Arvioi käyttömääräsi nykyisten hintojen ja käyttökiintiöiden sekä chatbotin kustannusoppaan avulla.

Voiko ChatGPT tai Claude auttaa chatbotin käyttöönotossa?

Quickchat AI:n tilinhallintayhteyden avulla yhteensopiva avustaja voi määrittää tuetut agenttiasetukset ja valmistella testejä näiden tiedostojen pohjalta.

Yhdistä oma tilisi Quickchat AI in ChatGPT- tai Quickchat AI in Claude -yhteydellä Manage with AI -oppaan mukaan. Tuetut työkalut kattavat tiedot, Main Prompt -ohjeen, keskustelunavaukset, Human Handoffin, HTTP Action -toiminnot, testauksen ja käyttöönoton koodikatkelman.

Viimeistele Smart Data Gathering ja widgetin yksityiskohtaiset Appearance-asetukset hallintapaneelissa. Sinun on myös valtuutettava ulkoiset tilit ja asennettava koodikatkelma sivustosi asetuksiin. Tiliyhteys on tarkoitettu agenttisi hallintaan; se on erillinen asia kuin agentin tarjoaminen MCP-työkaluna.

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.

Usein kysytyt kysymykset

Miten lisään tekoälychatbotin verkkosivustolleni?

Luo agentti Quickchat AI:ssa, lisää yrityksesi tiedot, määritä Main Prompt, Smart Data Gathering ja Human Handoff ja asenna sen Widget lisäosalla tai mukana toimitettavalla koodikatkelmalla. Testaa julkaistulla sivustolla lähteeseen perustuva vastaus, yhteystietojen tallennus ja ihmisen vastauksen saapuminen.

Voinko lisätä mukautetun ChatGPT:n verkkosivustolleni?

Voit lisätä ChatGPT-tyylisen avustajan, joka on opetettu omien sivujesi tiedoilla. Tässä oppaassa otetaan Quickchat AI -agentti käyttöön sen verkkosivustowidgetin kautta, joten kävijät voivat keskustella sivustollasi kirjautumatta ChatGPT:hen. Sen tietoja, ohjeita ja integraatioita hallitaan Quickchat AI:ssa.

Voinko lisätä tekoälychatbotin verkkosivustolleni ilmaiseksi?

Quickchat AI:n Free-tilaus sopii henkilökohtaiseen, ei-kaupalliseen opiskeluun ja sisältää 50 AI-krediittiä kuukaudessa. Yrityksen verkkosivusto tai asiakkaille suunnattu myynti- ja asiakaspalvelukäyttö edellyttää kaupallisen käytön sallivaa tilausta. Sivustotyökalun tilaukset ovat erillisiä, ja myös testaus kuluttaa AI-krediittejä.

Tarvitseeko minun koodata tai antaa API-avain?

Peruskokoonpano käyttää hallintapaneelin asetuksia ja lisäosaa, sovellusupotusta tai mukana toimitettavaa komentosarjaa. Sivuston koodikatkelma sisältää julkisen Scenario ID -tunnisteen, ei yksityistä API-avainta. Valinnaisen CRM Action -toiminnon yhdistäminen edellyttää sopivaa päätepistettä ja sen todennusta; säilytä tunnistetieto Actionin asetuksissa.

Voiko verkkosivuston chatbot kerätä liidejä ja tarjouspyyntöjä?

Kyllä. Smart Data Gathering kysyy valitut kentät keskustelun aikana ja tallentaa ne Inboxiin. Email new leads voi ilmoittaa agentin ylläpitäjille sähköpostiosoitteen tai puhelinnumeron keräämisen jälkeen. API Action voi lähettää pakolliset tallennetut kentät määritettyyn vastaanottajaan; pelkkä kerätty nimi ei osoita tarjouspyyntöä täydelliseksi.

Voiko ihminen ottaa keskustelun vastuulleen?

Kyllä. Määritä Human Handoffiin henkilökunnan työajat ja työajan ulkopuolinen viesti. Valitse Inboxissa Assign to me keskustelulle, jota ei ole osoitettu kenellekään, tai Take over, kun kyseinen toiminto näkyy, ja vastaa sitten kävijälle. Reassign to AI palauttaa keskustelun agentille.

Toimiiko se WordPressissä, Shopifyssa, Squarespacessa, Wixissä ja Webflow’ssa?

Jokaiselle on asennustapa. Käytä virallista WordPress-lisäosaa, Shopifyn sovellusupotusta kaupan agentin yhdistämisen jälkeen tai olemassa olevan agentin sopivaa koko sivuston alatunnisteeseen tai body-osan loppuun sijoitettavaa koodikatkelmaa. Lisäosaoikeudet ja mukautetun koodin tilausvaatimukset vaihtelevat sivustotyökalun mukaan.

Miksi chatbot ei näy verkkosivustollani?

Tarkista julkaistu sivu, oikea Scenario ID ja koodikatkelman sijainti sivun body-osan lopussa. Poista vanhat päällekkäiset asennukset ja vältä iframe-pohjaisia lohkoja kelluvalle Widgetille. Jos se avautuu mutta ei vastaa, tarkista Widget & Embed access ja käytettävissä olevat AI-krediitit.

Hidastaako chatbot verkkosivustoani?

Widgetin latauskoodi latautuu asynkronisesti, mutta se lisää silti JavaScriptiä ja verkkopyyntöjä. Vertaa latautumisen ja vuorovaikutuksen suorituskykyä ennen asennusta ja sen jälkeen edustavilla sivuilla ja puhelimella. Asynkroninen lataus ei osoita suorituskykyvaikutusta olemattomaksi.

Toimiiko verkkosivuston chatbot puhelimissa?

Avoin widget käyttää koko näytön asettelua alle 768 CSS-pikselin leveydellä. Testaa avauspainike, näppäimistö, vieritys ja sulkemistoiminto puhelimella. Jätä Auto-open Widget pois käytöstä, jos automaattinen avaaminen keskeyttäisi selaamisen.

Voiko chatbot vastata kävijöideni kielillä?

Agentti voi vastata kävijän kielellä. Kiinteän tervetulotekstin, keskustelunavausten ja widgetin tekstien kääntäminen on erillinen maksullisen tilauksen asetus. Testaa sekä vastauksen tiedot että käyttöliittymätekstit jokaisella kielellä, jota aiot tukea.