Integrar un creador web en tu producto: cómo encajan las piezas

Marca blanca / Creador integrado

Si tienes un producto SaaS para salones, gimnasios, contratistas o restaurantes, tus clientes te piden un sitio web y preferirías que no se fueran a otra parte a conseguirlo. Si conviene integrar o redirigir lo tratamos en nuestra página de plataformas SaaS y en la comparativa de marca blanca vs API. Esta página es para el equipo que ya decidió integrar: cómo funciona el intercambio de sesión, qué blindar, qué funciones mostrar, qué falla dentro de un iframe y cómo escuchar eventos.

Reserva una demo · El precio se adapta a tu volumen y configuración, y conoces tu precio exacto en la llamada. 0% de comisión por transacción.

Actualizado: 25 de octubre de 2026

En resumen

Tu servidor pide un token de sesión de corta duración con un ID de cliente y un secreto; tu front end solo pasa ese token al script de integración. El secreto nunca llega al navegador.
Cada configuración de integración enumera los orígenes HTTPS que pueden usarla, qué paneles del creador son visibles, el tema, el logo y los límites por usuario.
Cuenta con problemas propios de los iframes: bloqueo de cookies de terceros en Safari y Firefox, tu propia política frame-ancestors y la comprobación del origen en postMessage.
Los webhooks a nivel de marca se firman con HMAC-SHA256 incluyendo una marca de tiempo, se reintentan si fallan y se desactivan tras fallos repetidos. Agenda una demo para ver la consola de integración.

Parte de la decisión que ya tomaste

Hay tres formas de dar un sitio web a tus usuarios: enviarlos a un creador con tu marca en su propia dirección, llamar a una API y construir tu propia interfaz, o integrar un creador ya hecho dentro de tu producto. Las ventajas y desventajas están en nuestra página de plataformas SaaS y en marca blanca vs API, y la referencia de endpoints está en la página de la API. Aquí damos por hecho que quieres que el creador aparezca dentro de tu propia app, bajo tu propia navegación y con la sesión de tu usuario.

Pantalla de Embedded SDK en la consola de la marca, con un botón Nueva configuración de integración y un estado vacío que explica que cada configuración tiene sus propias credenciales de cliente y opciones de personalización

*La sección Embedded SDK de la consola de la marca. Cada configuración de integración tiene sus propias credenciales de cliente.*

El intercambio de sesión

La integración suele fallar en el inicio de sesión. El patrón que usa We.Inc mantiene a tus usuarios con sesión solo en tu producto, sin una segunda cuenta que gestionar:

Tu back end llama al endpoint de sesión de integración con el ID de cliente de la configuración, su secreto de cliente y el ID de tu propio usuario (el correo y el nombre son opcionales).
La respuesta contiene un token de sesión, la dirección del creador, el ID de proyecto de ese usuario y una hora de caducidad.
Tu back end devuelve solo el token de sesión a tu front end.
Tu front end carga el script de integración, lo apunta a un elemento contenedor y lo inicializa con el token. Hay callbacks opcionales que se activan cuando el creador está listo, cuando se guarda un proyecto, ante errores y cuando caduca la sesión.
Al caducar, tu front end pide un token nuevo a tu back end, exactamente como en el paso 1.

Reglas que se derivan de esto:

El secreto de cliente es un secreto de servidor. Guárdalo en tu almacén de secretos, nunca en código de front end, apps móviles ni un repositorio público. Se muestra una sola vez al crear la configuración.
Tu ID de usuario es la clave. El mismo ID devuelve el proyecto del mismo usuario, así que usa un ID interno estable, no una dirección de correo que pueda cambiar.
No guardes tokens en caché entre usuarios. Pide uno por sesión de usuario.

Orígenes permitidos

Cada configuración de integración tiene una lista de orígenes permitidos: las direcciones HTTPS exactas (o patrones de subdominio con comodín) de las páginas del producto que alojarán el creador. Si llega una solicitud de sesión con una cabecera de origen que no está en la lista, se rechaza.

Planifica la lista por entorno. Un error habitual es usar una sola configuración para producción, staging y desarrollo local, lo que obliga a la configuración de producción a permitir direcciones de prueba. Crea una configuración por entorno, cada una con sus propias credenciales, para que revocar staging nunca afecte a producción.

Qué mostrar

Cada configuración elige qué paneles del creador tendrán tus usuarios. Las opciones de la consola son:

