Post actualizado el día octubre 27, 2026 by DeiviSanzPlay
Antes de tocar código: qué necesitas realmente
Integrar ChatGPT en una web no es descargar un plugin y listo. Hay tres caminos distintos y cada uno sirve para cosas diferentes. Elegir mal el primero te obliga a rehacerlo todo después.
La opción más sencilla es embeber el chat oficial de OpenAI mediante el widget de ChatGPT (función «Compartir» de una conversación o un GPT personalizado). No requiere programación, pero el usuario sale de tu dominio y no controlas el diseño ni el contexto. La segunda es la API de OpenAI con una clave propia: control total, coste por token y necesidad de un backend. La tercera es usar un servicio intermedio (un widget de terceros que ya gestiona la clave) si no quieres tocar servidor.
Si tu web está en WordPress, Shopify o Wix, lo habitual es empezar por un plugin o app que ya envuelve la API. Si es una web propia (React, Next.js, Laravel), irás directo a la API.
Paso 1: consigue la clave y protégela
Entra en la plataforma de desarrolladores de OpenAI, crea una organización y genera una API key. Dos advertencias que casi nadie menciona al principio:
- La clave nunca va en el HTML ni en el JavaScript del navegador. Cualquiera puede abrir las herramientas de desarrollo y copiarla. Todas las llamadas deben pasar por tu servidor.
- Configura un límite de gasto mensual en el panel de facturación antes de la primera prueba. Un bucle mal programado puede consumir cientos de peticiones en minutos.
Guarda la clave en una variable de entorno (OPENAI_API_KEY), no en un archivo dentro del repositorio público.
Paso 2: monta el endpoint intermedio
El flujo correcto es: navegador → tu servidor → API de OpenAI → tu servidor → navegador. Un ejemplo mínimo en Node con Express:
app.post(‘/api/chat’, async (req, res) => { const r = await fetch(‘https://api.openai.com/v1/chat/completions’, { method: ‘POST’, headers: { ‘Authorization’: `Bearer ${process.env.OPENAI_API_KEY}`, ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ model: ‘gpt-4o-mini’, messages: [{ role: ‘system’, content: ‘Eres el asistente de la tienda X. Responde solo sobre nuestros productos.’ }, …req.body.historial] }) }); res.json(await r.json()); });El mensaje system es lo que marca la diferencia entre un chat genérico y un asistente útil. Sin él, el modelo responderá a cualquier cosa y tu marca aparecerá asociada a respuestas que no controlas.
Paso 3: construye la interfaz y gestiona el historial
La API no recuerda nada entre llamadas. Cada petición debe llevar el historial completo de la conversación (o un resumen). Envía solo los últimos turnos relevantes para no disparar el coste; una conversación larga puede multiplicar el gasto por diez sin que el usuario note mejora.
Elementos mínimos en la interfaz: campo de texto, botón de envío con estado de carga, ventana de mensajes con scroll y un aviso de que las respuestas las genera una IA y pueden contener errores. Ese aviso no es solo ética: en la UE encaja con las obligaciones de transparencia sobre sistemas de IA.
Paso 4: limitar el alcance y los abusos
Aquí es donde fallan la mayoría de integraciones. Un chat abierto sin control es un imán para spam y para consultas que consumen tu presupuesto. Tres medidas prácticas:
- Rate limit por IP (por ejemplo, 20 mensajes por hora) en el servidor, no en el cliente.
- Longitud máxima del mensaje de entrada y del historial enviado.
- Un filtro previo de temas: si tu web vende seguros, no hay razón para que el asistente responda sobre recetas de cocina.
Un error concreto que se repite
Al probar un chat de atención al cliente en una web de servicios, el asistente empezó a responder correctamente durante las primeras pruebas y luego inventó plazos de entrega que la empresa no ofrecía. El motivo: el prompt de sistema describía el tono pero no incluía los datos reales, y el modelo rellenó los huecos. La solución no fue un prompt más largo, sino inyectar la información de plazos y precios desde la base de datos en cada petición, y añadir una instrucción explícita: «si el dato no está en el contexto, responde que no lo sabes y deriva a un humano». Un modelo de lenguaje sin datos verificables tiende a completar con plausibilidad, no con verdad.
Qué no debes esperar de esta integración
No sustituye a un buscador interno fiable ni a un agente de soporte humano en reclamaciones. Tampoco es una fuente de información actualizada si no le pasas datos recientes: su conocimiento tiene fecha de corte y no consulta tu catálogo por sí solo. Para que responda sobre stock, pedidos o políticas internas necesitas conectar recuperación de documentos (RAG) o llamadas a tus propias APIs. Según la documentación oficial de OpenAI, el modelo no accede a internet salvo que uses las herramientas habilitadas para ello.
Y el coste: cada conversación tiene un precio en tokens. En una web con miles de visitas diarias, conviene medir el gasto real durante una semana antes de decidir si el chat se muestra a todos los usuarios o solo a los registrados.
Comprobaciones antes de publicar
- La clave no aparece en el código del navegador.
- Existe un límite de gasto configurado en OpenAI.
- El endpoint valida el origen y rechaza peticiones externas.
- Hay un mensaje que avisa de que las respuestas son generadas por IA.
- El chat tiene una vía de escape: un enlace o botón para hablar con una persona.
Con esto tienes una integración funcional, no un experimento. La diferencia entre ambas suele estar en las cuatro líneas de protección del servidor, no en el diseño del cuadro de chat.
Perfiles verificables: Sitio web
Publicado el 27 de October de 2026. Última revisión: 27 de October de 2026.
