Soy Rodrigo Olivares y en este artículo te cuento, paso a paso y con todo el detalle, cómo creé una página web profesional para un negocio de piscinas infinitas usando Gemini Canvas, generé imágenes con IA (nano banana), integré un chatbot que conoce toda la página y lo dejé funcionando en un hosting real —todo empezando desde la versión gratuita—. Si quieres replicar esto para tus proyectos o ofrecerlo como servicio, aquí encontrarás la metodología, los aciertos, los errores y las soluciones prácticas para hacerlo rápido y con bajo costo.
Tabla de contenidos
- 🧭 Resumen del proyecto
- ✨ Por qué esto cambia las reglas del juego
- 🔧 Herramientas que usé
- 💬 ¿Qué hace exactamente el chatbot integrado?
- 🧩 Cómo lo construí (metodología paso a paso)
- 🔁 Alternativa: Conectar el chat con OpenRouter y Grok (gratuito)
- 📤 Exportar el proyecto y preparar el hosting
- 🖼️ Guardar imágenes y corregir la galería
- 🧾 Cómo obtener una API Key de Gemini (opcional)
- 💡 Ideas de servicios que puedes ofrecer usando esta metodología
- 💸 Ejemplo de propuesta comercial rápida
- 🧪 Pruebas, errores frecuentes y cómo solucionarlos
- 🛠️ Fragmentos de configuración (explicado)
- 📈 Consejos para optimizar conversión del chatbot
- 🔎 SEO y posicionamiento: cómo aprovechar una web con chatbot
- 📚 Recursos útiles y enlaces
- 🧾 Casos de uso concretos por nicho
- 📌 Checklist práctico para replicar en 1 día
- 📉 Cómo reducir costos manteniendo calidad
- 🔐 Privacidad y responsabilidad
- 🧭 Próximos pasos sugeridos
- 📷 Capturas clave del proceso
- 📝 Conclusión y mensaje final
🧭 Resumen del proyecto
Creé una web completa para una empresa ficticia llamada «Piscinas Infinitas Santiago»: diseño moderno, sección de servicios (piscinas de hormigón, fibra, cascadas, iluminación LED), galería de imágenes generadas en Gemini y, lo que considero la guinda de la torta, un asesor virtual integrado que responde preguntas sobre el negocio 24/7.
Lo más llamativo: todo esto lo hice usando Gemini Free (sin API key inicialmente), luego conecté de forma opcional con OpenRouter y un modelo gratuito (Grok) para que el chat funcionara sin depender de la API directa de Gemini. Después subí la web a Hostinger para probar el flujo completo.
✨ Por qué esto cambia las reglas del juego
Crear sitios web ya no es solo diseño y contenidos estáticos. Integrar un chatbot que conozca toda la información del negocio —servicios, tiempos de ejecución, precios orientativos y respuestas frecuentes— transforma una web en una herramienta de ventas y atención automatizada.
Imagina poder ofrecer a tus clientes no solo una página bonita sino también un asistente que responda a dudas, cualifique leads y convierta visitantes en clientes potenciales mientras tú duermes. Eso es lo que hice y por qué pienso que esta combinación es un diferencial comercial enorme.
🔧 Herramientas que usé
- Gemini Canvas (versión gratuita): para generar la estructura del sitio, el diseño y las imágenes con nano banana.
- OpenRouter (modelo Grok4fast gratuito): alternativa para el motor del chatbot sin usar la API de Gemini en producción.
- Hostinger: hosting para subir la web y probar la integración en un dominio temporal. Link con descuento: http://hostinger.com/rodrigo
- Google AI Studio / API Key de Gemini (opcional para producción): https://aistudio.google.com
- Gemini (sitio): https://gemini.google.com
- OpenRouter: https://openrouter.ai
💬 ¿Qué hace exactamente el chatbot integrado?
El asesor virtual que integré responde a preguntas relacionadas exclusivamente con la información de la página. Por ejemplo, una consulta real que probé fue: “¿Cuánto se demoran en crear una piscina de hormigón?” y el chat contestó: “Entre tres y cuatro meses”. Ese dato lo extraje y lo dejé como referencia en la base de conocimiento del asistente. Es decir, el chatbot no inventa; responde con la información que le pasas o que está en la web.
🧩 Cómo lo construí (metodología paso a paso)
A continuación detallo el flujo completo y las decisiones técnicas para que puedas replicarlo. Lo explico como lo hice yo: prompt, generación, integración IA, exportación y subida al hosting.
1) Definir el prompt maestro
Todo parte de un prompt claro. Yo le pedí a Gemini: «Crear una página web completa para piscinas infinitas Santiago, empresa de piscinas premium con diseños modernos, cascadas, iluminación LED y bordes infinitos.» Luego añadí requisitos de diseño, secciones, textos, llamadas a la acción y estructura para generar un sitio profesional.
Consejo: mientras más específico seas (tono, público objetivo, secciones, textos legales, FAQs), mejor el resultado inicial. Guardé el prompt y lo reutilicé para generar variantes y contenidos secundarios.
2) Generación de diseño y contenidos en Gemini Canvas
Usé Gemini Canvas para crear la estructura visual y los textos. La ventaja fue que pude pedir no solo el HTML/estructura, sino también que generara imágenes integradas —todo dentro del mismo entorno—. Generó todo el layout y el contenido textual en minutos.
3) Crear imágenes con nano banana dentro de Gemini
Al principio la web no tenía imágenes. Le pregunté a Gemini “¿puedes crear imágenes con IA y agregarlas al diseño?” y respondió que sí. Generó imágenes estilo “nano banana” (nombre del estilo que usé) directamente en Canvas. Cada ejecución produce variantes, lo que te permite tener varias imágenes para la galería o hero.
4) Agregar funcionalidades IA en Canvas
Dentro de Canvas hay un botón para Agregar funciones de IA. Activé la función de IA de texto para el chat y la funcionalidad de imagen para poder insertar las imágenes generadas automáticamente en el diseño.
5) Crear el asistente virtual
Generé un asesor virtual a partir de un prompt específico donde le pasé la información básica de la empresa (servicios, tiempos, garantías, contacto). Lo configuré para que estuviera acotado a responder solo lo que estuviera relacionado con la página para evitar respuestas fuera de contexto.
Consejo profesional: cuando crees el asistente, define claramente el «scope» (qué puede y no puede contestar). Esto evita respuestas erráticas y mejora conversiones. Ejemplo de scope: responder sobre tiempos de construcción, tipos de materiales, costos estimados y pasos del proceso, no sobre temas generales como “qué es una piscina” salvo que lo tengas en la web.
6) Probar sin API Key (prototipado en Canvas)
Una de las ventajas más potentes de Gemini Canvas es que te permite prototipar sin una API key: la conexión interna ya está habilitada para que puedas construir prototipos. Esto baja la barrera de entrada: cualquiera puede crear un prototipo sin configurar nada en Google Cloud.
Importante: esta fase es ideal para prototipos y pruebas, pero cuando exportas la web y la subes a un hosting externo, necesitarás configurar la API Key (o la alternativa que elijas) para que el chat siga funcionando fuera del entorno de Gemini.
🔁 Alternativa: Conectar el chat con OpenRouter y Grok (gratuito)
Si no quieres usar la API de Gemini en producción o prefieres un modelo diferente, puedes usar OpenRouter y un modelo gratuito como grok4fast. Yo hice esa prueba: reemplacé la referencia interna a Gemini por la integración de OpenRouter y el chat empezó a responder con Grok.
Flujo que seguí:
- Registro en OpenRouter: https://openrouter.ai
- Filtrar modelos gratuitos y elegir grok4fast.
- Copiar la API key de OpenRouter y reemplazar en el código del chat dentro del HTML exportado desde Canvas.
Resultado: el chat responde correctamente con Grok y no dependes de la API de Gemini para producción. Esto es especialmente útil si quieres mantener costos bajos o utilizar modelos alternativos.
📤 Exportar el proyecto y preparar el hosting
Una vez que tu sitio está listo en Canvas y las funcionalidades de IA están añadidas, debes exportar el proyecto. Gemini te exporta el código (HTML, JS y assets) que luego debes alojar en tu hosting elegido. Yo usé Hostinger por simplicidad y velocidad del proceso.
Pasos en Hostinger (resumen):
- Crear un sitio nuevo: elegí “sitio web PHP/HTML personalizado”.
- Usar un dominio temporal para pruebas.
- Ir al Administrador de archivos -> public_html y subir los archivos exportados.
- Crear/editar index.html (o index.php) y pegar el código exportado.
- Subir las imágenes generadas y ajustar las rutas si es necesario.
- Configurar la API Key en el JavaScript del chat si vas a usar Gemini API o pegar la API de OpenRouter si usas Grok.
Mi link de Hostinger con descuento: http://hostinger.com/rodrigo
🖼️ Guardar imágenes y corregir la galería
Cuando trabajas en Gemini Canvas, las imágenes generadas quedan en el entorno. Pero para que funcionen en tu hosting debes guardarlas y subirlas a la carpeta pública del servidor. Yo cometí varios errores rápidos que te cuento para que tú no los repitas:
- No olvides descargar todas las imágenes que quieras usar en la galería.
- Al subirlas, asegúrate de que las rutas en el HTML coincidan exactamente (public_html/imagenes/mi-imagen.jpg, por ejemplo).
- Si usas un dominio temporal, las rutas tendrán el prefijo del dominio temporal; recuerda cambiarlo cuando migras a un dominio definitivo.
Un detalle práctico: yo numeré las imágenes (2, 4, 5, 6, 7, 8) y pedí a Gemini que enlazara la galería con esas rutas. Al principio me equivoqué con la numeración (faltó la 3) y el chat intentó referenciar una imagen inexistente. Corrige las rutas y números antes de exportar para evitar errores en producción.
🧾 Cómo obtener una API Key de Gemini (opcional)
Si decides que la versión de producción de tu sitio debe usar la API oficial de Gemini, debes obtener una API Key desde Google AI Studio. El proceso es sencillo:
- Ir a https://aistudio.google.com
- Entrar a “Get a API Key” o similar.
- Crear la clave en un proyecto nuevo y copiarla.
- Pegar la API Key en el código exportado (sección de inicialización del cliente IA).
Nota: Google suele ofrecer créditos iniciales (por ejemplo, acceso a productos de Google Cloud con crédito gratuito). Lee los términos antes de activar para evitar cargos no deseados.
💡 Ideas de servicios que puedes ofrecer usando esta metodología
Si eres diseñador web, desarrollador o consultor digital, aquí van formas concretas de monetizar esta capacidad:
- Crear sitios “llave en mano” para empresas locales con chatbot que responde 24/7 (restaurantes, clínicas dentales, arquitectos, servicios técnicos).
- Vender la integración como un servicio adicional: “Te entrego tu web + chatbot especializado en tu negocio”.
- Paquetes de mantenimiento que incluyan mejoras en el conocimiento del chatbot y generación de imágenes periódicas.
- Subscrición mensual para la gestión del modelo IA (incluir costos de API si aplican).
Valor diferencial: puedes cobrar más por una web que no solo “informa” sino que también califica leads, responde dudas y reduce la fricción de contacto con el cliente.
💸 Ejemplo de propuesta comercial rápida
“Diseñamos tu web profesional y te entregamos un asesor virtual integrado con IA que conoce tu negocio. Responde preguntas frecuentes, calcula tiempos estimados y recoge información de potenciales clientes 24/7. Entrega en 7-10 días. Precio base + suscripción mensual (opcional para soporte IA).”
En la práctica, ofrecer este paquete te permite diferenciarte frente a diseñadores que solo entregan páginas estáticas.
🧪 Pruebas, errores frecuentes y cómo solucionarlos
Te comparto los problemas que me salieron y cómo los resolví:
- Imágenes no aparecen: probablemente olvidaste subir los archivos o las rutas están mal. Revisa public_html y el nombre exacto de cada archivo. En mi caso usé nombres numerados y corregí la base para que quedara consistente.
- Chat no responde fuera de Canvas: necesitas una API Key válida o configurar OpenRouter en el código exportado. Revisa la sección donde el script inicializa la conexión y pega la API Key correcta.
- Respuestas del chat fuera de contexto: acota el scope del asistente y pásale documentación clara y limitada al negocio (FAQ, servicios, tiempos, políticas).
- Errores de CORS o rutas JS: cuando subes archivos, verifica las rutas relativas y permisos del servidor.
🛠️ Fragmentos de configuración (explicado)
No incluiré código literal en este artículo, pero te explico la lógica:
- En el archivo JS del chat tienes un bloque donde se define el endpoint y la API key. Reemplaza la API key por la de Gemini o por la de OpenRouter.
- Si usas OpenRouter, el formato del modelo debe respetar la nomenclatura de OpenRouter (por ejemplo, “grok/grok4fast” según su documentación).
- Agrega un JSON con la “base de conocimiento” del chatbot: títulos y respuestas que el asistente puede utilizar. Esto se carga al inicializar el asistente.
- En la exportación de Canvas, generalmente encuentras un archivo assets con las imágenes y un index.html con los scripts. Edita las rutas si las subes a una carpeta distinta.
📈 Consejos para optimizar conversión del chatbot
Integrar IA no garantiza ventas; es necesario optimizar la experiencia:
- Diseña la conversación: los primeros mensajes deben generar confianza (presentación, beneficios y CTA claro).
- Incluye botones de acción (reservar llamada, pedir cotización) en respuestas clave.
- Recolecta datos: nombre, email y teléfono en un paso corto para nutrir CRM.
- Ofrece respuestas rápidas y bien acotadas (ej.: “Tiempo de construcción: 3–4 meses” en vez de explicaciones largas).
- Monitorea conversaciones y ajusta el conocimiento base cada semana durante el primer mes.
🔎 SEO y posicionamiento: cómo aprovechar una web con chatbot
Un chatbot no reemplaza SEO, pero puede potenciar conversiones. Algunas tácticas:
- Optimiza textos para búsquedas locales (ej.: “piscinas infinitas Santiago”, “piscinas en Santiago con iluminación LED”).
- Publica artículos en el blog relacionados (guías, casos de estudio) para atraer tráfico orgánico.
- Usa el chatbot para guiar al usuario hacia contenido relevante dentro de la web (artículos, portfolio, contacto).
- Integra Google Analytics y Search Console para medir el impacto y ajustar contenidos.
📚 Recursos útiles y enlaces
Enlaces mencionados en la descripción del proyecto y recursos para que no pierdas tiempo:
Hostinger con descuento ya aplicado: http://hostinger.com/rodrigo
Gemini: https://gemini.google.com
API Key de Gemini (Google AI Studio): https://aistudio.google.com
OpenRouter (Grok gratis): https://openrouter.ai
Prompt que usé (documento): https://docs.google.com/document/d/12nLHP4E5B4UcLv9pxGLLOjPLQVvMMM1XCeMo0443bdo/edit?usp=sharing
Enlaces de mi sitio con guías relacionadas (útiles para complementar)
Puedes profundizar con estos artículos de mi blog:
Blog principal: https://rodrigoolivares.com/blog/
Cómo crear una web con Hostinger (tutorial completo): https://rodrigoolivares.com/como-crear-una-web-de-venta-de-servicios-con-el-constructor-de-hostinger-tutorial-completo/
Cómo hacer sitios web de nicho automáticamente con IA: https://rodrigoolivares.com/como-hacer-sitios-web-de-nicho-automaticamente-con-ia/
Cómo crear un negocio online: https://rodrigoolivares.com/como-crear-un-negocio-online/
Cómo monetizar tu blog de forma efectiva: https://rodrigoolivares.com/como-monetizar-tu-blog-de-forma-efectiva/
Cómo escribir artículos profesionales con ChatGPT a WordPress: https://rodrigoolivares.com/como-escribir-articulos-profesionales-a-costo-cero-de-chatgpt-a-wordpress-tutorial-completo/
Automatizar tu blog con IA: https://rodrigoolivares.com/como-automatizar-tu-blog-con-ia-crea-articulos-a-partir-de-tus-redes-sociales/
Generar y publicar artículos SEO en WordPress: https://rodrigoolivares.com/genera-y-publica-articulos-seo-en-wordpress-con-un-clic-%f0%9f%93%9d%f0%9f%8e%af-tutorial-seowriting/
Recursos y herramientas recomendadas: https://rodrigoolivares.com/recursos-y-herramientas-recomendadas/
Cómo hacer una web nicho en 20 minutos usando IA (caso práctico): https://rodrigoolivares.com/como-hacer-una-web-nicho-en-20-minutos-usando-ia-tutorial-paso-a-paso/
🧾 Casos de uso concretos por nicho
Estos son ejemplos reales de negocios donde esta solución tiene sentido y alto impacto:
- Clínicas dentales: responder horarios, servicios, disponibilidad de urgencias y agendar citas. (Ver guía SEO local para clínicas dentales: https://rodrigoolivares.com/estrategias-de-seo-local-para-clinicas-dentales-posicionamiento-y-optimizacion/)
- Entrenadores personales: responder precios, tipos de entrenamiento, horarios y reservas. (Ver: https://rodrigoolivares.com/estrategias-seo-para-entrenadores-personales/)
- Empresas de servicios a domicilio: tarifa estimada, tiempos de llegada y cobertura de zonas. (Ver: https://rodrigoolivares.com/optimizacion-seo-local-claves-para-pequenos-negocios/)
- Diseñadores y estudios de arquitectura: mostrar portafolio y responder sobre tiempos de ejecución y presupuestos (ejemplo práctico en mi artículo sobre estructura de páginas de inicio: https://rodrigoolivares.com/estructura-de-una-pagina-de-inicio-efectiva-tienes-que-verlo/)
📌 Checklist práctico para replicar en 1 día
- Definir el prompt maestro con la información del negocio y estructura de la web.
- Generar el sitio en Gemini Canvas y solicitar imágenes IA (nano banana u otro estilo).
- Crear el asistente virtual y darle el scope con FAQs, servicios y datos clave.
- Probar el chat en Canvas (sin API key) y ajustar respuestas.
- Exportar el proyecto y descargar imágenes.
- Subir archivos a Hostinger (o tu hosting preferido) en public_html.
- Pegar la API Key de Gemini o la de OpenRouter en el archivo JS del chat.
- Probar en dominio temporal, corregir rutas e imágenes, y validar conversaciones reales.
- Lanzar en dominio definitivo y configurar analíticas y formularios.
📉 Cómo reducir costos manteniendo calidad
Si tu objetivo es ofrecer esto a clientes con bajo presupuesto:
- Usa modelos gratuitos en OpenRouter mientras el sitio no requiera respuestas complejas.
- Limita el scope del asistente para reducir llamadas al modelo y consumo de tokens.
- Implementa caching de respuestas para preguntas frecuentes (reduce costos y latencia).
- Vende paquetes de mantenimiento que incluyan la gestión del consumo de IA.
🔐 Privacidad y responsabilidad
Al integrar chatbots debes considerar:
- Protección de datos: si recoges emails/teléfonos, cumple con la normativa local (GDPR, LOPD, etc.).
- Transparencia: avisa al usuario que está conversando con un asistente IA.
- Registro de conversaciones: guarda logs para mejorar el asistente y detectar fallos.
🧭 Próximos pasos sugeridos
Si ya hiciste lo básico, te recomiendo:
- Analizar las primeras 100 conversaciones para mejorar respuestas.
- Agregar microconversiones (reservar, agendar, solicitar cotización) dentro del chat.
- Crear una landing específica para campañas pagadas que dirija a una conversación guiada por el chatbot.
📷 Capturas clave del proceso
Estas imágenes resumen momentos importantes durante la creación:
📝 Conclusión y mensaje final
Lo que hice con Gemini fue construir en minutos una web funcional, con imágenes generadas por IA y un chatbot integrado que comprende la información del negocio y responde a potenciales clientes. La barrera está bajando: con Gemini Canvas puedes prototipar sin API key y, si quieres moverlo a producción, puedes usar la API de Gemini o alternativas como OpenRouter / Grok.
Si eres creador de webs, freelance o quieres automatizar la atención de tu negocio, esta metodología te brinda una propuesta de valor clara: diseño + IA = más ventas y menos fricción para el cliente.
Si te interesa que haga una versión paso a paso más técnica o que publique el repositorio de ejemplo con el código, dímelo en los comentarios. Y si quieres empezar ya, aquí tienes los enlaces clave otra vez:
Hostinger con descuento: http://hostinger.com/rodrigo
Gemini: https://gemini.google.com
API Key de Gemini: https://aistudio.google.com
OpenRouter (Grok gratis): https://openrouter.ai
Prompt usado: https://docs.google.com/document/d/12nLHP4E5B4UcLv9pxGLLOjPLQVvMMM1XCeMo0443bdo/edit?usp=sharing
Si quieres leer más guías prácticas y tutoriales relacionados con automatización, creación de webs con IA y monetización, revisa estos recursos en mi web:
https://rodrigoolivares.com/blog/
Cómo Crear una Web de Venta de Servicios con el Constructor de Hostinger (Tutorial Completo)
Cómo Escribir Artículos Profesionales a Costo Cero (de ChatGPT a WordPress – Tutorial Completo)
Cómo Automatizar tu Blog con IA: Crea Artículos a partir de tus Redes Sociales
Un abrazo grande, espero que este tutorial te haya dado claridad y motivación para crear tu próxima web con IA. Si te gustó la explicación, déjame un like en el video original y suscríbete para más contenido práctico. Nos vemos pronto.
Rodrigo Olivares – Crea y Monetiza Sitios Web
