AI4CALL Widget

Una línea de código para que tus visitantes hablen con el asistente IA de voz directamente desde el navegador.

📑

1

Inicio rápido

Copia y pega en tu HTML. Listo.

<!-- Añade esto donde quieras el botón -->
<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="TU_APIKEY"></script>
🔑 ¿Dónde encuentro mi apikey?
En el portal AI4CALL, en la ficha de tu asistente. Tiene el formato ai4call_sk_xxxxxxxx.
2

Parámetros

Todos los data-* disponibles en el script tag.

Obligatorio
data-apikey REQUIRED cadena Apikey del asistente AI4CALL. Identifica qué asistente responde a la llamada.
Aspecto
ParámetroValoresDescripción
data-mode embed embed fixed api embed = el botón aparece donde colocas el script tag.
fixed = botón flotante en una esquina, siempre visible.
api = sin interfaz, solo API JavaScript.
data-style pill pill round square minimal pulse gradient outline 3d glass neon Estilo gráfico del botón. Ver galería de estilos.
data-color #e2241c #hex Color principal del botón.
data-position bottom-right bottom-right bottom-left top-right top-left bottom-center Posición del botón. Solo para mode=fixed.
data-text Habla con la IA texto libre Texto del botón (p. ej. "Habla con Mario").
data-hide-branding false true false Oculta "Powered by AI4CALL". Sujeto al plan contractual.
Telefonía
ParámetroValoresDescripción
data-cid-name AI4CALL-Widget texto libre Nombre CallerID personalizado visible para el asistente.
data-cid-num 0000000000 número Número CallerID personalizado.
Idioma
ParámetroValoresDescripción
data-lang it it en fr es Idioma de los textos automáticos (Conexión, En llamada, Colgar).
3

Galería de estilos

10 estilos disponibles. Elige el color y el estado para ver la vista previa.

Color

Estado

4

Comportamiento

El botón cambia automáticamente de aspecto según el estado de la llamada.

Idle

Muestra el texto configurado. Click → inicia la llamada.

Conexión

Botón naranja, "Conexión...". Click → cancela.

En llamada

Botón verde, "En llamada 00:32" con temporizador. Click → cuelga.

💡
Sin modal, sin popup. Un único botón que cambia de estado. ¿Varios asistentes en la misma página? Solo una llamada a la vez: los otros se desactivan automáticamente.
5

Ejemplos

Snippets listos para copiar y pegar para cada escenario.

Ejemplo mínimo

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

Estilo y texto personalizados

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

Flotante abajo a la izquierda

<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="Asistente IA"
  data-color="#3498db"></script>

Con CallerID personalizado

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-style="pulse"
  data-text="Llamar al restaurante"
  data-cid-name="Mario Restaurante"
  data-cid-num="3331234567"
  data-color="#e67e22"></script>

Galería — varios asistentes en la misma página

<div style="display:flex; gap:20px">
  <div>
    <h3>Mario — Restaurante</h3>
    <script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
      data-apikey="ai4call_sk_mario01"
      data-style="pulse"
      data-text="Llamar a 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="Llamar a Laura"
      data-color="#3498db"></script>
  </div>
</div>

Todos los parámetros

<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="Habla con Mario"
  data-cid-name="Mario Restaurante"
  data-cid-num="3331234567"
  data-lang="it"
  data-hide-branding="true"></script>
6

API JavaScript

Para desarrolladores que quieran crear su propia interfaz personalizada.

Usa data-mode="api" para no tener interfaz del widget. Construye tu UI con las funciones JavaScript expuestas.

Funciones disponibles
FunciónParámetrosDescripción
AI4CALL.call(opts) {cidName, cidNum} opcional Inicia la llamada al asistente.
AI4CALL.hangup() — Cuelga la llamada en curso.
AI4CALL.getState() — Devuelve el estado: idle, calling, connected.
AI4CALL.onStateChange(fn) fn(state, secs) Callback en cada cambio de estado. secs = duración de la llamada en segundos.

Botón único con toggle

<button id="myBtn" onclick="toggleCall()">Llamar a 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 = 'Colgar ' + (m<10?'0':'')+m+':'+(s<10?'0':'')+s;
    btn.style.background = '#e74c3c';
  } else if(state === 'calling'){
    btn.textContent = 'Conexión...';
    btn.style.background = '#f39c12';
  } else {
    btn.textContent = 'Llamar a Mario';
    btn.style.background = '';
  }
});
</script>