Panel	Qué hace	Elección habitual en un SaaS vertical
Chat con IA	Los usuarios describen cambios en lenguaje sencillo y la IA los hace	Activado: es el principal método de edición para usuarios no técnicos
Vista previa	Vista previa en vivo del sitio	Activado
Árbol de archivos	Explorar los archivos del proyecto	Desactivado para la mayoría de los públicos
Terminal	Acceso a terminal en el creador	Desactivado salvo que tus usuarios sean desarrolladores
Publicar	Publicar el sitio	Activado, o desactivado si publicas desde tu propia interfaz
Exportar	Descargar el código fuente	Tú decides: activado da a los usuarios una salida, desactivado los mantiene en tu producto

Las configuraciones también incluyen un tema (color principal, fuente, radio de las esquinas, modo oscuro), un logo personalizado opcional, un interruptor para la marca "powered by", un número máximo de proyectos por usuario y un número máximo de mensajes de IA por sesión. Fija el límite de mensajes de IA de forma consciente; es la principal palanca sobre el coste de uso en un nivel que incluye sitios web.

Pantalla API y Webhooks con secciones de claves de API y endpoints de webhook, ambas vacías

*Las claves de API y los endpoints de webhook están junto a los ajustes de integración en la consola de la marca.*

Qué falla dentro de un iframe

Los creadores integrados funcionan en un marco dentro de tu página. Planifica esto antes del lanzamiento, no después del primer ticket de soporte.

Cookies de terceros. La Total Cookie Protection de Firefox y la prevención de rastreo de Safari aíslan o bloquean las cookies que establece un sitio enmarcado desde otro dominio. Un intercambio con token de sesión evita depender de las cookies del usuario en el dominio del creador, pero prueba el flujo completo en las versiones actuales de Safari y Firefox, incluidas las ventanas privadas, durante tu piloto.
Tu propia política de marcos. Si tu app define una Content Security Policy, su frame-src (o child-src) debe permitir la dirección del creador. Si alguna vez el creador se sirve bajo tu dominio, revisa frame-ancestors y X-Frame-Options para no bloquearte a ti mismo.
Mensajes entre marcos. El script de integración y el creador se comunican con postMessage. Si añades tus propios listeners, sigue las reglas habituales: comprueba el origen del evento con la dirección del creador, valida la forma del mensaje y nunca envíes datos sensibles con un destino comodín.
Altura y desplazamiento. Da al contenedor una altura explícita. Un creador en una caja de 400 píxeles dentro de una página con scroll es un suplicio en un portátil; la mayoría de los productos le dan toda el área de contenido.
Móvil. Editar un sitio web en un teléfono dentro de otra app es difícil para todos. Muchos productos muestran la vista previa y el chat con IA en móvil y dejan la edición detallada para el escritorio.

Escuchar eventos

A un producto que integra el creador le importan dos tipos de eventos.

En la página: los callbacks del script de integración (listo, guardado, error, sesión caducada) permiten que tu interfaz reaccione al instante, por ejemplo mostrando "Guardado" en tu propia cabecera.

En tu servidor: los webhooks a nivel de marca informan de eventos de clientes: cliente registrado, primer sitio creado, sitio publicado, sin publicar siete días después de unirse, cliente recomendó a alguien, pago recibido y cliente pausado. Cada entrega es un cuerpo JSON con un ID de entrega (estable entre reintentos), el nombre del evento, una marca de tiempo y los datos.

Ajustes de webhooks con un campo de endpoint, casillas de eventos y una nota de que las entregas fallidas se reintentan

*Elegir los eventos de webhook. La nota de la derecha indica la regla de reintento y de desactivación automática.*

Cómo recibirlos de forma segura:

Verifica la firma. Cada solicitud lleva una firma HMAC-SHA256 del cuerpo (la cabecera original) y una segunda firma sobre la marca de tiempo y el cuerpo, además de la propia marca de tiempo. Verifica la que incluye la marca de tiempo y rechaza solicitudes con más de unos minutos de antigüedad, lo que bloquea los reenvíos maliciosos.
Sé idempotente. Los reintentos reutilizan el ID de entrega; guarda los ID procesados e ignora las repeticiones.
Responde rápido. Confirma la recepción enseguida y haz el trabajo lento en una tarea en segundo plano. Las entregas fallidas se reintentan hasta seis veces durante unas quince horas, y un endpoint que falla quince veces seguidas se desactiva, con un correo al dueño de la marca.

Usos habituales: marcar la cuenta como "sitio web publicado" en tu producto cuando llega sitio publicado; iniciar un recordatorio de incorporación con sin publicar tras siete días; sincronizar los clientes pausados con el estado de tus propias suscripciones.

Permisos y el resto de la plataforma

