Come aggiungere un chatbot al tuo sito Framer: walkthrough in 5 minuti

Prima di incollare qualsiasi cosa in Framer, tieni pronte tre cose:

• Un sito Framer pubblicato. Puoi incorporare script anche in una bozza, ma il widget girerà solo sull'URL pubblicato. Se non hai ancora premuto Publish, fallo prima.
• Un account Chatloom. Il tier gratuito basta. Registrati su chatloom.app, verifica l'email e atterrerai su una dashboard vuota con il prompt «Create your first agent».
• Un breve testo su cui addestrare. Anche 200 parole sul tuo prodotto bastano per ottenere una risposta reale al primo messaggio di test. Prendile dalla hero section e dalla pagina Chi siamo.

Questa è tutta la lista di prerequisiti. Non serve Framer Pro, dominio custom, un seat Zapier o uno sviluppatore di guardia.

Nella dashboard Chatloom, clicca Create new agent. Dagli un nome (il nome della tua azienda va bene), scegli una lingua (Chatloom supporta 95+ lingue con risposte native in dieci) e scegli un preset di personalità: Support, Sales o Custom.

Per un sito marketing Framer, Sales è quasi sempre il default giusto. È tarato per qualificare lead, spingere verso prenotazioni di demo e rispondere alle domande di prezzo con sicurezza invece di rimandare a un form di contatto.

Una volta creato l'agent atterri nel builder. Non toccare altro per ora — configureremo il brand dopo che il widget sarà live. Per ora prendi solo lo snippet di embed: Install → Custom embed. Copia entrambi gli script tag negli appunti.

In Framer apri il tuo progetto e clicca l'icona ingranaggio (Site Settings) nella barra in alto. Scorri fino a General → Custom Code. Vedrai tre aree di testo:

• Start of head — per tag di verifica, preload, snippet di analytics che devono girare presto.
• End of body — per script che devono girare dopo il render. Chatloom va qui.
• End of head — per override CSS e meta tag.

Incolla i due script tag del Passo 1 nel campo End of body. Salva. Poi premi Publish in alto a destra. Il widget sarà live sull'URL pubblicato entro dieci secondi dalla fine del publish.

Apri il sito pubblicato in una finestra in incognito. Dovresti vedere il launcher Chatloom nell'angolo in basso a destra. Cliccalo, il pannello chat si apre, scrivi una domanda. Congratulazioni — il tuo sito Framer ora ha un chatbot IA.

Il widget esiste ma ancora non sa nulla del tuo prodotto. Questo è il passo che la maggior parte delle guide salta.

Torna su Chatloom e apri Knowledge base → Add source. Hai quattro opzioni:

• Crawl website — incolla il tuo dominio Framer. Il crawler percorre la sitemap ed estrae il testo renderizzato da ogni pagina. È la scelta giusta per la maggior parte dei siti Framer e richiede meno di due minuti.
• Upload files — butta dentro il pitch deck PDF, il one-pager o la lista prezzi.
• Paste text — per FAQ rapide, dettagli di prezzi o risposte tipo «cosa succede se...» che non sono ancora sul sito.
• Sitemap URL — usala se il tuo sito Framer è protetto da password o ha pagine non indicizzate che vuoi comunque far conoscere al bot.

Per un sito marketing Framer tipico, la combinazione vincente è Crawl + Paste text. Il crawl copre tutto ciò che è già sul sito; il campo di paste copre le sfumature che non sono mai finite nel copy.

Fai partire l'addestramento. Sul free sono circa 60 secondi. La dashboard mostra «Ready» quando la knowledge base è interrogabile.

Questo è il passo che separa un chatbot che sembra una bolla di supporto del 2019 da uno che sembra nativo del design Framer. Nel builder apri la sezione Widget.

Parti da Launcher mode. Button è il default sicuro (cerchio fluttuante in basso a destra), ma Fullscreen vale la pena di provarlo per le landing — tutto il viewport si scurisce e la chat prende la scena centrale, che è un pattern di conversione molto più forte per le CTA dell'hero.

Poi Brand colors. Chatloom espone primario, accento e superficie. Abbinali alla palette Framer. C'è una live preview a destra che si aggiorna all'istante.

Tipografia. Carica il .woff2 del font Framer che stai usando (o scegli dal picker Google Fonts). La superficie della chat, i chip dei suggerimenti e gli header vengono ri-renderizzati con il nuovo font. Su un display retina non distingui il widget da un componente Framer nativo.

Raggio degli angoli. Framer usa 12 px di default nella maggior parte dei componenti. Abbinarlo fa sparire il widget nel design.

Logo e avatar. Carica un PNG trasparente. Il bottone launcher rispetta il PNG; l'avatar IA appare accanto a ogni messaggio del bot.

Salva. Riapri il tuo sito Framer in incognito. Il widget ora è indistinguibile da una parte nativa del design.

Due tocchi finali prima di considerarlo fatto.

Limita il widget. Per impostazione predefinita Chatloom si mostra su ogni pagina del sito Framer. Se vuoi toglierlo dalla pagina prezzi (comune per deal enterprise in cui preferisci che sia visibile il team vendite), usa le Visibility rules del widget: escludi URL che matchano /pricing, /contact o qualsiasi pattern ti serva.

Configura i saluti. Nella sezione Messages del builder, scrivi una breve riga di benvenuto («Ciao — posso rispondere a domande su integrazione Framer, prezzi o come iniziare. Su cosa stai lavorando?») e 3–5 prompt suggeriti. I prompt suggeriti sono la leva di conversione più potente di tutto il widget; le persone ci cliccano sopra più spesso di quanto scrivano.

Testa. Apri il sito in incognito, porta avanti una conversazione completa da pagine di ingresso diverse e chiedi in particolare domande che sai non essere ancora nei doc. Guarda come il bot gestisce il «non lo so» — se allucina, aggiungi la risposta mancante alla knowledge base e ritesta. Cinque minuti di questo upfront prevengono una settimana di conversazioni brutte.

Questo è l'intero flusso. La maggior parte dei founder Framer conclude l'intera sequenza in meno di 15 minuti e non tocca più lo script di embed.