Installazione
I tre snippet per installare il widget Audin — popup, popup con dati utente ed embedded — dove incollarli e come ottenere il widget-id dal dashboard.
Versione Markdown di questa pagina
Scarica o copia il contenuto di questa pagina in formato .md — utile per fornirlo a un agente AI che integra questa specifica feature.
Installare il widget significa incollare un solo snippet HTML nel tuo sito.
Lo snippet inietta un loader asincrono che carica il widget da
https://widget.audin.ai e lo inizializza automaticamente al caricamento.
Procedura
Crea un widget nel dashboard
Vai su app.audin.ai, crea (o apri) un widget e collega il bot che gestirà le
conversazioni. Da qui ottieni il data-widget-id — un identificativo
pubblico che useremo nello snippet.
Copia lo snippet
Scegli la modalità (popup o embedded) e copia lo snippet corrispondente, qui
sotto. Sostituisci il placeholder IL-TUO-WIDGET-ID con il widget-id reale.
Incollalo prima di </body>
Incolla lo snippet nel codice HTML del tuo sito, prima della chiusura del tag
</body>, su tutte le pagine in cui vuoi che il widget sia presente.
Il data-widget-id non è un segreto: finisce nell'HTML pubblico della tua
pagina. Diverso dall'Account API Key, che va usata solo lato server.
Gli snippet
La modalità più semplice: una bolla di chat in basso a destra. Il loader inietta
widget.js con il tuo data-widget-id e, al caricamento, chiama
AudinChat.init().
<script>(function(w,d,s,u,i){var f=d.getElementsByTagName(s)[0],
j=d.createElement(s);j.async=true;j.src=u;
j.setAttribute('data-widget-id',i);
j.onload=function(){w.AudinChat.init()};
f.parentNode.insertBefore(j,f);
})(window,document,'script','https://widget.audin.ai/widget.js','IL-TUO-WIDGET-ID');</script>Stesso loader della versione base, ma passa i dati dell'utente loggato a
AudinChat.init(). Serve a collegare la conversazione a un lead del tuo
Account. Sostituisci i valori di esempio con quelli reali dal tuo sistema.
<script>(function(w,d,s,u,i){var f=d.getElementsByTagName(s)[0],
j=d.createElement(s);j.async=true;j.src=u;
j.setAttribute('data-widget-id',i);
j.onload=function(){w.AudinChat.init({
user: {
email: "utente@esempio.com",
phone: "+39123456789",
fullName: "Nome Cognome"
}
})};
f.parentNode.insertBefore(j,f);
})(window,document,'script','https://widget.audin.ai/widget.js','IL-TUO-WIDGET-ID');</script>Passa solo i dati di cui hai effettivamente diritto e che ti servono per il
matching. Tutti i dettagli (campi disponibili, customData, nota privacy)
sono in Dati utente & lead matching.
La chat viene renderizzata inline dentro un <div> del tuo layout invece che
come popup. Inserisci il container dove vuoi che appaia la chat e dimensionalo a
piacere; il loader usa widget-embedded.js, l'attributo
data-target="#audin-chat" per puntare al container e chiama AudinEmbed.init().
<div id="audin-chat" style="width: 400px; height: 600px;"></div>
<script>(function(w,d,s,u,i){var f=d.getElementsByTagName(s)[0],
j=d.createElement(s);j.async=true;j.src=u;
j.setAttribute('data-widget-id',i);
j.setAttribute('data-target','#audin-chat');
j.onload=function(){w.AudinEmbed.init()};
f.parentNode.insertBefore(j,f);
})(window,document,'script','https://widget.audin.ai/widget-embedded.js','IL-TUO-WIDGET-ID');</script>Il container può avere qualsiasi id e dimensioni: assicurati solo che il
valore di data-target corrisponda al selettore del tuo <div>. Anche la
versione embedded accetta i dati utente in AudinEmbed.init({ user: { … } }).
Dove prendere lo snippet ufficiale
Gli snippet qui sopra sono identici a quelli che il dashboard (app.audin.ai)
genera nella schermata di installazione del widget, già pronti con il tuo
data-widget-id precompilato. Puoi copiarli direttamente da lì con il pulsante
"Copia".
Prossimi passi
Widget
Il widget chat embeddable di Audin — aggiungi un assistente AI conversazionale al tuo sito incollando un solo snippet, in modalità popup o embedded.
Dati utente & lead matching
Passare email, telefono, nome e dati custom dell'utente loggato al widget Audin per collegare la conversazione a un lead, e come funziona il visitorId.