La integración es una vía de entrada. La misma cuenta de marca tiene también cuentas de cliente con interruptores por cliente (publicar, dominio propio, ver el código, blog, tienda, formularios, SEO y aprobación antes de publicar), un registro de auditoría de las acciones de la organización y un portal con tu marca que puedes usar junto a la integración para los usuarios que prefieran una pestaña aparte.

Ajustes de un cliente con interruptores de publicación, dominio propio, acceso al código, blog, tienda, formularios, SEO y aprobación antes de publicar

*Interruptores por cliente en la consola de la marca, independientes de la configuración de integración.*

El creador bajo la marca, con un sitio de plantilla cargado en la vista previa

*El propio creador, aquí en la dirección de la marca. Integrado, el mismo creador está dentro de tu producto.*

Los sitios son código real (React, Vite, TypeScript, Tailwind), y el código de cada sitio se puede descargar o sincronizar con GitHub, algo importante si algún día cambias de plataforma o un cliente pide sus archivos.

Panel de código con un árbol de archivos y el código fuente de un componente abierto

*El panel de código: el sitio es código fuente, no un formato cerrado.*

Lista de comprobación previa al lanzamiento

Cópiala en tu ticket de lanzamiento.

[ ] Una configuración de integración por entorno, cada una con sus credenciales y orígenes.
[ ] Secreto de cliente guardado solo en el servidor; procedimiento de rotación documentado.
[ ] ID de usuario internos y estables enviados en la llamada de sesión.
[ ] El callback de sesión caducada obtiene un token nuevo sin recargar la página.
[ ] Paneles elegidos por nivel de plan; terminal y árbol de archivos desactivados salvo que hagan falta.
[ ] Límite de mensajes de IA y de proyectos por usuario definidos para cada nivel.
[ ] Tu CSP permite el creador en frame-src; probado en Chrome, Safari y Firefox, incluida una ventana privada.
[ ] El endpoint de webhooks verifica la firma con marca de tiempo y guarda los ID de entrega.
[ ] "Sitio publicado" y "sin publicar tras 7 días" conectados a tu producto o CRM.
[ ] Guion de soporte para "mi sitio web no carga" que compruebe primero el origen, la caducidad del token y los ajustes de privacidad del navegador.
[ ] Decisión documentada sobre si los usuarios pueden exportar su código y qué pasa con los sitios cuando un cliente cancela.

Siguientes pasos

Si aún estás eligiendo entre integrar y un portal con tu marca, empieza por la página de plataformas SaaS. Si necesitas detalle de endpoints para dar de alta clientes, consulta la página de la API. Si estás listo para probar la integración con tu propio producto en un entorno de pruebas, agenda una demo y configuraremos una contigo.

Fuentes

Última revisión: 2026-10-25.

MDN Web Docs, Content-Security-Policy: frame-ancestors directive.
MDN Web Docs, Window: postMessage() method, consideraciones de seguridad.
MDN Web Docs, Third-party cookies.

Configura una integración para tu producto

Reserva una demo de 30 minutos. Te enseñamos el creador con tu marca, vemos cuántos sitios de clientes piensas gestionar y te damos tu precio exacto.

Reserva una demo

¿Prefieres ver primero el recorrido completo? Mira el creador de sitios web de marca blanca

Preguntas que hacen los compradores

¿Necesitan mis usuarios un inicio de sesión aparte para el creador integrado?

No. Tu servidor pide un token de sesión de corta duración para el ID de tu propio usuario con el ID de cliente y el secreto de la configuración, y tu front end inicializa la integración con ese token.

¿Puedo ocultar partes del creador a mis usuarios?

Sí. Cada configuración de integración elige qué paneles son visibles: chat con IA, vista previa, árbol de archivos, terminal, publicar y exportar. También define el tema, el logo, la marca powered by, los proyectos por usuario y los mensajes de IA por sesión.

¿Cómo se protegen los webhooks?

Cada entrega se firma con HMAC-SHA256, incluida una versión que firma una marca de tiempo junto con el cuerpo para que puedas rechazar reenvíos. Las entregas llevan un ID estable para eliminar duplicados y se reintentan hasta seis veces durante unas quince horas.

¿Funcionará la integración en Safari?

El intercambio con token de sesión evita depender de las cookies propias del creador, pero los navegadores siguen endureciendo el almacenamiento de terceros, así que prueba el flujo completo en las versiones actuales de Safari y Firefox, incluidas las ventanas privadas, antes del lanzamiento.

¿Es distinto de la API de We.Inc?

La API te permite construir tu propia interfaz y dar de alta clientes desde tus sistemas. La integración coloca el creador ya hecho dentro de tu producto. Muchos equipos usan la API para el alta y la integración para la edición.