2Chat Voice SDK: Cómo Agregar Llamadas de Voz a tu App Web Sin Ser Experto en Telecomunicaciones

Imagina que tu equipo de soporte puede llamar a los clientes directamente desde el CRM, sin cambiar de aplicación, sin teléfonos físicos y sin facturas desorbitadas de telefonía.

Eso es exactamente lo que el 2Chat Voice SDK hace posible. Es una librería de JavaScript que cualquier desarrollador puede instalar en su aplicación web para agregar llamadas de voz entrantes y salientes, con la misma calidad de una llamada telefónica normal pero funcionando 100% desde el navegador.

Este artículo te explica qué es, para qué sirve, cómo funciona y cómo puedes empezar a usarlo hoy mismo, aunque no tengas experiencia previa en telecomunicaciones.

¿Qué es exactamente el 2Chat Voice SDK?

El 2Chat Voice SDK (cuyo nombre técnico en el ecosistema de paquetes es @2chat/voice-sdk) es una herramienta de software que los desarrolladores integran en aplicaciones web para habilitar llamadas telefónicas reales directamente desde el navegador.

Piénsalo así: normalmente, para hacer una llamada telefónica necesitas un teléfono físico, una tarjeta SIM y una línea de operadora. El SDK de 2Chat reemplaza todo eso con código. Tu aplicación web se convierte en el teléfono.

💡 En términos simples: Es como instalar WhatsApp Web en tu propia aplicación, pero con llamadas a números de teléfono reales del mundo, no solo a otros usuarios de la misma app.

La tecnología detrás se llama WebRTC, el mismo estándar que usa Google Meet o Zoom para las videollamadas, combinada con un protocolo de telefonía llamado SIP. 2Chat se encarga de toda esa complejidad técnica; tú solo necesitas unas pocas líneas de código.

El problema real que viene a resolver

Las empresas que trabajan con equipos de atención al cliente, ventas o soporte se enfrentan a un problema cotidiano: sus herramientas están fragmentadas.

El agente tiene el CRM en una pantalla, el teléfono físico en el escritorio, el historial de WhatsApp en el móvil y el correo en otra pestaña. Cada llamada implica cambiar de contexto, perder tiempo buscando datos del cliente y cometer errores.

Las soluciones tradicionales (centralitas físicas, sistemas PBX empresariales, teléfonos IP) cuestan miles de euros, requieren hardware especializado y necesitan meses de configuración por parte de técnicos.

⚠️ El costo oculto de la fragmentación: Los estudios de productividad en centros de atención muestran que los agentes pierden entre 15 y 20 minutos al día cambiando entre aplicaciones. En un equipo de 10 personas, eso equivale a perder a una persona entera cada semana.

El 2Chat Voice SDK resuelve esto permitiendo que el teléfono viva dentro de tu aplicación ya existente, con una experiencia completamente personalizada que tú diseñas.

Funcionalidades principales del SDK

Estas son las capacidades que obtienes al integrar el 2Chat Voice SDK en tu proyecto:

Casos de uso reales: ¿qué puedo construir?

La documentación oficial menciona varios escenarios de uso. Aquí los desglosamos con ejemplos del mundo real:

1. Click-to-call en un CRM o helpdesk

El agente ve el historial del cliente y hace clic en el número de teléfono para llamar directamente, sin salir de la pantalla. El historial, las notas y la llamada están en el mismo lugar al mismo tiempo.

2. Panel de administración interno con teléfono integrado

Empresas de logística, e-commerce o salud pueden dar a sus equipos internos la capacidad de llamar a clientes, proveedores o pacientes desde el panel que ya usan a diario, sin necesidad de teléfonos físicos.

3. Softphone multi-agente para call centers modernos

Un call center sin hardware: cada agente tiene su propio token, su propia línea y su propia interfaz personalizada. El supervisor puede ver en tiempo real quién está en llamada y gestionar las colas desde el mismo sistema.

4. Interfaz de llamadas personalizada sobre números virtuales

Si tu negocio ya tiene números virtuales de 2Chat, puedes construir exactamente la interfaz de llamadas que necesitas, con tu marca, tus colores y la experiencia que mejor se adapta a tu flujo de trabajo.

✅ Dato clave: Al ser framework-agnostic (compatible con cualquier tecnología web), el SDK se puede agregar a una aplicación existente sin necesidad de reescribirla. Si tu CRM ya está construido, puedes añadir llamadas de voz con un cambio mínimo de código.

Cómo funciona el SDK por dentro (sin tecnicismos)

