DEV Community: Tolola tech

Chatbot con IA para capturar leads: cómo lo construimos en tolola.tech con Claude y WhatsApp

Tolola tech — Sat, 09 May 2026 03:30:13 +0000

En tolola.tech reemplazamos el formulario de contacto de nuestra web por un chatbot con inteligencia artificial que entiende el negocio, responde consultas técnicas y deriva al visitante directamente a WhatsApp con un mensaje personalizado.

En este artículo contamos por qué lo hicimos, cómo lo construimos y cuánto cuesta operarlo.

El problema con los formularios de contacto

Los formularios tradicionales tienen un problema estructural: le piden al visitante que haga el esfuerzo. Tiene que pensar qué escribir, completar campos, esperar una respuesta que puede tardar horas.

La mayoría abandona antes de enviar.

Un chatbot invierte esa dinámica — es la herramienta la que hace las preguntas, entiende la necesidad y guía al visitante hacia el siguiente paso.

La decisión de diseño: derivar a WhatsApp

Podríamos haber cerrado el lead dentro del chat. Pero decidimos que el objetivo del chatbot no es reemplazar la conversación humana sino prepararla.

El flujo que diseñamos es:

Visitante llega a tolola.tech
        ↓
Abre el chat y describe su proyecto
        ↓
El chatbot entiende la necesidad y responde con contexto
        ↓
Cuando detecta que el visitante está listo
        ↓
Aparece un botón de WhatsApp con un mensaje pre-armado y personalizado
        ↓
La conversación continúa con el equipo humano

El chatbot no cierra la venta — la calienta. Cuando el visitante llega a WhatsApp ya explicó su proyecto, ya confía en la marca y ya está listo para hablar.

La arquitectura

El stack es deliberadamente simple:

Frontend: HTML + JavaScript vanilla — un widget flotante que vive en cualquier página
Backend: Vercel Function (Node.js) — un archivo de 15 líneas que actúa de proxy seguro
IA: API de Anthropic (Claude) — el modelo que procesa las conversaciones
Conversión: botón de WhatsApp con mensaje pre-armado generado por la IA

Por qué un proxy en lugar de llamar directo a la API

La API de Anthropic requiere una clave de autenticación. Si la ponés directo en el frontend, cualquiera que abra el código fuente puede robártela y usarla a tu costa.

La solución es una Vercel Function que actúa de intermediario:

Navegador del visitante → Vercel Function → API de Anthropic

La clave nunca toca el navegador. Queda guardada como variable de entorno en Vercel, encriptada y segura.

El código

La Vercel Function — `api/chat.js`

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();

  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.ANTHROPIC_API_KEY,
      'anthropic-version': '2023-06-01'
    },
    body: JSON.stringify({
      model: 'claude-opus-4-7',
      max_tokens: 1000,
      system: req.body.system,
      messages: req.body.messages
    })
  });

  const data = await response.json();
  res.status(200).json(data);
}

Eso es todo el backend. Vercel lo convierte automáticamente en un endpoint disponible en /api/chat.

El system prompt — el cerebro del chatbot

El system prompt es lo que hace que el chatbot sepa quién es, qué ofrece y cómo comportarse. No es código — es texto. Y se puede actualizar sin tocar nada más.

Sos el asistente virtual de tolola.tech, una consultora de software 
de Buenos Aires, Argentina.

SERVICIOS:
- Desarrollo web y mobile (React, Next.js, React Native)
- Integraciones API (Interbanking, Mercado Pago, Jumio, WhatsApp Business)
- IA y automatización
- MVP Express (4-8 semanas)

INSTRUCCIONES:
- Respondé en español rioplatense, tono cálido y directo
- Máximo 3 oraciones por respuesta
- Cuando el visitante esté listo para contactar, incluí al final:
  [WA_READY: mensaje personalizado para WhatsApp]

La instrucción [WA_READY:] es la clave de la conversión. Cuando el modelo detecta que el visitante está listo, incluye ese tag en su respuesta. El frontend lo detecta y muestra automáticamente el botón de WhatsApp con el mensaje pre-armado.

La detección del botón de WhatsApp en el frontend

const waMatch = raw.match(/\[WA_READY:\s*(.+?)\]/s);
let cleanText = raw.replace(/\[WA_READY:.*?\]/s, '').trim();

// Si el modelo incluyó el tag, mostramos el botón
if (waMatch) {
  const mensaje = encodeURIComponent(`Hola tolola.tech! ${waMatch[1].trim()}`);
  mostrarBotonWhatsApp(`https://wa.me/5491127246517?text=${mensaje}`);
}

