Posso mettere più assistenti sulla stessa pagina?

Sì. Ogni script tag con una diversa data-apikey crea un bottone indipendente. Solo una chiamata alla volta: gli altri bottoni si disabilitano automaticamente durante una chiamata.

Il widget rallenta il mio sito?

No. Il widget pesa circa 15KB e carica la libreria di telefonia in background dopo 3 secondi, senza bloccare il rendering della pagina.

Sì. Il widget è responsive e funziona su smartphone e tablet. Il browser chiederà l'accesso al microfono come su desktop.

Cosa succede se l'utente non concede il microfono?

La chiamata non può partire. Il widget torna allo stato idle.

Posso personalizzare completamente l'aspetto?

Sì. Usa data-mode="api" per non avere nessuna interfaccia dal widget e costruisci la tua UI con le funzioni JavaScript AI4CALL.call(), AI4CALL.hangup(), AI4CALL.getState() e AI4CALL.onStateChange().

I domini del mio sito devono essere autorizzati?

Sì. Per sicurezza, ogni apikey è associata a una lista di domini autorizzati. Contatta il supporto AI4CALL per aggiungere o modificare i domini.

Il CallerID è sicuro?

Il CallerID è impostato lato client, quindi l'utente potrebbe modificarlo. Usalo come indicazione per personalizzare la conversazione dell'assistente, non come meccanismo di autenticazione o per accesso a dati sensibili.

AI4CALL Widget

Q: Posso passare il numero di telefono dell'utente loggato come CallerID?

Sì. Se il tuo sito ha un sistema di autenticazione, puoi iniettare nome e telefono dell'utente nei parametri data-cid-name e data-cid-num direttamente dal backend (es. PHP, Node.js). In alternativa, con data-mode="api" puoi passarli via JavaScript: AI4CALL.call({cidName: 'Mario Rossi', cidNum: '3331234567'}). L'assistente AI riceverà questi dati e potrà riconoscere chi sta chiamando.

Una riga di codice per far parlare i tuoi visitatori con l'assistente AI vocale direttamente dal browser.

📑

Quick Start

Copia e incolla nel tuo HTML. Fatto.

<!-- Aggiungi questo dove vuoi il bottone -->
<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="LA_TUA_APIKEY"></script>

🔑 Dove trovo la mia apikey?

Nel portale AI4CALL, nella scheda del tuo assistente. Ha il formato ai4call_sk_xxxxxxxx.

Parametri

Tutti i data-* disponibili nello script tag.

Parametro	Valori	Descrizione
data-mode embed	`embed` `fixed` `api`	embed = il bottone appare dove metti lo script tag. fixed = bottone flottante in un angolo, sempre visibile. api = nessuna grafica, solo API JavaScript.
data-style pill	`pill` `round` `square` `minimal` `pulse` `gradient` `outline` `3d` `glass` `neon`	Stile grafico del bottone. Vedi Gallery Stili.
data-color #e2241c	`#hex`	Colore primario del bottone.
data-position bottom-right	`bottom-right` `bottom-left` `top-right` `top-left` `bottom-center`	Posizione del bottone. Solo per `mode=fixed`.
data-text Parla con AI	testo libero	Testo del bottone (es. "Parla con Mario").
data-hide-branding false	`true` `false`	Nasconde "Powered by AI4CALL". Soggetto al piano contrattuale.

Parametro	Valori	Descrizione
data-cid-name AI4CALL-Widget	testo libero	Nome CallerID personalizzato visibile all'assistente.
data-cid-num 0000000000	numero	Numero CallerID personalizzato.

Parametro	Valori	Descrizione
data-lang it	`it` `en` `fr` `es`	Lingua dei testi automatici (Connessione, In chiamata, Riattacca).

Gallery Stili

10 stili disponibili. Scegli il colore e lo stato per vedere l'anteprima.

Comportamento

Il bottone cambia automaticamente aspetto in base allo stato della chiamata.

💡

Nessuna modale, nessun popup. Un singolo bottone che cambia stato. Più assistenti sulla stessa pagina? Solo una chiamata alla volta: gli altri si disabilitano automaticamente.

Esempi

Copia-incolla pronti per ogni scenario.

Esempio minimo

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"></script>

Stile e testo personalizzato

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-style="neon"
  data-text="Parla con Mario"
  data-color="#2ecc71"></script>

Floating in basso a sinistra

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="fixed"
  data-position="bottom-left"
  data-style="gradient"
  data-text="Assistente AI"
  data-color="#3498db"></script>

Con CallerID personalizzato

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-style="pulse"
  data-text="Chiama il ristorante"
  data-cid-name="Mario Ristorante"
  data-cid-num="3331234567"
  data-color="#e67e22"></script>

Gallery — più assistenti sulla stessa pagina

