---
title: Widget
description: Il widget chat embeddable di Audin — aggiungi un assistente AI conversazionale al tuo sito incollando un solo snippet, in modalità popup o embedded.
---

Il **Widget** di Audin è una **chat conversazionale AI embeddable**: la aggiungi
al tuo sito web incollando un breve snippet HTML, senza dipendere da framework
o build tool. Il widget si collega all'assistente che hai configurato nel
dashboard (`app.audin.ai`) e gestisce la conversazione con i visitatori.

<AgentGuide file="/widget-agent-guide.md" filename="widget-agent-guide.md" />

<Callout type="info">
  L'**aspetto e il comportamento** del widget (testi, bot collegato, stile) si
  configurano **nel dashboard**, non nel codice di embed. Lo snippet che incolli
  serve solo a caricare il widget e a identificarlo con il suo `data-widget-id`.
</Callout>

## Due modalità

Il widget può essere usato in due modi, a seconda di dove vuoi che appaia la chat.

<Cards>
  <Card title="Popup" description="Una bolla in basso a destra che apre la chat in overlay. È la modalità classica del 'live chat': basta un solo snippet, niente layout da gestire." />
  <Card title="Embedded" description="La chat viene renderizzata inline dentro un <div> del tuo layout, con le dimensioni che scegli tu. Utile per pagine di supporto o sezioni dedicate." />
</Cards>

Le due modalità possono anche **coesistere** nella stessa pagina (popup +
embedded insieme).

## Come funziona

Il widget viene caricato da `https://widget.audin.ai` ed è renderizzato dentro
un **iframe** isolato dalla tua pagina. Tu non includi codice della chat nel tuo
bundle: incolli solo un piccolo loader asincrono che inietta lo script del
widget e, al caricamento, lo inizializza.

```text
┌──────────────────────────────┐         ┌──────────────────────────────┐
│  La tua pagina web           │         │  widget.audin.ai             │
│  • snippet loader (1 riga)   │  load   │  • widget.js / -embedded.js  │
│  • data-widget-id            │ ──────▶  │  • iframe della chat         │
│  • (opz.) dati utente        │         │  • config dal dashboard      │
└──────────────────────────────┘         └──────────────────────────────┘
```

Ogni widget è identificato da un **`data-widget-id`** che ottieni dal dashboard
quando crei o configuri un widget. Il `data-widget-id` **non è un segreto**:
finisce nel codice HTML pubblico della tua pagina, quindi è sicuro esporlo (a
differenza dell'Account API Key, che resta sempre lato server).

A ogni visitatore viene associato un **`visitorId`** generato e persistito nel
`localStorage` del browser, così le conversazioni dello stesso utente restano
collegate tra le visite.

## Prerequisiti

Per integrare il widget ti servono:

- Un **Account Audin** con un **widget configurato** nel dashboard
  (`app.audin.ai`), da cui ottieni il `data-widget-id`.
- Accesso al **codice HTML del tuo sito** (o al template/CMS) per incollare lo
  snippet prima della chiusura del tag `</body>`.
- Per la modalità embedded, un punto del layout in cui inserire il `<div>`
  container della chat.

## Prossimi passi

<Cards>
  <Card href="/docs/widget/installazione" title="Installazione" description="I 3 snippet (popup, con dati utente, embedded), dove incollarli e come ottenere il widget-id." />
  <Card href="/docs/widget/dati-utente" title="Dati utente & lead matching" description="Passare email, telefono e nome dell'utente loggato per collegare la conversazione a un lead." />
  <Card href="/docs/widget/api-ed-eventi" title="API & eventi" description="L'API JavaScript del widget (init, open, close, destroy, on) e gli eventi disponibili." />
  <Card href="/docs/widget/configurazione-e-comportamento" title="Configurazione & comportamento" description="Cosa si configura nel dashboard vs lato codice, SPA e cambio rotta, coesistenza popup + embedded." />
  <Card href="/docs/widget/troubleshooting" title="Troubleshooting" description="Il widget non appare, eventi non ricevuti, iframe/CSP e altre situazioni comuni." />
</Cards>