Entender el flujo general te ayudará a explicarle a tu equipo técnico qué necesitan construir. La arquitectura tiene tres piezas:

Paso 1 — Tu servidor pide un permiso temporal

Tu backend (el servidor de tu empresa, no el navegador del usuario) usa la clave API secreta de 2Chat para pedir un "token de acceso" con duración configurable al momento de la solicitud. Es como un pase de visitante que caduca.

Paso 2 — El navegador recibe el pase temporal

Tu aplicación web (lo que ve el usuario) recibe ese token temporal y se lo entrega al SDK. El SDK nunca ve ni necesita la clave API original. Si alguien intercepta el token, tiene un tiempo límite antes de que quede inútil.

Paso 3 — El SDK se conecta y queda listo

Con ese token, el SDK se registra en el servidor de telefonía de 2Chat. A partir de ese momento, la aplicación puede hacer y recibir llamadas. Cuando el token está por vencer, el SDK te avisa para que pidas uno nuevo sin interrumpir la sesión.

Tus primeros pasos: del cero a tu primera llamada

Aquí está el código mínimo necesario para hacer tu primera llamada de voz desde el navegador. Son tres pasos fundamentales.

Paso 1: Instala el paquete

# Con npm
npm install @2chat/voice-sdk

# O añade directamente en tu HTML sin bundler
<script src="https://cdn.jsdelivr.net/npm/@2chat/voice-sdk/dist/index.global.js"></script>

Paso 2: Tu backend genera el token de acceso

Tu servidor hace una petición a la API de 2Chat con tu clave secreta y recibe un token temporal para el agente:

// En tu servidor — la clave API nunca llega al navegador
const response = await fetch('https://api.p.2chat.io/open/sdk/access-token', {
  method: 'POST',
  headers: {
    'X-User-API-Key': process.env.TWOCHAT_API_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    user_uuid: 'USR48a1c2f0-...',  // UUID del agente en 2Chat
    label: 'agente-soporte-1'
  })
});
const { token } = await response.json();
// Devuelve este token a tu frontend

Paso 3: Inicializa el SDK en el navegador y realiza la llamada

import { Device } from '@2chat/voice-sdk';

// 1. Pide el token a tu backend
const { token } = await fetch('/api/voice-token').then(r => r.json());

// 2. Crea el dispositivo virtual
const device = new Device({ token });

// 3. Escucha los eventos importantes
device.on('registered', () => console.log('✅ Listo para llamar'));
device.on('incoming', (call) => {
  // Llamada entrante: acepta o rechaza según tu lógica
  call.accept();
});

// 4. Renueva el token antes de que expire
device.on('tokenWillExpire', async () => {
  const fresh = await fetch('/api/voice-token').then(r => r.json());
  device.updateToken(fresh.token);
});

// 5. Registra el dispositivo
await device.register();

// 6. ¡Realiza tu primera llamada!
const call = await device.connect({
  to: '+573001234567',   // número destino
  from: '+15550000000'  // tu número virtual de 2Chat
});

call.on('accepted', () => console.log('📞 Conectado'));
call.on('disconnect', () => console.log('Llamada terminada'));

Controles durante la llamada

call.mute(true);         // silenciar micrófono
call.hold(true);         // poner en espera
call.sendDigits('1');    // enviar tono (para menús IVR)
await call.disconnect(); // colgar

¿Por qué elegir 2Chat Voice SDK sobre otras opciones?

Existen otras soluciones para agregar voz a aplicaciones web. Aquí una comparación honesta:

Una de las ventajas más relevantes de 2Chat es que el Voice SDK forma parte de una plataforma más amplia que también incluye WhatsApp Business API, SMS y números virtuales. Esto significa que puedes unificar toda la comunicación con tus clientes en un solo proveedor y una sola API.

¿Qué necesito para empezar?

Los prerequisitos son mínimos:

• Una cuenta en 2chat.co con al menos un número virtual o un identificador de llamada registrado.
• Un servidor propio (puede ser cualquier lenguaje: Node.js, Python, Ruby, PHP…) capaz de hacer una petición HTTP. Es donde guardarás tu clave API de forma segura.
• Conocimientos básicos de JavaScript para integrar el SDK en tu aplicación web.

📖 Documentación oficial: Puedes consultar el Quickstart completo, la referencia de la API del Device, la API del Call y la guía de manejo de errores en developers.2chat.co/docs/Voice-SDK/overview.

Empieza a construir hoy. La documentación está disponible, el paquete está en npm y el primer número virtual puedes tenerlo en cuestión de minutos.

👉 Leer la documentación

👉 Crear una cuenta en 2Chat