Come aggiungere un chatbot AI al tuo sito web senza codice

Puoi aggiungere un chatbot AI al tuo sito web fornendo a un Agente le conoscenze della tua attività, configurandone le risposte e installando un widget di chat tramite un plugin o uno script fornito. Il chatbot per siti web di Quickchat AI riunisce conoscenze, impostazioni delle conversazioni e Inbox del team. I visitatori fanno domande sul tuo sito senza creare un account.

Questo tutorial configura Kestrel Kitchens, un’azienda immaginaria di progettazione di cucine. Un visitatore chiede quanto dura una ristrutturazione, verifica il costo indicativo di una cucina di 3 per 4 metri e richiede un preventivo. L’Agente risponde usando le informazioni aziendali, raccoglie i dettagli del progetto e consente a un progettista di proseguire la conversazione.

La configurazione di base non richiede programmazione. Segui i passaggi su conoscenze e istruzioni, raccolta dei contatti e trasferimento a una persona, poi installa il widget. Un’API Action facoltativa invia le richieste complete a un altro sistema.

Scarica il kit di configurazione di Kestrel Kitchens per ottenere sito di esempio, conoscenze, Main Prompt, impostazioni e messaggi di prova. Sono file modificabili da seguire nella dashboard, non un’importazione dell’Agente con un clic.

Gli screenshot e gli artefatti copiabili del kit, dei prompt e della configurazione restano in inglese per consentire di riprodurre l’esempio testato.

Cosa farà il chatbot del sito web?

Il chatbot risponde alle domande usando i tuoi contenuti, salva i dettagli di una richiesta di ricontatto e trasferisce le conversazioni al team quando serve una persona.

Questi risultati richiedono verifiche diverse. Una fascia di prezzo corretta proviene dalla Knowledge Base. Una richiesta di preventivo richiede dati di contatto e dettagli del progetto in Inbox. Un trasferimento richiede che una persona prenda in carico la conversazione e invii una risposta che raggiunga il visitatore.

Il percorso del visitatore nell’esempio. Una richiesta di preventivo registra l’interesse; il progettista deve comunque confermare prezzo e disponibilità.

Cosa serve prima di aggiungere un chatbot?

Servono un account Quickchat AI, informazioni aziendali verificabili e accesso alle impostazioni dei plugin o del codice personalizzato del sito.

1. Crea un account Quickchat AI e completa la registrazione. Usa un Agente separato per questo esercizio, così le informazioni di esempio non influiranno su un servizio clienti esistente.
2. Prepara le pagine dei servizi, le FAQ e le politiche aziendali, oppure usa le conoscenze immaginarie del kit. Sostituisci prezzi e area servita immaginari prima di distribuire il chatbot per un’attività reale.
3. Verifica che il piano del sito consenta il metodo di installazione necessario. WordPress richiede accesso ai plugin; alcuni servizi di creazione siti richiedono un piano a pagamento per il codice personalizzato su tutto il sito.
4. Organizza la presenza di qualcuno che controlli l’Inbox di prova quando testi il trasferimento umano. Tieni a disposizione un browser desktop e un telefono per le verifiche finali sul sito.

Free è destinato all’apprendimento personale non commerciale. Il piano Free include 50 crediti AI al mese. L’impiego aziendale richiede un piano commerciale e i test consumano la stessa quota di risposte delle altre conversazioni AI. Abbonamenti del sito e costi delle API esterne sono separati. La sezione sui costi distingue queste voci.

Passaggio 1: Come si addestra un chatbot sui contenuti del sito?

Aggiungi alla Knowledge Base le pagine che contengono le risposte della tua attività, poi verifica i contenuti importati prima dei test. In questo modo fornisci all’Agente materiale di riferimento per le risposte.

Crea l’Agente per l’esercizio

1. Nella prima schermata di configurazione, seleziona Set up manually. Da una dashboard esistente, usa il + accanto a AI Agent (Add new AI Agent) per creare un Agente separato, poi seleziona Set up manually.
2. In Identity, inserisci Kestrel Kitchens in Name your AI Agent. Incolla main-prompt.txt dal kit in Describe what you want your agent to do. Diventa il Main Prompt dell’Agente, descritto nel Passaggio 2. Seleziona Next.
3. Lascia vuota la Knowledge Base per ora e seleziona Next. Prosegui in External apps senza selezionare un collegamento. In Deployment, seleziona Chat widget, poi Next.
4. In Choose your plan, usa Skip for now per continuare l’esercizio di apprendimento personale, oppure scegli un piano commerciale adatto all’impiego aziendale. Completa o chiudi eventuali offerte facoltative successive.
5. Nella dashboard, conferma il nome dell’Agente in Identity, poi apri Knowledge Base. Scegli le tue pagine oppure l’articolo di esempio fornito di seguito.