CallerID dinámico con usuario autenticado

👤 Escenario: el usuario está logueado en tu sitio
Si tu sitio tiene una zona privada con autenticación, puedes pasar el número de teléfono del usuario logueado como CallerID. El asistente IA sabrá quién está llamando y podrá responder de forma personalizada. 
<!-- El usuario ya está autenticado en tu sitio -->
<!-- Tu backend inyecta nombre y teléfono en el 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()">
  Llamar al asistente</button>

<script>
// Datos del usuario logueado (inyectados por tu backend)
var utente = {
  nome: 'Mario Rossi',         // desde tu BD
  telefono: '3331234567'        // desde tu BD
};

function callWithUserCID(){
  if(AI4CALL.getState() === 'idle'){
    AI4CALL.call({
      cidName: utente.nome,       // El asistente ve "Mario Rossi"
      cidNum: utente.telefono     // El asistente ve "3331234567"
    });
  } else {
    AI4CALL.hangup();
  }
}
</script>
⚙️ Cómo funciona
El CallerID se pasa como cabecera SIP al asistente IA. Si el asistente está configurado con una herramienta MCP de búsqueda de clientes, puede reconocer el número y personalizar la conversación: "Buenos días Mario, ¿en qué puedo ayudarle?"

Ejemplo PHP — inyectar los datos del usuario en el template

<?php
// Tu backend recupera los datos del usuario logueado
$user = getLoggedUser();  // Tu función de autenticación
?>

<script src="https://verdephone.beevoip.it/widget/ai4call-widget.js"
  data-apikey="ai4call_ab_123awt123"
  data-text="Habla con el asistente"
  data-style="gradient"
  data-cid-name="<?= htmlspecialchars($user['nome']) ?>"
  data-cid-num="<?= htmlspecialchars($user['telefono']) ?>"></script>
⚠️ Nota de seguridad
El CallerID se establece en el cliente, así que el usuario podría modificarlo. No lo uses para autenticación o acceso a datos sensibles. Úsalo como pista para el asistente IA, no como garantía de identidad.
7

Requisitos técnicos

Lo que necesitas para que el widget funcione.

🌐 WebRTC
El navegador debe soportar WebRTC. Todos los navegadores modernos lo hacen: Chrome, Firefox, Safari, Edge.
🎤 Micrófono
El navegador pedirá permiso en el primer click. Si el usuario lo rechaza, la llamada no puede iniciarse.
🔒 HTTPS
Obligatorio. WebRTC y el acceso al micrófono requieren una conexión segura.
📦 Sin dependencias
El widget carga todo de forma autónoma (~15KB). La librería SIP se carga en segundo plano tras 3 segundos, sin bloquear la página.

Preguntas frecuentes

Sí. Cada script tag con un data-apikey diferente crea un botón independiente. Solo una llamada a la vez: los otros botones se desactivan automáticamente durante una llamada.

No. El widget pesa unos 15KB y carga la librería de telefonía en segundo plano tras 3 segundos, sin bloquear el render de la página.

Sí. El widget es responsive y funciona en smartphones y tablets. El navegador pedirá acceso al micrófono igual que en escritorio.

La llamada no puede iniciarse. El widget vuelve al estado idle.

Sí. Usa data-mode="api" para no tener interfaz del widget y construye tu UI con las funciones JavaScript AI4CALL.call(), AI4CALL.hangup(), AI4CALL.getState() y AI4CALL.onStateChange().

Sí. Por seguridad, cada apikey está asociada a una lista de dominios autorizados. Contacta con el soporte AI4CALL para añadir o modificar dominios.

Sí. Si tu sitio tiene autenticación, puedes inyectar nombre y teléfono del usuario en data-cid-name y data-cid-num directamente desde el backend (p. ej. PHP, Node.js). También puedes, con data-mode="api", pasarlos vía JavaScript: AI4CALL.call({cidName: 'Mario Rossi', cidNum: '3331234567'}). El asistente IA recibirá estos datos y podrá reconocer al que llama.

El CallerID se establece en el cliente, así que el usuario podría modificarlo. Úsalo para personalizar la conversación del asistente, no como mecanismo de autenticación o para acceso a datos sensibles.


Algunos de los usuarios de ai4call