<div style="display:flex; gap:20px">
  <div>
    <h3>Mario — Ristorante</h3>
    <script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
      data-apikey="ai4call_sk_mario01"
      data-style="pulse"
      data-text="Chiama Mario"
      data-color="#e2241c"></script>
  </div>
  <div>
    <h3>Laura — Hotel</h3>
    <script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
      data-apikey="ai4call_sk_laura02"
      data-style="neon"
      data-text="Chiama Laura"
      data-color="#3498db"></script>
  </div>
</div>

Tutti i parametri

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="fixed"
  data-style="neon"
  data-color="#2ecc71"
  data-position="bottom-left"
  data-text="Parla con Mario"
  data-cid-name="Mario Ristorante"
  data-cid-num="3331234567"
  data-lang="it"
  data-hide-branding="true"></script>

API JavaScript

Per sviluppatori che vogliono creare la propria interfaccia personalizzata.

Usa data-mode="api" per non avere nessuna interfaccia dal widget. Costruisci la tua UI con le funzioni JavaScript esposte.

Funzione	Parametri	Descrizione
AI4CALL.call(opts)	`{cidName, cidNum}` opzionale	Avvia la chiamata verso l'assistente.
AI4CALL.hangup()	—	Riattacca la chiamata in corso.
AI4CALL.getState()	—	Ritorna lo stato: `idle`, `calling`, `connected`.
AI4CALL.onStateChange(fn)	`fn(state, secs)`	Callback ad ogni cambio stato. `secs` = durata chiamata in secondi.

Bottone singolo con toggle

<button id="myBtn" onclick="toggleCall()">Chiama Mario</button>

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="api"></script>

<script>
function toggleCall(){
  if(AI4CALL.getState() === 'idle')
    AI4CALL.call({cidName:'Mario', cidNum:'333123'});
  else
    AI4CALL.hangup();
}

AI4CALL.onStateChange(function(state, secs){
  var btn = document.getElementById('myBtn');
  if(state === 'connected'){
    var m = Math.floor(secs/60), s = secs%60;
    btn.textContent = 'Riattacca ' + (m<10?'0':'')+m+':'+(s<10?'0':'')+s;
    btn.style.background = '#e74c3c';
  } else if(state === 'calling'){
    btn.textContent = 'Connessione...';
    btn.style.background = '#f39c12';
  } else {
    btn.textContent = 'Chiama Mario';
    btn.style.background = '';
  }
});
</script>

CallerID dinamico con utente autenticato

👤 Scenario: l'utente è loggato sul tuo sito

Se il tuo sito ha un'area riservata con autenticazione, puoi passare il numero di telefono dell'utente loggato come CallerID. L'assistente AI saprà chi sta chiamando e potrà rispondere in modo personalizzato.

<!-- L'utente è già autenticato sul tuo sito -->
<!-- Il tuo backend inietta nome e telefono nel template -->

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-mode="api"></script>

<button id="callBtn" onclick="callWithUserCID()">
  Chiama l'assistente</button>

<script>
// Dati dell'utente loggato (iniettati dal tuo backend)
var utente = {
  nome: 'Mario Rossi',         // dal tuo DB
  telefono: '3331234567'        // dal tuo DB
};

function callWithUserCID(){
  if(AI4CALL.getState() === 'idle'){
    AI4CALL.call({
      cidName: utente.nome,       // L'assistente vede "Mario Rossi"
      cidNum: utente.telefono     // L'assistente vede "3331234567"
    });
  } else {
    AI4CALL.hangup();
  }
}
</script>

⚙️ Come funziona

Il CallerID viene passato come header SIP all'assistente AI. Se l'assistente è configurato con un tool MCP di lookup clienti, può riconoscere il numero e personalizzare la conversazione: "Buongiorno Mario, come posso aiutarla?"

Esempio PHP — iniettare i dati utente nel template

<?php
// Il tuo backend recupera i dati dell'utente loggato
$user = getLoggedUser();  // La tua funzione di autenticazione
?>

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-text="Parla con l'assistente"
  data-style="gradient"
  data-cid-name="<?= htmlspecialchars($user['nome']) ?>"
  data-cid-num="<?= htmlspecialchars($user['telefono']) ?>"></script>

⚠️ Nota sulla sicurezza

Il CallerID è lato client, quindi l'utente potrebbe modificarlo. Non usarlo per autenticazione o accesso a dati sensibili. Usalo come indicazione per l'assistente AI, non come garanzia di identità.

Requisiti tecnici

Cosa serve perché il widget funzioni.

🌐 WebRTC

Il browser deve supportare WebRTC. Tutti i browser moderni lo supportano: Chrome, Firefox, Safari, Edge.

🎤 Microfono

Il browser chiederà il permesso al primo click. Se l'utente rifiuta, la chiamata non parte.

🔒 HTTPS

Obbligatorio. WebRTC e l'accesso al microfono richiedono una connessione sicura.

📦 Nessuna dipendenza

Il widget carica tutto autonomamente (~15KB). La libreria SIP viene caricata in background dopo 3 secondi, senza bloccare la pagina.