Pubblicazione del widget
Copia lo snippet BluBot, installalo sul sito, autorizza i domini e verifica il funzionamento in produzione.
Sesto passaggio della guida rapida. Qui il progetto diventa visibile ai visitatori del sito.
Prima di iniziare
- Un progetto pubblicato in produzione con modello AI collegato
- La chiave di progetto, per esempio bp_proj_7f3a9c21
- Accesso in modifica al template del sito o al gestore di tag
- La possibilità di pubblicare le modifiche sul sito
Copia lo snippet
Apri la scheda installazione
Nel menu laterale seleziona Configurazione, quindi Widget builder. Apri il progetto e vai alla scheda Installazione.
Verifica l'ambiente selezionato
In alto è indicato l'ambiente a cui appartiene lo snippet mostrato. Per la pubblicazione sul sito pubblico deve essere Produzione: uno snippet di sviluppo non funziona su un dominio pubblico.
Copia il codice
Seleziona Copia snippet. Il codice include già la chiave del tuo progetto.
Incolla nel sito
Incolla lo snippet immediatamente prima della chiusura del tag body, in tutte le pagine dove vuoi che la chat sia disponibile.
Pubblica e verifica
Pubblica il sito, apri una pagina in una finestra anonima e controlla che la bolla di chat compaia in basso a destra.
Lo snippet base
<script
src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js"
data-project-key="bp_proj_7f3a9c21"
data-locale="it"
data-position="bottom-right"
defer
></script>Snippet BluBot
<script src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js" data-project-key="bp_proj_7f3a9c21" data-locale="it" data-position="bottom-right" defer></script>Sostituisci bp_proj_7f3a9c21 con la chiave reale del tuo progetto in produzione.
Inizializzazione avanzata
Quando servono metadati, identificazione dell'utente o controllo dell'apertura, usa l'inizializzazione esplicita.
<script src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js" defer></script>
<script>
window.addEventListener('load', function () {
window.BluBot.init({
projectKey: 'bp_proj_7f3a9c21',
locale: 'it',
position: 'bottom-right',
theme: 'auto',
autoOpenDelay: 20000,
metadata: {
pagina: document.title,
canale: 'sito-pubblico'
}
});
});
</script>L'elenco completo dei parametri è in Requisiti e compatibilità e nella sezione BluBot.
Installazione per piattaforma
Apri il template comune del sito, tipicamente footer.html o il layout condiviso, e inserisci lo snippet prima della chiusura del tag body.
<footer>
<p>Acme S.r.l. — P.IVA IT01234567890</p>
</footer>
<script
src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js"
data-project-key="bp_proj_7f3a9c21"
data-locale="it"
defer
></script>
</body>
</html>Se il sito ha più template, inserisci lo snippet in tutti quelli che devono mostrare la chat.
Autorizza i domini
Il widget si inizializza solo sui domini presenti nell'elenco del progetto. Su qualsiasi altro dominio la richiesta viene rifiutata e la bolla non compare.
Aggiungi i domini di produzione
Inserisci tutti i domini da cui il sito è raggiungibile, incluse le varianti con e senza www e i sottodomini usati per shop, blog o landing page.
Aggiungi i domini di prova
Nell'ambiente di sviluppo autorizza localhost e 127.0.0.1; nell'ambiente di staging il dominio di anteprima. Non aggiungere mai domini di prova all'elenco di produzione.
Verifica
Salva e ricarica il sito in una finestra anonima. La propagazione è immediata: se il widget non compare, il dominio non corrisponde esattamente.
Produzione acme.it
www.acme.it
shop.acme.it
acme.myshopify.com
Staging staging.acme.it
Sviluppo localhost
127.0.0.1I sottodomini non sono ereditati
Autorizzare acme.it non autorizza www.acme.it né shop.acme.it. Ogni dominio va inserito esplicitamente. È il motivo più frequente per cui il widget funziona su una pagina e non su un'altra.
Verifica dopo la pubblicazione
| Controllo | Esito atteso |
|---|---|
| La bolla compare in basso a destra | Sì, entro due secondi dal caricamento |
| Il widget si apre al clic | Sì, con il messaggio di benvenuto configurato |
| L'agente risponde a una domanda di prova | Sì, con contenuti tratti dalla knowledge base |
| La sessione compare in Console | Sì, in Sessioni entro pochi secondi |
| La richiesta di operatore genera un handover | Sì, la sessione entra in coda |
| Il widget funziona su smartphone | Sì, in modalità a schermo intero |
| Nessun errore nella console del browser | Sì |
Risoluzione dei problemi
Verifica nell'ordine: il dominio è nell'elenco autorizzato; lo snippet usa la chiave dell'ambiente di produzione; il progetto è pubblicato; lo script non è bloccato da una cache o da un banner di consenso che ne rinvia il caricamento.
Lo snippet è presente in più template oppure viene inserito sia dal tema sia da un gestore di tag. Rimuovi una delle due installazioni: BluBot non deve essere caricato più di una volta per pagina.
Con ogni probabilità il canale WebSocket è bloccato dal proxy aziendale, oppure il progetto non ha un modello AI collegato. Controlla i requisiti di rete in Requisiti e compatibilità.
Usa sempre l'attributo defer, oppure la strategia afterInteractive con Next.js. Lo script pesa poche decine di kilobyte e viene servito dal CDN: se il rallentamento persiste, la causa è altrove.
Rinvia l'inizializzazione: carica lo script senza chiave e chiama window.BluBot.init(...) solo dopo il consenso dell'utente. Vedi Conformità.
Passaggio 6 completato
Il widget è pubblicato e risponde ai visitatori. Prima di dichiarare il servizio attivo, esegui la checklist di go-live.