Controllare il widget da JavaScript

Lo script del widget definisce window.IperChat appena viene eseguito. Con l’attributo data-iperchat-auto-init il widget parte da solo. Senza, lo avvii tu con IperChat.init() quando vuoi.

Avvio automatico. Con data-iperchat-auto-init il widget parte quando la pagina è stata letta. Uno script aggiunto dopo, per esempio da una single-page app o da un caricamento al clic, parte appena viene eseguito.
Da JavaScript. Togli data-iperchat-auto-init e chiama init():

window.IperChat.init({
  tenant_id: 'IL_TUO_TENANT_ID',
  language: 'it',
  position: 'bottom-right',
})

Il widget parte una sola volta per pagina, quindi un secondo init() viene ignorato. Per riavviarlo con altre opzioni chiama prima destroy().

Opzioni

Ogni opzione ha un attributo corrispondente per lo snippet con avvio automatico.

Opzione	Attributo	Valore	Default
`tenant_id`	`data-tenant-id`	Il tuo Tenant ID	Obbligatorio
`language`	`data-language`	`it`, `en`, `es` o `auto` (il browser del visitatore, altrimenti inglese)	`it`
`position`	`data-position`	`bottom-right`, `bottom-left` o `inline`	`bottom-right`
`containerId`	`data-container-id`	ID dell’elemento che ospita la chat inline	Nessuno
`origin_website`	`data-origin-website`	Un ID origin da “Configurazioni Agenti”	Il tuo Tenant ID
`loadOnOpen`	`data-load="on-open"`	`true`: non si carica nulla finché la chat non viene aperta (dettagli)	`false`
`launcherText`	`data-launcher-text`	Testo del pulsante prima che si carichino le impostazioni (con `loadOnOpen`)	Solo l’icona della chat
`theme.primaryColor`, `theme.secondaryColor`	`data-primary-color`, `data-secondary-color`	Colori esadecimali come `#174de6`	Le impostazioni del pannello
`theme.fontFamily`	Nessuno	Una famiglia di font CSS già disponibile sulla tua pagina	Le impostazioni del pannello, altrimenti Inter
`disableFirebaseAuth`	Nessuno	`true`: il widget resta anonimo e non usa mai lo spazio di accesso	`false`

Colori e font impostati nel pannello hanno la precedenza su theme.

Aprire e chiudere

window.IperChat.open()
window.IperChat.close()
window.IperChat.destroy() // rimuove il widget dalla pagina

open() funziona anche prima che il widget abbia finito di caricarsi: la chat si apre appena il widget è pronto. Con loadOnOpen è proprio open() a caricare la chat.

Sapere quando è pronto

await window.IperChat.ready

// oppure
window.addEventListener('iperchat:ready', () => {
  // il widget è sulla pagina
})

IperChat.ready è una promise che si risolve quando il widget è sulla pagina e ne mostra il pulsante, o la chat inline. Dopo destroy() si risolve di nuovo dopo il successivo init(). Nello stesso momento parte l’evento iperchat:ready su window.

Eventi

Evento su `window`	Inviato da	Significato
`iperchat:ready`	Il widget	Il widget è pronto
`iperchat:open`	Te	Apri la chat
`iperchat:close`	Te	Chiudi la chat

Inviare iperchat:open o iperchat:close ha lo stesso effetto di open() e close(), per il codice che non raggiunge window.IperChat:

window.dispatchEvent(new CustomEvent('iperchat:open'))

Caricare lo script al clic

Così non si carica nulla da IperChat finché il visitatore non clicca il tuo pulsante:

<button id="open-chat" type="button">Scrivici</button>
<script>
  document.getElementById('open-chat').addEventListener('click', function () {
    if (window.IperChat) {
      window.IperChat.open()
      return
    }
    var script = document.createElement('script')
    script.src = 'https://widget.iperchat.ai/iperchat.iife.js'
    script.onload = function () {
      window.IperChat.init({ tenant_id: 'IL_TUO_TENANT_ID', language: 'it' })
      window.IperChat.open()
    }
    document.body.appendChild(script)
  })
</script>

Se il tuo sito invia una Content-Security-Policy, usa la versione di questo loader pronta per il nonce in Content Security Policy.

Integrazioni precedenti

window.GriefAgentChat è un alias di window.IperChat, e l’attributo data-griefagent-auto-init funziona ancora. Restano per le integrazioni fatte prima del cambio di nome; nel codice nuovo usa IperChat.