Cómo crear un chatbot con IA para atención al cliente desde cero (paso a paso)
Lo que vamos a construir
Un chatbot que:
- ✅ Responde preguntas frecuentes automáticamente
- ✅ Funciona 24/7 sin que estés presente
- ✅ Se integra en tu web con un widget flotante
- ✅ Aprende de tu contenido (PDFs, web, FAQs)
- ✅ Escala conversaciones a humano cuando es necesario
Tiempo estimado: 1-2 horas
Coste: Gratis para empezar (planes desde €0-20/mes después)
Conocimientos previos: Ninguno (te explico todo)
¿Por qué necesitas un chatbot de IA en 2025?
Vamos al grano:
Antes (sin chatbot):
- Cliente pregunta a las 23:00 → No hay nadie → Se va a la competencia
- 10 personas preguntan "¿Hacéis envíos a Canarias?" → Respondes lo mismo 10 veces
- Pierdes tiempo en preguntas repetitivas → No te enfocas en cerrar ventas
Después (con chatbot):
- Cliente pregunta a las 23:00 → Bot responde al instante → Cliente satisfecho
- 100 personas preguntan lo mismo → Bot responde → Tú haces otras cosas
- Bot filtra consultas → Solo hablas con quien realmente está interesado
Resultado: Más tiempo, menos fricción, más conversiones.
Herramientas que vamos a usar
Opción 1: **Chatbase** (La más fácil, recomendada para empezar)
- ✅ No-code (0 programación)
- ✅ Entrenas el bot con tu contenido (PDFs, URLs, texto)
- ✅ Widget para tu web con 1 línea de código
- ✅ Plan gratuito: 30 mensajes/mes
- ✅ Planes desde €19/mes
Opción 2: **Voiceflow** (Más personalizable)
- ✅ Editor visual tipo Figma
- ✅ Integración con APIs propias
- ✅ Plan gratuito más generoso
- ✅ Mejor para flujos complejos
Opción 3: **Código desde cero** (Para developers)
- ✅ Control total
- ✅ OpenAI API + React
- ✅ Hosting propio
- ✅ Te explico cómo al final
Para este tutorial usaremos Chatbase porque es la más rápida y no necesitas programar nada.
Paso 1: Preparar tu contenido (15 minutos)
Antes de crear el bot, necesitas entrenarle con información de tu negocio.
¿Qué necesitas reunir?
1. FAQs (Preguntas Frecuentes)
- ¿Cuánto cuesta?
- ¿Hacéis envíos?
- ¿Cuál es el plazo de entrega?
- ¿Tenéis garantía?
2. Información de tu web
- URL de tu página de servicios
- URL de precios/tarifas
- URL de contacto
- Páginas relevantes
3. Documentos útiles (opcional)
- Catálogo de productos (PDF)
- Condiciones de servicio
- Política de devoluciones
💡 Tip: Cuanta más información le des, mejor responderá. Pero empieza con lo básico.
Paso 2: Crear cuenta en Chatbase (5 minutos)
1. Ve a chatbase.co
2. Haz clic en "Get Started for Free"
3. Regístrate con Google o email
4. Confirma tu email
Importante: El plan gratuito incluye:
- 1 chatbot
- 30 mensajes/mes
- 400,000 caracteres de entrenamiento
Suficiente para probar. Luego puedes escalar.
Paso 3: Crear tu primer chatbot (20 minutos)
3.1 Crear nuevo chatbot
1. En el dashboard, haz clic en "New Chatbot"
2. Dale un nombre (ej: "Asistente Virtual TuEmpresa")
3. Selecciona el idioma: Español
3.2 Entrenar el bot con tu contenido
Tienes 4 formas de añadir información:
#### Opción A: Subir archivo de texto
1. Crea un archivo `.txt` con tus FAQs
2. Formato simple:
¿Cuánto cuesta el servicio?
Nuestros precios van desde €500 hasta €5.000 dependiendo del proyecto. Ofrecemos presupuesto personalizado sin compromiso.
¿Hacéis envíos internacionales?
Sí, enviamos a toda Europa. El plazo de entrega es de 3-5 días laborables.
¿Tenéis garantía?
Todos nuestros servicios incluyen garantía de 12 meses.
3. Sube el archivo en Chatbase
#### Opción B: Pegar texto directamente
1. Copia el contenido de tus FAQs
2. Pégalo en el campo "Text"
3. Haz clic en "Add"
#### Opción C: Añadir URLs de tu web
1. Introduce la URL de tu página (ej: `https://tuweb.com/servicios`)
2. Chatbase rastreará y extraerá el contenido
3. Repite con cada página relevante
#### Opción D: Subir PDFs
1. Sube tu catálogo, condiciones, etc.
2. El bot extraerá el texto automáticamente
💡 Recomendación: Empieza con texto directo (Opción B). Es más rápido y tienes control total.
Paso 4: Configurar personalidad y reglas (15 minutos)
4.1 Definir el tono del bot
En Settings → Bot Personality, define cómo debe hablar:
Ejemplo de instrucciones:
Eres un asistente virtual de [TuEmpresa], especializada en [tu sector].
TONO:
- Amable pero profesional
- Directo y claro
- Sin tecnicismos innecesarios
REGLAS:
1. Si no sabes la respuesta, di "No tengo esa información, pero puedo conectarte con un humano"
2. Siempre ofrece contactar con el equipo si la consulta es compleja
3. No inventes precios ni datos que no tengas
4. Responde en español de España
EJEMPLO DE RESPUESTA:
"Hola! Claro, te ayudo con eso. Nuestros [servicios/productos] incluyen [X, Y, Z]. ¿Te gustaría saber algo más específico?"
4.2 Configurar respuesta inicial
First Message (mensaje de bienvenida):
👋 ¡Hola! Soy el asistente virtual de [TuEmpresa].
¿En qué puedo ayudarte hoy?
- Información sobre servicios
- Precios y presupuestos
- Plazos de entrega
- Contactar con el equipo
4.3 Configurar fallback (cuando no sabe)
Fallback Response:
Hmm, no tengo esa información exacta. Pero puedo conectarte con mi equipo para que te ayuden mejor. ¿Quieres que te pasen al chat humano o prefieres que te llamemos?
Paso 5: Probar el chatbot (10 minutos)
Antes de publicar, prueba todo:
1. En Chatbase, ve a "Test"
2. Haz preguntas reales que harían tus clientes:
- "¿Cuánto cuesta?"
- "¿Hacéis envíos?"
- "Quiero un presupuesto"
- "¿Dónde estáis?"
3. Revisa las respuestas:
- ✅ ¿Son correctas?
- ✅ ¿Suenan naturales?
- ✅ ¿Faltan datos?
4. Si algo falla:
- Vuelve a Sources y añade más info
- Ajusta las instrucciones en Settings
💡 Tip: Pide a un amigo o empleado que pruebe el bot. Te sorprenderá lo que no habías pensado.
Paso 6: Integrar en tu web (15 minutos)
6.1 Obtener el código del widget
1. En Chatbase, ve a "Deploy"
2. Selecciona "Embed on website"
3. Copia el código que te da (será algo así):
<script>
window.embeddedChatbotConfig = {
chatbotId: "TU_ID_AQUI",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="TU_ID_AQUI"
domain="www.chatbase.co"
defer>
</script>
6.2 Añadir el código a tu web
#### Si usas WordPress:
Opción A - Con plugin (la más fácil):
1. Instala el plugin "Insert Headers and Footers"
2. Ve a Ajustes → Insert Headers and Footers
3. Pega el código en la sección "Scripts in Footer"
4. Haz clic en "Save"
Opción B - En el personalizador:
1. Ve a Apariencia → Personalizar
2. Busca la opción "CSS Adicional" o "Código personalizado" (depende de tu tema)
3. Si tu tema no tiene esta opción, usa la Opción A
Opción C - Editando el tema directamente:
1. Ve a Apariencia → Editor de temas
2. Abre el archivo footer.php
3. Pega el código justo antes de ``
4. Guarda cambios
⚠️ Cuidado: La Opción C se borrará si actualizas el tema. Mejor usa un tema hijo o la Opción A.
#### Si tienes web custom (HTML/React/Next.js):
HTML puro:
<!DOCTYPE html>
<html>
<head>
<title>Mi Web</title>
</head>
<body>
<!-- Tu contenido aquí -->
<!-- Chatbot - pegar antes de </body> -->
<script>
window.embeddedChatbotConfig = {
chatbotId: "TU_ID_AQUI",
domain: "www.chatbase.co"
}
</script>
<script
src="https://www.chatbase.co/embed.min.js"
defer>
</script>
</body>
</html>
Next.js (App Router):
Crea un componente para el chatbot:
// components/ChatbaseWidget.tsx
'use client';
"syntax-keyword">import { useEffect } from 'react';
"syntax-keyword">export default "syntax-keyword">function ChatbaseWidget() {
useEffect(() => {
// @ts-ignore
window.embeddedChatbotConfig = {
chatbotId: "TU_ID_AQUI",
domain: "www.chatbase.co"
};
"syntax-keyword">const script = document.createElement('script');
script.src = 'https://www.chatbase.co/embed.min.js';
script.defer = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return null;
}
Luego añádelo en tu layout:
// app/layout.tsx
"syntax-keyword">import ChatbaseWidget from '@/components/ChatbaseWidget';
"syntax-keyword">export default "syntax-keyword">function RootLayout({ children }) {
return (
{children}
React (Vite/CRA):
// App.jsx o index.html
useEffect(() => {
// Cargar config
window.embeddedChatbotConfig = {
chatbotId: "TU_ID_AQUI",
domain: "www.chatbase.co"
};
// Cargar script
const script = document.createElement('script');
script.src = 'https://www.chatbase.co/embed.min.js';
script.defer = true;
document.body.appendChild(script);
}, []);
#### Si usas Shopify:
1. Ve a Tienda online → Temas
2. Haz clic en "Acciones" → "Editar código"
3. Busca y abre el archivo theme.liquid
4. Busca la línea que dice `