Importa le tue pagine

1. In Knowledge Base, seleziona Add Website. Scegli una singola pagina oppure l’opzione di importazione del sito, secondo le tue esigenze.
2. Inserisci l’URL pubblico. Per importare un sito, esamina le pagine individuate e seleziona quelle dedicate a servizi, prezzi, processo e FAQ che devono informare le risposte.
3. Esamina il testo importato. Conferma che i prezzi riportino valuta e trattamento fiscale corretti e che vecchie promozioni o pagine non pertinenti non siano diventate fonti.
4. Attendi il completamento dell’elaborazione. Applica o pubblica eventuali modifiche alle conoscenze in sospeso mostrate nella dashboard prima di testare il widget installato.

Inizia con poche pagine chiare. Un sito può mostrare una scheda prezzi ben visibile ma riportarne le condizioni altrove; all’Agente servono entrambe. Importare solo la homepage può escludere condizioni di installazione, limiti geografici o politiche di rimborso necessari per una risposta utile.

Usa la fonte di Kestrel Kitchens

Per riprodurre l’esempio senza prima pubblicare un sito, aggiungi direttamente le informazioni:

1. In Knowledge Base, seleziona Add Article. Viene creato un articolo Untitled e si apre Edit Article.
2. Inserisci Kestrel Kitchens: services, prices and process in Title. In Content, scegli Plain Text e incolla knowledge.txt dal kit.
3. Seleziona Save e attendi che l’articolo sia Ready. Conferma che il titolo compaia nell’elenco della Knowledge Base.

L’articolo salvato mantiene le condizioni relative a prezzi e tempi. Le informazioni immaginarie corrispondono al sito di esempio.

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.

La fonte lascia volutamente non specificati i finanziamenti. Questo offre un test utile per verificare come l’Agente gestisce una reale lacuna. Per un sito reale, mantieni aggiornate le pagine sorgente e usa le impostazioni di aggiornamento supportate dove disponibili; la guida alla Knowledge Base spiega come organizzare e testare queste fonti.

Passaggio 2: Cosa deve dire il chatbot e cosa non deve mai promettere?

Usa Main Prompt per definire come l’Agente applica le conoscenze: rispondere prima alla domanda, fornire una risposta utile e lasciare al team decisioni come un preventivo definitivo.

Per Kestrel, le dimensioni della stanza indicano l’entità del progetto. Non definiscono mobili, elettrodomestici o lavori edili. L’Agente deve spiegare la fascia di pianificazione della fonte, da £18,000 a £45,000 IVA inclusa, senza calcolare un prezzo più preciso dalla superficie.

Questi prezzi sono dati immaginari del tutorial. L’obiettivo è mantenere la distinzione tra informazioni della fonte e una decisione che spetta ancora al team.

1. In Identity, seleziona Edit sulla scheda Main Prompt.
2. Incolla l’intero prompt qui sotto. Attendi il salvataggio, poi riapri l’editor per confermare il testo memorizzato.
3. Mantieni le informazioni aziendali nella Knowledge Base. Usa il prompt per lo stile delle risposte, il comportamento di raccolta dati e le decisioni che richiedono una persona.

Main Prompt è il campo delle istruzioni. Il testo completo qui sotto e nel kit è la versione copiabile.

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.

Apri AI Preview e chiedi How long does a full kitchen renovation take?. Nel test di controllo locale, l’Agente ha risposto indicando da 2 a 3 settimane per sopralluogo e progettazione, poi da 4 a 8 settimane per l’installazione dopo che i materiali sono disponibili. Contano sia la durata sia la condizione.

Inizia una nuova conversazione e chiedi Do you offer financing?. La risposta corretta riconosce che la fonte non conferma un’offerta e rimanda la domanda a un progettista. Rendere più sicuro il tono del prompt non fornirebbe l’informazione aziendale mancante.

Passaggio 3: Come si raccolgono le richieste di preventivo in chat?

Smart Data Gathering chiede informazioni selezionate durante una conversazione e salva ciò che fornisce il visitatore. Per una richiesta di preventivo, raccogli solo ciò che serve al progettista per ricontattarlo.

