API JavaScript

BluBot.init(config: BluBotConfig): void

window.BluBot.init({
  projectKey: 'bp_proj_7f3a9c21',
  locale: 'it',
  theme: 'auto',
  position: 'bottom-right'
});

BluBot.open(): void

<button type="button" onclick="window.BluBot.open()">
  Parla con noi
</button>

document.querySelectorAll('[data-open-chat]').forEach((el) => {
  el.addEventListener('click', (event) => {
    event.preventDefault();
    window.BluBot?.open();
  });
});

BluBot.close(): void

window.addEventListener('hashchange', () => {
  if (!window.location.hash.startsWith('#assistenza')) {
    window.BluBot?.close();
  }
});

BluBot.toggle(): void

const launcher = document.getElementById('mio-launcher');

launcher.addEventListener('click', () => window.BluBot?.toggle());

window.BluBot?.on('open', () => launcher.setAttribute('aria-expanded', 'true'));
window.BluBot?.on('close', () => launcher.setAttribute('aria-expanded', 'false'));

BluBot.sendMessage(text: string, options?: SendOptions): Promise<void>

document.getElementById('chiedi-info').addEventListener('click', async () => {
  await window.BluBot.sendMessage(
    'Vorrei informazioni sulla visita cardiologica.',
    { metadata: { origine: 'scheda-prestazione', codice: 'VIS_CARD' } }
  );
});

window.BluBot.sendMessage(
  'Contesto: l utente proviene dalla pagina prezzi, piano Business.',
  { hidden: true }
);

BluBot.setUser(user: BluBotUser): void

window.BluBot.setUser({
  id: 'usr_88213',
  name: 'Marco Rossi',
  email: 'marco.rossi@example.it',
  metadata: { piano: 'premium', citta: 'Milano', cliente_dal: '2023-04-11' }
});

BluBot.setLocale(locale: string): void

document.getElementById('selettore-lingua').addEventListener('change', (event) => {
  window.BluBot?.setLocale(event.target.value);
});

BluBot.reset(): void

document.getElementById('logout').addEventListener('click', () => {
  window.BluBot?.reset();
});

BluBot.destroy(): void

window.addEventListener('consent:revoked', () => {
  window.BluBot?.destroy();
});

BluBot.isOpen(): boolean

if (!window.BluBot.isOpen()) {
  window.BluBot.open();
}

BluBot.on(event: string, handler: (payload: unknown) => void): void
BluBot.off(event: string, handler: (payload: unknown) => void): void

function onBooking(payload) {
  console.log('Prenotazione completata', payload.bookingId);
}

window.BluBot.on('booking:completed', onBooking);

window.BluBot.off('booking:completed', onBooking);

<script
  src="https://static.blupantheon.com/blubot/v1/bpblubot.umd.js"
  data-project-key="bp_proj_7f3a9c21"
  data-auto-init="false"
  defer
></script>

<script>
  (function () {
    var CONFIG = {
      projectKey: 'bp_proj_7f3a9c21',
      locale: document.documentElement.lang || 'it',
      theme: 'auto',
      position: 'bottom-right',
      offsetY: 88,
      title: 'Assistenza Acme',
      subtitle: 'Rispondiamo in pochi secondi'
    };

    window.addEventListener('blubot:loaded', function () {
      window.BluBot.init(CONFIG);
    });

    window.addEventListener('blubot:ready', function () {
      identificaUtente();
      collegaLauncher();
      collegaTracciamento();
    });

    function identificaUtente() {
      fetch('/api/blubot/identity', { credentials: 'include' })
        .then(function (res) {
          if (!res.ok) return null;
          return res.json();
        })
        .then(function (identity) {
          if (!identity) return;
          window.BluBot.setUser({
            id: identity.id,
            name: identity.name,
            email: identity.email,
            signature: identity.signature,
            metadata: { piano: identity.plan, cliente_dal: identity.since }
          });
        })
        .catch(function () {
          // utente anonimo: nessuna identificazione
        });
    }

    function collegaLauncher() {
      var button = document.getElementById('apri-assistenza');
      if (!button) return;
      button.addEventListener('click', function () {
        window.BluBot.open();
        window.BluBot.sendMessage('Ho bisogno di assistenza sul mio ordine.', {
          metadata: { origine: 'area-riservata' }
        });
      });
    }

    function collegaTracciamento() {
      window.BluBot.on('message:sent', function () {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ event: 'blubot_message_sent' });
      });

      window.BluBot.on('handover:requested', function (payload) {
        window.dataLayer.push({ event: 'blubot_handover', motivo: payload.reason });
      });
    }

    document.addEventListener('acme:logout', function () {
      window.BluBot.reset();
    });
  })();
</script>

import { createHmac } from 'node:crypto';

export function signUserId(userId) {
  return createHmac('sha256', process.env.BLUBOT_USER_SIGNING_SECRET)
    .update(userId)
    .digest('hex');
}

export interface BluBotUser {
  id: string;
  name?: string;
  email?: string;
  phone?: string;
  metadata?: Record<string, string | number | boolean>;
  signature?: string;
}

export interface BluBotApi {
  version: string;
  init(config: Record<string, unknown>): void;
  open(): void;
  close(): void;
  toggle(): void;
  sendMessage(text: string, options?: { hidden?: boolean; metadata?: Record<string, unknown> }): Promise<void>;
  setUser(user: BluBotUser): void;
  setLocale(locale: string): void;
  reset(): void;
  destroy(): void;
  isOpen(): boolean;
  on(event: string, handler: (payload: never) => void): void;
  off(event: string, handler: (payload: never) => void): void;
}

declare global {
  interface Window {
    BluBot?: BluBotApi;
  }
}