El modelo genera un mensaje personalizado según lo que contó el visitante. Si alguien preguntó por integración con Interbanking, el botón va a abrir WhatsApp con: "Hola tolola.tech! Quiero consultar sobre integración con Interbanking para mi sistema de pagos."

El widget en acción

El widget tiene tres estados:

1. Cerrado — un botón flotante con gradiente violeta/rosa, con un punto de notificación que llama la atención sin ser invasivo.

2. Abierto — un panel de chat con header, área de mensajes, respuestas rápidas predefinidas y campo de input.

3. Listo para convertir — cuando el modelo decide que el visitante está listo, aparece el botón verde de WhatsApp dentro del propio chat.

Las respuestas rápidas al inicio ("¿Qué hacen?", "Quiero una app", "¿Cuánto cuesta?") reducen la fricción de arranque — el visitante puede empezar con un solo click sin escribir nada.

El costo real de operarlo

Una de las primeras preguntas que nos hacen es cuánto cuesta tener un chatbot con IA.

La respuesta es sorprendentemente accesible:

Componente	Costo
Vercel Functions	Gratis (plan Free)
Dominio	Ya lo tenés
API Anthropic	~USD 0.01 por conversación
Para arrancar	USD 5 de crédito

Con USD 5 de crédito en Anthropic tenés aproximadamente 500 conversaciones. Para una PyME o consultora que recibe decenas de consultas por mes, eso cubre varios meses de operación.

A medida que el tráfico crece, el costo escala de forma proporcional — no hay saltos ni compromisos mínimos.

Lo que aprendimos

El system prompt es el producto. El código del widget es genérico y reusable. Lo que diferencia un chatbot mediocre de uno que convierte es la calidad del system prompt — cuánto conoce del negocio, cómo habla, qué hace cuando detecta una oportunidad.

Menos es más en las respuestas. Limitamos las respuestas a 3 oraciones por defecto. Un chatbot que escribe párrafos largos pierde al visitante. La brevedad fuerza al modelo a ir al punto.

El objetivo no es responder todo — es avanzar la conversación. Cada respuesta del chatbot tiene que acercar al visitante un paso más hacia el contacto. Si el chatbot resuelve todas las dudas sin derivar, perdiste el lead.

La derivación a WhatsApp funciona mejor que un formulario. WhatsApp tiene una tasa de apertura cercana al 98%. Un lead que llega por WhatsApp ya caliente convierte mucho mejor que un formulario que espera respuesta por email.

¿Cuándo tiene sentido implementar esto?

Esta solución es ideal para:

Consultoras y agencias que reciben consultas de proyectos y necesitan calificar el lead antes de invertir tiempo
Empresas de servicios con un proceso de venta que empieza con una reunión de diagnóstico
PyMEs que quieren atender consultas fuera del horario laboral sin contratar más personas
Cualquier negocio donde WhatsApp es el canal principal de comunicación con clientes

¿Querés implementarlo en tu web?

En tolola.tech hacemos la integración completa — widget, backend seguro, system prompt personalizado con tu negocio y configuración del flujo de conversión.

La primera reunión es sin costo.

📩 tololatech@gmail.com
💬 WhatsApp: +54 9 11 2724-6517
🌐 tolola.tech

tolola.tech es una consultora de desarrollo de software especializada en integraciones API, chatbots con IA y automatización. Buenos Aires, Argentina.

Cómo integramos Tango Gestión con Interbanking y eliminamos la conciliación manual en dos empresas argentinas

Tolola tech — Sat, 09 May 2026 03:17:24 +0000

En tolola.tech terminamos recientemente el proyecto tango-integration-interapis: una integración entre el sistema de reportería de Tango Gestión y la API de confección de archivos de Interbanking. El resultado fue el mismo para los dos clientes — cero intervención manual en el proceso de pagos masivos.

En este artículo contamos cómo fue el proyecto, qué desafíos encontramos y por qué este tipo de integración vale la pena.

El problema que teníamos que resolver

Los dos clientes compartían el mismo dolor: usaban Tango Gestión para administrar su contabilidad y proveedores, pero el proceso de pago masivo a través de Interbanking era completamente manual.

El flujo antes de la integración era más o menos así:

El equipo de administración exportaba un reporte de Tango en Excel
Alguien lo revisaba, limpiaba y reformateaba a mano
Se subía el archivo al portal de Interbanking
Se esperaba la confirmación y se conciliaba de nuevo en Tango

