Installazione
Installare BluBot su qualsiasi sito — snippet canonico e istruzioni per HTML, WordPress, Shopify, Next.js, React, Angular e Tag Manager.
L'installazione di BluBot richiede una sola riga di codice e l'autorizzazione del dominio nella Console.
Prima di iniziare
- Un progetto pubblicato con la relativa chiave
- Accesso al codice del sito o a un gestore di tag
- Il dominio del sito inserito tra i domini autorizzati del progetto
Snippet canonico
<script
src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js"
data-project-key="bp_proj_7f3a9c21"
defer
></script>Snippet su una riga
<script src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js" data-project-key="bp_proj_7f3a9c21" defer></script>Sostituisci la chiave con quella del tuo progetto.
Chiave del progetto (produzione)
bp_proj_7f3a9c21La trovi in Configurazione, Progetti, Chiavi.
Dove incollarlo
Inserisci lo script appena prima della chiusura del tag body, su tutte le pagine in cui vuoi che il widget compaia.
| Posizione | Effetto |
|---|---|
Prima di </body> | Consigliata. Nessun impatto sul rendering |
Nel <head> con defer | Accettabile. Il download parte prima |
Nel <head> senza defer | Sconsigliata. Blocca il parsing della pagina |
Un solo script per pagina
Includere lo snippet due volte provoca la registrazione doppia dei listener. Se usi sia il tema sia un gestore di tag, verifica di non averlo inserito in entrambi i punti.
Installazione per piattaforma
Incolla lo script prima della chiusura del body in ogni pagina, oppure nel file di template condiviso (header, footer, layout).
<!doctype html>
<html lang="it">
<body>
<main>Contenuto della pagina</main>
<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>
</body>
</html>Se il sito è statico e generato da un motore di template (Jekyll, Hugo, Eleventy), inserisci lo snippet nel layout di base per averlo su tutte le pagine.
Autorizzare il dominio
Il widget rifiuta di inizializzarsi se l'origine della pagina non è autorizzata. Aggiungi tutte le varianti realmente usate.
https://www.acme.it
https://acme.it
https://staging.acme.it
http://localhost:3000Il carattere jolly copre i sottodomini di primo livello: https://*.acme.it.
Le modifiche sono attive entro 60 secondi.
Verificare l'installazione
Controllo visivo
Apri il sito in una finestra anonima. Il pulsante di apertura deve comparire in basso a destra entro 2 secondi.
Console del browser
Apri gli strumenti per sviluppatori e digita:
window.BluBot.version;Deve restituire una stringa di versione, ad esempio 1.24.0.
Scheda Rete
Filtra per blupantheon e verifica:
bpblubot.umd.jscon stato200;- una chiamata a
api.blupantheon.com/blubot/v1/configcon stato200; - una connessione WebSocket in stato
101dopo l'apertura della chat.
Sessione nella Console
Invia un messaggio di prova e verificane la comparsa in Console, Sessioni, entro pochi secondi.
| Segnale | Significato |
|---|---|
window.BluBot non definito | Lo script non è stato caricato o è bloccato |
403 origin_not_allowed | Dominio non presente in allowlist |
401 invalid_project_key | Chiave errata o di un altro ambiente |
410 project_archived | Il progetto è archiviato o sospeso |
| Widget presente ma invisibile | Conflitto di z-index o contenitore con overflow: hidden |
Per la diagnosi completa vedi Risoluzione dei problemi.
Aggiornamenti della versione
L'URL /blubot/v1/bpblubot.umd.js punta sempre all'ultima versione stabile della
serie 1: correzioni e migliorie arrivano automaticamente, senza cambiamenti
non retrocompatibili.
| URL | Comportamento | Uso consigliato |
|---|---|---|
/blubot/v1/bpblubot.umd.js | Ultima versione della serie 1 | Produzione |
/blubot/1.24.0/blubot.umd.js | Versione bloccata | Ambienti regolamentati |
/blubot/next/blubot.umd.js | Anteprima | Solo collaudo |
Passi successivi
- Configurazione — tutte le opzioni di inizializzazione.
- API JavaScript — controlla il widget da codice.
- Personalizzazione — allinea l'aspetto al tuo marchio.