Pubblica il widget sul tuo sito

Il widget IperChat funziona su qualsiasi sito — WordPress, Shopify, Squarespace, sito statico, applicazione SPA. L’integrazione standard è un singolo <script> da incollare prima della chiusura del <body>.

Lo snippet

Copialo dal pannello operativo, sezione “Documentazione” (menu laterale → gruppo Agents): il Tenant ID viene inserito automaticamente nel campo data-tenant-id. Il pulsante “Copia snippet” sopra al codice lo porta negli appunti.

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="IL_TUO_TENANT_ID"
  data-position="bottom-right"
></script>

Quattro attributi:

src — l’URL del bundle (sempre lo stesso).
data-iperchat-auto-init — fa partire il widget al caricamento. Se vuoi controllarlo da JavaScript togli questo attributo e chiama window.IperChat.init({...}) quando preferisci: vedi Controllare il widget da JavaScript.
data-tenant-id — identifica il tuo spazio. Lo trovi in “Il mio Tenant” nel pannello (è la stringa in piccolo sotto al titolo della pagina), oppure già compilato nello snippet di “Documentazione”.
data-position — bottom-right (default), bottom-left o inline.

Modalità di integrazione

Lo stesso tenant alimenta diverse esperienze. Le scegli dall’attributo data-position o caricando un bundle diverso.

Il default. Pulsante discreto nell’angolo, click per aprire la chat. È quello che ottieni con lo snippet sopra.

Inline nella pagina

Imposta data-position="inline" e lo script cerca un contenitore <div id="iperchat"> nella pagina. La chat appare incorporata in quella sezione, non flottante. Per usare un altro elemento, indica il suo ID in data-container-id (per esempio data-container-id="chat-assistenza").

<div id="iperchat" style="height: 600px; max-width: 800px;"></div>

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="IL_TUO_TENANT_ID"
  data-position="inline"
></script>

Utile per pagine “Contattaci”, FAQ animate, hub di assistenza.

Caricamento solo quando il visitatore apre la chat

Di default il widget si carica insieme alla pagina: usa lo spazio di archiviazione del browser (localStorage, più il database di accesso per i visitatori che possono accedere) e scarica le impostazioni del widget. Se il tuo sito non ha un banner di consenso che copra tutto questo, aggiungi data-load="on-open". Finché il visitatore non apre la chat, il widget non salva nulla, non imposta cookie e non invia richieste a IperChat. In modalità inline la chat mostra un pulsante di avvio e si carica al primo clic.

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="IL_TUO_TENANT_ID"
  data-load="on-open"
  data-launcher-text="Scrivici"
  data-primary-color="#174de6"
></script>

Le impostazioni del pannello si caricano solo all’apertura della chat, quindi il pulsante usa questi attributi facoltativi:

data-launcher-text — il testo del pulsante. Senza, il pulsante è l’icona rotonda della chat.
data-primary-color e data-secondary-color — colori esadecimali come #174de6. Un solo colore riempie tutto il pulsante.

Una volta aperto, il widget funziona come sempre. Lo spazio di accesso si attiva solo se il tuo agent permette ai visitatori di accedere; con la Modalità solo anonimo (in “Il mio Tenant”) non si attiva mai. Da JavaScript, passa loadOnOpen: true (e, se vuoi, launcherText e theme) a window.IperChat.init({...}).

Pagina standalone (piano Enterprise)

Solo sul piano Enterprise: pagina chatbot full-screen servita dal tuo dominio personalizzato (es. assistente.miosito.it), senza riferimenti visibili a IperChat. Esperienza interamente white-label per brand che non vogliono condividere l’host chat.iperchat.ai.

Si attiva contattando info@iperchat.ai: configuriamo DNS e certificato SSL insieme al tuo team.

Impostazioni diverse su pagine specifiche

Ogni configurazione in “Configurazioni Agenti” ha un Origin ID. Quella che coincide con il tuo Tenant ID è la predefinita e vale ovunque. Per dare a una pagina un saluto, un modello o istruzioni diverse:

In “Configurazioni Agenti” crea una nuova configurazione. Come Origin ID usa un nome breve, ad esempio pagina-contatti. Il pannello mostra l’ID esatto che verrà salvato.
Solo su quella pagina, aggiungi allo snippet data-origin-website con quell’ID:

<script
  src="https://widget.iperchat.ai/iperchat.iife.js"
  data-iperchat-auto-init
  data-tenant-id="IL_TUO_TENANT_ID"
  data-origin-website="pagina-contatti"
></script>

Verifiche post-integrazione

Errore “dominio non autorizzato”

Per sicurezza, il backend confronta il dominio da cui parte la chiamata con la lista dei domini autorizzati sul tuo tenant. Se non corrisponde, l’agente non risponde.

Per autorizzare il dominio:

Apri “Il mio Tenant” nel pannello operativo.
Nella sezione Impostazioni trovi il campo Domini consentiti — è una lista separata da virgola.
Aggiungi il dominio esatto (es. www.miosito.it) in fondo alla lista e clicca Salva.

Cache, CDN, defer JS

Tre cose comuni che possono nascondere il widget:

Plugin di caching (W3 Total Cache, WP Rocket, ecc.) — svuota la cache dopo aver salvato lo snippet.
CDN (Cloudflare, Bunny) — purga la cache anche lì.
Defer JS / minificazione aggressiva — escludi iperchat.iife.js dalle regole di defer/inline.

Niente di tutto questo è specifico di IperChat: vale per qualsiasi script di terze parti.