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.
Top comments (0)