1. Apri Actions & MCPs, attiva Smart Data Gathering e seleziona Edit Action. Imposta Name su Quote enquiries e Description su Capture contact and project details for a kitchen design enquiry. Il nome salvato diventa il titolo della scheda.
2. In Data to collect, aggiungi le righe seguenti. Mantieni questi nomi inglesi dei Data point quando riproduci l’esempio; i nomi dei dati di contatto hanno associazioni specifiche ai campi del visitatore in Inbox.
3. Imposta Reason for collecting information su So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Imposta When to ask for data su After exchanging a few messages e How to ask for data su Subtle.
5. Salva l’Action. In AI Preview, poni una domanda utile sui servizi prima di richiedere un preventivo e controlla i dettagli salvati in Inbox.

Le domande descrivono le informazioni da raccogliere. Le impostazioni di tempistica e stile guidano il momento in cui chiederle; testa anche la conversazione effettiva.

Nome, e-mail, codice postale e tipo di progetto sono i dettagli necessari per una richiesta completa in questo esempio. Le tempistiche sono facoltative, come spiega il Main Prompt. Questo requisito aziendale è distinto dalle impostazioni di raccolta nella conversazione; il Passaggio 8 impone la presenza dei campi obbligatori prima dell’invio di una richiesta al CRM.

L’Agente deve rispondere a una domanda generale sui costi senza subordinare la risposta alla comunicazione di un indirizzo e-mail. Un visitatore può anche rifiutare la raccolta. Usa I am only researching. I do not want to leave contact details. per verificare che la conversazione resti utile senza richieste ripetute.

Dove finiscono i dati raccolti?

Apri la conversazione in Inbox. I dati di contatto standard compaiono nei campi del visitatore; gli altri valori raccolti restano associati alla conversazione e possono essere esportati con Export Gathered Data.

In Where to send data, Email new leads avvisa tutti gli amministratori dell’Agente quando viene raccolto per la prima volta un indirizzo e-mail o un numero di telefono. Il solo nome non invia l’e-mail. Preview e Simulation non inviano queste notifiche, quindi verifica la casella e-mail del tuo amministratore con un test controllato sul widget installato prima di fare affidamento sulla consegna delle e-mail. La procedura locale mantiene disattivato l’invio di e-mail esterne.

La documentazione di Smart Data Gathering descrive raccolta, notifiche ed esportazioni. Per il tuo sito, spiega perché chiedi queste informazioni e collega l’informativa sulla privacy nel widget. La guida alla protezione dei dati nei chatbot aiuta a esaminare il flusso dei dati nel suo complesso.

Passaggio 4: Come si consente a una persona di subentrare in chat?

Human Handoff trasferisce una conversazione al team; una persona la prende poi in carico in Inbox e risponde allo stesso visitatore.

Prepara il trasferimento prima di pubblicare il widget. Chi chiede un progettista non deve prima completare il modulo del preventivo e l’Agente non deve suggerire che qualcuno sia online al di fuori degli orari di presenza.

1. In Actions & MCPs, attiva Human Handoff e apri Edit Action.
2. Mantieni attive le regole standard Media Message, User Frustration, Customer Support Suggestion e Lack Of Knowledge; lascia disattivata Irrelevant Advice. Il Main Prompt spiega già quando offrire un progettista. L’esempio testato usa queste regole standard senza aggiungerne di personalizzate.
3. Configura messaggi e disponibilità come indicato sotto, poi salva. Lascia disattivate le Email notifications per l’esercizio e verifica il trasferimento direttamente in Inbox.

Usa orari in cui una persona controlla effettivamente Inbox. L’orario immaginario non promette una risposta immediata.

Durante un intervallo con personale disponibile, chiedi Can I speak to a designer? dal sito. Completa eventuali conferme del trasferimento richieste dall’Agente. In Inbox, apri la conversazione e seleziona Assign to me se non è assegnata, oppure Take over quando compare quel controllo. Invia una risposta umana e conferma che il visitatore la riceva. Usa Reassign to AI quando l’AI deve riprendere.

Verifica la presa in carico e la consegna della risposta umana, oltre all’offerta di trasferimento dell’Agente.

Ripeti in una nuova conversazione al di fuori degli orari configurati. L’Agente deve spiegare la disponibilità e offrire la modalità di ricontatto indicata. Se modifichi temporaneamente l’orario per questa verifica, ripristina poi quello reale. La documentazione di Human Handoff spiega le impostazioni e il flusso in Inbox.

