Configurazione del widget

BluBot si configura in due modi equivalenti: attributi data-* sul tag script, adatti a chi non può scrivere JavaScript, oppure un oggetto di configurazione passato a BluBot.init, che consente valori dinamici e oggetti annidati.

Le due forme

<script
  src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js"
  data-project-key="bp_proj_7f3a9c21"
  data-locale="it"
  data-position="bottom-right"
  data-offset-x="24"
  data-offset-y="24"
  data-primary-color="#1e3a8a"
  data-theme="auto"
  data-title="Assistenza Acme"
  data-subtitle="Rispondiamo in pochi secondi"
  data-placeholder="Scrivi il tuo messaggio..."
  data-auto-open="false"
  data-z-index="2147483000"
  data-hide-on-mobile="false"
  data-sound-enabled="true"
  data-gdpr-consent-required="true"
  defer
></script>

Riferimento delle opzioni

Oggetto utente

L'oggetto user identifica la persona che sta scrivendo e alimenta le variabili usate nei flussi e nei webhook.

window.BluBot.setUser({
  id: 'usr_88213',
  name: 'Marco Rossi',
  email: 'marco.rossi@example.it',
  signature: 'a3f1c9d2e7b4508612f0ac93d5e781b4c0629f3a8d47e1b05c9f2a6d8e310b74'
});

Variabili di ambiente per il tuo build

Se generi lo snippet dal tuo processo di build, definisci queste variabili.

Configurazione per ambiente

Usa chiavi diverse per ambiente in modo che le conversazioni di collaudo non inquinino le statistiche di produzione.

const KEYS = {
  'www.acme.it': 'bp_proj_7f3a9c21',
  'staging.acme.it': 'bp_proj_stg_2b48ef60',
  localhost: 'bp_proj_dev_9c07da13'
};

window.BluBot.init({
  projectKey: KEYS[window.location.hostname] ?? KEYS.localhost,
  locale: document.documentElement.lang || 'it'
});

Consenso e privacy

Con gdprConsentRequired attivo il widget mostra il launcher ma non contatta l'API finché l'utente non accetta. Se usi una piattaforma di gestione del consenso, inizializza il widget solo dopo l'accettazione.

window.addEventListener('consent:updated', function (event) {
  if (event.detail.categories.includes('functional')) {
    window.BluBot.init({ projectKey: 'bp_proj_7f3a9c21' });
  } else {
    window.BluBot.destroy();
  }
});

Valori predefiniti

Errori di configurazione

Passi successivi

• API JavaScript — controlla il widget a runtime.
• Personalizzazione — variabili CSS e launcher su misura.
• Eventi — reagisci a ciò che accade nella chat.