Tiempo invertido por ciclo de pago: entre 3 y 5 horas. Con errores humanos frecuentes y dependencia total de una persona clave.

La solución: tango-integration-interapis

Diseñamos una capa de integración en Node.js + NestJS que conecta ambos extremos de forma automática.

Cómo funciona el flujo integrado

Tango Gestión (reportería)
        ↓
API interna que lee y transforma los datos
        ↓
Generación automática del archivo de confección Interbanking
        ↓
Upload vía API a la plataforma bancaria
        ↓
Confirmación y registro automático en el sistema

Los componentes principales

1. Extractor de reportes de Tango
Tango Gestión expone sus datos a través de reportes configurables. Construimos un módulo que consume esos reportes en formato estructurado y los normaliza para el paso siguiente.

2. Transformador al formato Interbanking
Interbanking tiene un formato de archivo de confección específico — campos de longitud fija, codificación particular, cabeceras y totales de control. Construimos un parser que transforma los datos de Tango al formato exacto que la API bancaria espera.

3. Validaciones previas
Antes de enviar cualquier archivo, el sistema valida: CBUs correctos, importes dentro de límites, coherencia de totales, fechas de acreditación válidas. Si algo falla, se notifica por email antes de que llegue al banco.

4. Integración con la API de Interbanking
La confección y envío de lotes de pago se realiza a través de la API de Interbanking, con autenticación por certificado digital y manejo de reintentos ante errores transitorios.

5. Registro y trazabilidad
Cada operación queda registrada con su estado, timestamp y referencia bancaria. El equipo de administración puede ver en tiempo real qué pagos se procesaron, cuáles quedaron pendientes y cuáles fallaron.

Los desafíos reales del proyecto

La documentación de Interbanking no es pública

Este fue el primer obstáculo. La API de Interbanking no tiene documentación abierta — se accede mediante acuerdo comercial con el banco. Trabajar con el equipo técnico del cliente para obtener las especificaciones y los certificados llevó tiempo, pero es un paso inevitable.

El formato de archivos tiene muchas variantes

Interbanking tiene distintos formatos según el tipo de operación: transferencias, débitos, pagos de haberes. Cada uno tiene sus propias reglas. Diseñamos el transformador de forma modular para que cada tipo de operación tenga su propia lógica sin mezclar responsabilidades.

Los datos de Tango necesitan limpieza

Los reportes de Tango son muy ricos en información, pero no siempre están normalizados de la forma que Interbanking espera. CBUs con espacios, importes con formato incorrecto, campos opcionales vacíos — el módulo de validación fue clave para detectar estos casos antes del envío.

Ambientes de prueba limitados

Interbanking tiene un ambiente de homologación, pero no replica todos los escenarios de producción. Parte de las pruebas finales se hicieron en producción con lotes de bajo importe, con rollback manual preparado.

El resultado

Métrica	Antes	Después
Tiempo por ciclo de pago	3 a 5 horas	8 minutos
Errores humanos	Frecuentes	Cero
Dependencia de persona clave	Alta	Eliminada
Trazabilidad	Manual en planilla	Automática con logs

Los dos clientes pasaron de un proceso propenso a errores y dependiente de una persona a un pipeline completamente automatizado que corre sin intervención.

¿Cuándo tiene sentido hacer esta integración?

Esta solución es especialmente valiosa para empresas que:

Procesan más de 20 pagos por ciclo (proveedores, haberes, comisiones)
Ya usan Tango Gestión como sistema contable
Operan con Interbanking como plataforma bancaria principal
Tienen errores recurrentes en el proceso manual de carga de archivos
Quieren eliminar la dependencia de una persona que "sabe cómo hacerlo"

Stack técnico

Backend: Node.js + NestJS
Integración Tango: Reportería vía módulo de exportación configurado
Integración Interbanking: API de confección con autenticación por certificado digital
Notificaciones: Email automático ante errores o confirmaciones
Infraestructura: Deploy en VPS con cron jobs para ejecución programada

¿Tu empresa tiene el mismo problema?

Si usás Tango Gestión y Interbanking y todavía estás procesando pagos de forma manual, podemos ayudarte.

En tolola.tech hacemos la primera reunión sin costo para entender tu caso y ver si esta integración aplica a tu operación.

📩 tololatech@gmail.com
💬 WhatsApp: +54 9 11 2724-6517
🌐 www.tolola.tech

tolola.tech es una consultora de desarrollo de software especializada en integraciones API, automatización e IA. Buenos Aires, Argentina.