La guida al passaggio dal chatbot a un operatore include verifiche separate dell’assegnazione della conversazione, del ritorno all’AI e dei problemi fuori orario.

Passaggio 5: Come si adatta il widget al sito?

Imposta l’aspetto e i testi fissi in Channels → Your Website. Mantieni il messaggio di benvenuto abbastanza specifico da spiegare cosa può chiedere il visitatore.

Aspetto

1. Apri Appearance. Per Kestrel, scegli un tema Custom con sfondo bianco, intestazione e colore principale verde scuro (#315448) e testo dell’intestazione bianco. Mantieni le dimensioni predefinite del testo e i controlli arrotondati.
2. In Branding → AI Agent Avatar, fai clic sull’icona di caricamento dell’avatar, scegli website/kestrel-avatar.png dal kit e seleziona Upload nella finestra di ritaglio.
3. Imposta Widget window max width su 400px e Widget window max height su 520px. Scegli Small per le dimensioni del pulsante di apertura, posizionalo a destra e usa Ask about your kitchen come etichetta. L’etichetta è disponibile con il pulsante piccolo. Verifica in anteprima la posizione rispetto a eventuali banner dei cookie o altri controlli mobili sul sito.
4. Lascia disattivato Auto-open Widget. Aprire il widget a ogni caricamento della pagina interrompe la navigazione, soprattutto su un telefono.

Controlla l’anteprima mentre scegli i colori. Il test sul sito reale resta necessario perché il pulsante di apertura condivide lo spazio con i controlli del sito.

Contenuti testuali

Apri Text Content e usa questi valori:

Gli spunti di conversazione devono avviare attività utili. L’avvertenza indica ai visitatori quali decisioni richiedono ancora un progettista.

L’Agente può rispondere nella lingua del visitatore. La traduzione del messaggio di benvenuto fisso e delle etichette del widget è un’impostazione separata in Other languages, disponibile nei piani a pagamento. Per un sito multilingue, testa sia la risposta sia i testi fissi dell’interfaccia; la guida ai chatbot multilingue spiega questa distinzione.

Le modifiche all’aspetto possono richiedere alcuni minuti per raggiungere le sessioni dei visitatori memorizzate nella cache. Ricarica prima di concludere che una modifica salvata non sia riuscita. Hide Quickchat AI Branding richiede Professional o un piano superiore; la guida al white label descrive le altre aree da controllare.

Passaggio 6: Come si installa il chatbot sul sito?

Installa il Widget nel layout condiviso del sito oppure usa l’integrazione supportata per la piattaforma. Il Widget flottante deve essere eseguito nella pagina che il visitatore sta consultando.

1. Apri Channels → Your Website → Install.
2. Attiva Widget & Embed access per il widget pubblico.
3. Scegli il metodo di installazione per il sito e copia lo snippet o lo Scenario ID mostrato per questo Agente.
4. Pubblica la modifica, apri il sito pubblico e poni una domanda la cui risposta sai essere nella Knowledge Base.

Copia dalla schermata Install di questo Agente. Il suo Scenario ID è un identificatore pubblico del widget, non una chiave API privata.

Qualsiasi sito: incolla lo snippet del Widget prima del tag di chiusura body

Scegli Install manually with code e copia lo snippet del Widget. Il loader attuale ha questa forma:

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

Sostituisci YOUR_SCENARIO_ID con il valore di Install. Incolla lo snippet completo una sola volta, immediatamente prima di </body> nel layout condiviso, oppure usa il campo del footer valido per tutto il sito nel servizio di creazione siti. Questo loader inserisce uno script nel body della pagina, quindi collocarlo nell’head prima che il body esista può impedirne il caricamento.

La posizione conta. Un blocco HTML basato su iframe è una pagina separata e non è adatto a questo Widget flottante.

L’opzione separata Embed colloca una chat all’interno di un contenitore della pagina. Usa lo snippet generato se vuoi una sezione di chat incorporata nel contenuto. Un blocco HTML che inserisce codice direttamente nella pagina può supportare questa struttura; un blocco del servizio di creazione siti che isola il codice in un iframe è un caso diverso. Consulta la documentazione del canale Website.

WordPress: installa il plugin ufficiale

1. In WordPress, apri Plugins → Add New, cerca Quickchat AI Agent, poi scegli Install Now e Activate.
2. Apri Settings → Quickchat AI Agent.
3. Incolla lo Scenario ID dalla schermata Install di Quickchat AI e seleziona Save Changes.
4. Apri una pagina pubblica e controlla il widget. Usa il plugin oppure uno snippet manuale per evitare di installare due volte il loader.

Servono un’installazione e un piano WordPress che consentano i plugin. La guida al chatbot per WordPress mostra l’interfaccia del plugin e le verifiche specifiche per WordPress.

Squarespace: usa l’inserimento del codice nel footer

1. Apri il pannello Code Injection del sito. Usa la ricerca nelle impostazioni della dashboard se la navigazione del tuo account è diversa.
2. Incolla lo snippet completo del Widget in Footer e salva.
3. Apri la pagina pubblicata in una scheda separata del browser e testa una risposta.

Squarespace offre Code Injection nei piani Core, Plus, Advanced e in alcuni piani precedenti. L’inserimento nel footer colloca il codice prima di </body> in tutto il sito. Usa questa area per il widget flottante; un blocco iframe a livello di pagina non è equivalente. Questo codice personalizzato non si estende alle pagine di checkout di Squarespace.

Wix: usa il codice personalizzato alla fine del body

1. Nella dashboard del sito, apri Settings → Custom Code, poi + Add Custom Code.
2. Incolla lo snippet del Widget e chiamalo Quickchat AI widget.
3. Applicalo a All pages e scegli Body - end, poi Apply.
4. Testa il sito pubblicato, inclusa la navigazione verso un’altra pagina.

Wix richiede un sito pubblicato con un dominio collegato per il codice personalizzato. Usa l’impostazione Custom Code valida per tutto il sito per questo widget flottante.

Webflow: usa il codice nel footer e pubblica

1. Apri Site settings → Custom code.
2. Incolla lo snippet del Widget in Footer code e scegli Save changes.
3. Usa Publish per pubblicare sul dominio desiderato, poi testa quell’URL pubblicato.

Le impostazioni del codice personalizzato di Webflow richiedono un Workspace a pagamento idoneo o un piano Site attivo. Il solo salvataggio dell’impostazione non la pubblica.

Shopify: scegli lo snippet dell’Agente esistente o l’app Shopify

Per l’Agente Kestrel già creato, aggiungi il suo snippet del Widget immediatamente prima di </body> in Online Store → Themes → Edit code → layout/theme.liquid, poi salva e controlla il negozio. Conserva una copia di backup del tema prima di modificarlo e ricontrolla l’installazione dopo aver cambiato tema. Questa modalità mostra l’Agente selezionato; non configura Actions per prodotti o ordini.

Per un Agente dedicato al negozio, la configurazione dell’app Shopify di Quickchat AI collega il negozio tramite una propria procedura iniziale. Dopo il collegamento, usa Enable Widget in Shopify Theme Editor, oppure apri Online Store → Themes → Edit theme → App embeds. Attiva Quickchat AI Widget e salva. La documentazione degli app embed di Shopify spiega i controlli del tema; riattiva l’app embed quando cambi il tema pubblicato.

I percorsi dei servizi di creazione siti indicati sopra sono stati verificati nella documentazione ufficiale. Gli screenshot della procedura mostrano il sito di esempio Kestrel e il widget locale reale; non sono screenshot di account autenticati su ciascun servizio.

Controlla lo snippet prima di cercare problemi nell’Agente

Queste verifiche facoltative operano sui valori che fornisci:

• Controlla uno snippet del Widget. Verifica il codice incollato rispetto allo Scenario ID fornito. Non recupera il tuo sito web.
• Confronta i metodi di distribuzione. Verifica canali dichiarati, accesso al sito e funzionalità richieste rispetto alle opzioni di configurazione di Quickchat AI. Non esamina il sito o l’account.

In un browser compatibile, queste verifiche sono disponibili anche come strumenti del sito. I link aprono i moduli standard.

Passaggio 7: Come si testa il chatbot prima dei visitatori?

Testa separatamente la risposta, i dati salvati e la risposta consegnata. AI Preview e Simulation Testing aiutano a valutare il comportamento; il sito pubblicato dimostra che il visitatore può usare il widget installato.

Esegui domande indipendenti in Simulation Testing

Apri Testing → Create Dataset, assegna il nome Kestrel Kitchens: website launch checks e scegli Paste messages. Aggiungi le domande su durata, prezzo e finanziamenti riportate sotto, separandole con una riga contenente --- tra una domanda e l’altra. Un semplice ritorno a capo mantiene il testo in un unico messaggio di prova. Imposta Evaluation criteria per verificare le informazioni e la concisione delle risposte, poi seleziona Run → Start Run. Il kit include i messaggi e i criteri esatti.

Ogni riga del dataset avvia una conversazione separata. Usa Simulation per queste domande indipendenti; esegui le verifiche del preventivo su più turni e della presa in carico umana in un’unica conversazione in AI Preview o sul sito. Controlla separatamente il log dell’Action e il ricevitore, perché un valutatore della trascrizione non può verificare la consegna esterna.

Apri un’esecuzione completata ed esamina le risposte. Questa risposta sul prezzo mantiene la fascia indicativa; il suo punteggio non dimostra la consegna a un altro sistema.

Usa una nuova conversazione tra casi indipendenti. Ricaricare la pagina può riprendere una conversazione esistente, quindi usa il controllo del widget per avviare una nuova chat quando serve un test da zero.

Controlla il sito su un telefono

Su schermi inferiori a 768 pixel CSS, il widget aperto usa un layout a schermo intero. Verifica di poterlo aprire, scrivere con la tastiera visibile, scorrere la conversazione e chiuderlo per tornare al sito.

Concludi con una persona reale che risponde da Inbox. Una buona risposta AI non dimostra che il percorso di assistenza umana funzioni. Ripeti un piccolo gruppo di queste verifiche dopo modifiche a fonti, prompt, Actions o tema del sito.

Passaggio 8: Come si invia una richiesta completa al CRM?

Un’API Action facoltativa può inviare i campi salvati a un ricevitore HTTP dopo che la conversazione contiene tutte le informazioni obbligatorie. Il chatbot di base per il sito è già utilizzabile senza questa estensione.

La distinzione importante è tra è stato raccolto un contatto e questa richiesta è completa. Quickchat AI imposta lead_captured quando acquisisce per la prima volta un campo di contatto standard, incluso il nome. Il flag da solo non dimostra che siano presenti e-mail, codice postale o tipo di progetto.

La piattaforma verifica ogni condizione. Il modello raccoglie le informazioni; le condizioni determinano quando la richiesta può essere eseguita.

Prepara il ricevitore

Usa un endpoint CRM o di automazione sotto il tuo controllo che accetti il corpo JSON seguente. Il kit include un piccolo ricevitore dimostrativo locale per chi vuole esaminare la richiesta prima di collegare un CRM. Le istruzioni di configurazione creano un token privato e spiegano come esporre un endpoint HTTPS temporaneo. Invia solo dati di prova immaginari al ricevitore dimostrativo.

Per un’integrazione gestita, segui invece il tutorial sui report in Google Sheets o la guida al CRM personalizzato. Non attivare due flussi che creano entrambi lo stesso contatto.

Configura una sola API Action automatica

1. Apri Actions & MCPs → Custom Actions → Add Action → API Action. Scegli Create manually se si apre il generatore basato su descrizione.
2. Imposta API Action Name su Send quote enquiry.
3. Lascia vuoto What to ask the user first. Questa Action legge i campi già salvati da Smart Data Gathering; non chiede al modello di compilare un secondo insieme di parametri.
4. In API Endpoint, seleziona POST e inserisci l’URL HTTPS /enquiries del ricevitore.
5. Aggiungi intestazioni, corpo e condizioni seguenti, poi salva e attiva l’Action.

Inserisci il token solo nell’impostazione delle intestazioni dell’Action. Tienilo fuori dal prompt, dallo snippet del sito e dalla conversazione con il visitatore. Il README del ricevitore dimostrativo spiega come generarlo; per un’integrazione reale usa l’autenticazione documentata del CRM.

Nella scheda Body, seleziona JSON e inserisci:

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

Usa Add AI Data per inserire i corrispondenti valori integrati e dei metadati. conversation_id identifica la conversazione. Gli altri valori provengono dai campi salvati; i nomi inglesi dei contatti corrispondono a visitor_name e visitor_email, mentre Project type diventa project_type. La documentazione delle variabili spiega queste associazioni.

In When to run, scegli When metadata matches. In Run when, aggiungi tutte e cinque le righe; le condizioni sui metadati sono combinate con AND:

Per questi campi di testo, is true rifiuta i valori vuoti e il testo equivalente a falso. exists verifica solo che una chiave sia presente; una stringa vuota salvata può superare il controllo. I test seguenti mostrano perché conta la condizione più restrittiva. Questo verifica che sia stato fornito testo utilizzabile, non che l’identità del visitatore o i dati dell’immobile siano verificati in modo indipendente.

Usa questa 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.

Le prime due delle cinque condizioni salvate. Aggiungi ogni riga della tabella; When metadata matches le controlla dopo un turno AI senza che l’Agente scelga l’Action.

L’Action viene tentata una sola volta per conversazione quando tutte le condizioni corrispondono. Non viene eseguita di nuovo quando il visitatore indica il periodo di inizio desiderato, che è facoltativo, e una richiesta inviata ma non riuscita non viene ritentata automaticamente nella stessa conversazione. Conserva questo dato in Inbox per il progettista, oppure crea un’integrazione esplicita di creazione e aggiornamento se il CRM richiede modifiche successive.

La richiesta viene eseguita dopo il turno AI e la sua risposta non viene inserita nella chat. Per questo il Main Prompt conferma i dati del visitatore senza affermare che un CRM li abbia accettati. Verifica la consegna nel log dell’Action e nel ricevitore. La documentazione delle Actions automatiche descrive questo comportamento di esecuzione.

Testa prima i dati parziali, poi la richiesta completa

La prima versione usava exists per i campi di testo obbligatori. Sam ha fornito un nome, poi un’e-mail nel messaggio successivo. Smart Data Gathering aveva già creato valori vuoti per codice postale e tipo di progetto, quindi le chiavi esistevano e l’Action ha inviato una richiesta incompleta. Questo ha anche consumato l’unico tentativo della conversazione.

La correzione è stata cambiare le quattro condizioni dei campi di testo in is true, lasciando invariato il resto della configurazione. Ripeti il test in una conversazione nuova, fornendo solo un’e-mail al secondo turno. L’Action deve attendere i dettagli rimanenti del progetto.

Questa è una singola conversazione osservata, non un tasso di successo in produzione. Riproducila con una nuova conversazione, esamina i campi salvati dopo ogni turno e verifica la richiesta sul tuo endpoint.

La chiamata effettiva dell’Action ha restituito HTTP 201. Aprine i dettagli per esaminare la richiesta; il record salvato sotto mostra cosa ha memorizzato il ricevitore.

Un record effettivamente salvato dal ricevitore demo autenticato. È una richiesta, non un preventivo o una prenotazione confermati.

La dimostrazione ha usato un ricevitore locale e registrato una consegna HTTP effettiva. Un Agente Quickchat AI ospitato richiede un endpoint HTTPS raggiungibile pubblicamente; un URL localhost sul tuo computer non è raggiungibile dal servizio.

Se non arriva nulla, esamina View logs sull’Action e i metadati salvati della conversazione. Valori mancanti, un’Action disattivata e un errore HTTP richiedono correzioni diverse. Correggi la configurazione e usa una nuova conversazione per testare nuovamente l’attivazione automatica; chiedere alla stessa chat di riprovare non azzera un tentativo limitato a una volta per conversazione.

Perché il chatbot non compare o mostra impostazioni vecchie?

Controlla la pagina pubblicata, la posizione dell’installazione e l’accesso dell’Agente prima di modificare il prompt. Un problema di caricamento nel browser è distinto da un problema di qualità delle risposte.

Se il browser segnala una risorsa bloccata, esamina l’esatto errore della Content Security Policy o del sistema di blocco. Evita di disattivare tutte le protezioni del sito. Testa la pagina pubblica su HTTPS e usa la documentazione del canale per la configurazione necessaria.

Quanto costa un chatbot per un sito web?

Abbonamento e quota di utilizzo coprono il servizio AI; il piano del sito e le integrazioni facoltative sono costi separati.

Un credito AI non è una conversazione. Una conversazione può contenere più risposte AI e modelli diversi possono avere costi in crediti diversi. Includi Preview e Simulation nel budget dei test. Usa i prezzi e le quote attuali e la guida ai costi dei chatbot per stimare il tuo volume.

ChatGPT o Claude possono aiutare a configurare il chatbot?

Il collegamento per la gestione dell’account Quickchat AI consente a un assistente compatibile di configurare le impostazioni supportate dell’Agente e preparare test a partire da questi artefatti.

Collega il tuo account tramite Quickchat AI in ChatGPT o Quickchat AI in Claude, seguendo la guida Manage with AI. Gli strumenti supportati coprono conoscenze, Main Prompt, spunti di conversazione, Human Handoff, Actions HTTP, test e snippet di distribuzione.

Completa Smart Data Gathering e le impostazioni dettagliate di Appearance del widget nella dashboard. Devi anche autorizzare gli account esterni e installare lo snippet nelle impostazioni del sito. Il collegamento dell’account serve a gestire l’Agente; è distinto dall’esposizione di un Agente come strumento MCP.

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

Domande frequenti

Come aggiungo un chatbot AI al mio sito web?

Crea un Agente in Quickchat AI, aggiungi le conoscenze della tua attività, configura Main Prompt, Smart Data Gathering e Human Handoff, poi installa il suo Widget usando un plugin o lo snippet fornito. Testa sul sito pubblicato una risposta basata sulle fonti, i dati di contatto raccolti e la consegna di una risposta umana.

Posso aggiungere un ChatGPT personalizzato al mio sito web?

Puoi aggiungere un assistente in stile ChatGPT addestrato sulle tue pagine. Questo tutorial distribuisce un Agente Quickchat AI tramite il suo widget per siti web, così i visitatori possono chattare sul tuo sito senza accedere a ChatGPT. Conoscenze, istruzioni e integrazioni si gestiscono in Quickchat AI.

Posso aggiungere gratuitamente un chatbot AI al mio sito web?

Il piano Free di Quickchat AI supporta l’apprendimento personale non commerciale e include 50 crediti AI al mese. Un sito aziendale o un servizio di vendita e assistenza rivolto ai clienti richiede un piano che consenta l’uso commerciale. Gli abbonamenti dei servizi di creazione siti sono separati e anche i test consumano crediti AI.

Devo scrivere codice o fornire una chiave API?

La configurazione di base usa impostazioni della dashboard e un plugin, un app embed o uno script fornito. Lo snippet del sito contiene uno Scenario ID pubblico, non una chiave API privata. Collegare un’Action CRM facoltativa richiede un endpoint adatto e la relativa autenticazione; conserva quella credenziale nelle impostazioni dell’Action.

Un chatbot per siti web può raccogliere contatti e richieste di preventivo?

Sì. Smart Data Gathering chiede i campi scelti durante la conversazione e li salva in Inbox. Email new leads può avvisare gli amministratori dell’Agente dopo la raccolta di un indirizzo e-mail o di un numero di telefono. Un’API Action può inviare i campi obbligatori salvati a un ricevitore configurato; il solo nome raccolto non dimostra che la richiesta sia completa.

Una persona può subentrare nella chat?

Sì. Configura Human Handoff con gli orari di presenza del team e un messaggio fuori orario. In Inbox, seleziona Assign to me per una conversazione non assegnata, oppure Take over quando compare quel controllo, poi rispondi al visitatore. Reassign to AI restituisce la conversazione all’Agente.

Funziona su WordPress, Shopify, Squarespace, Wix e Webflow?

Ciascuno offre un metodo di installazione. Usa il plugin ufficiale WordPress, l’app embed Shopify dopo aver collegato l’Agente del negozio, oppure lo snippet appropriato nel footer/alla fine del body di tutto il sito per un Agente esistente. Permessi dei plugin e requisiti del piano per il codice personalizzato variano secondo il servizio di creazione siti.

Perché il chatbot non compare sul mio sito web?

Controlla la pagina pubblicata, lo Scenario ID corretto e la posizione dello snippet alla fine del body della pagina. Rimuovi installazioni duplicate obsolete ed evita i blocchi basati su iframe per il Widget flottante. Se si apre ma non può rispondere, controlla Widget & Embed access e i crediti AI disponibili.

Il chatbot rallenterà il mio sito web?

Il loader del widget viene scaricato in modo asincrono, ma aggiunge comunque JavaScript e richieste di rete. Confronta le prestazioni di caricamento e interazione prima e dopo l’installazione su pagine rappresentative e su un telefono. Il caricamento asincrono non dimostra un impatto nullo sulle prestazioni.

Il chatbot del sito funziona sui telefoni?

Il widget aperto usa un layout a schermo intero sotto i 768 pixel CSS. Testa pulsante di apertura, tastiera, scorrimento e controllo di chiusura su un telefono. Lascia disattivato Auto-open Widget quando l’apertura automatica interromperebbe la navigazione.

Il chatbot può rispondere nelle lingue dei visitatori?

L’Agente può rispondere nella lingua del visitatore. Tradurre il testo di benvenuto fisso, gli spunti di conversazione e le etichette del widget è un’impostazione separata dei piani a pagamento. Testa sia le informazioni della risposta sia i testi dell’interfaccia per ogni lingua che intendi supportare.