Volver al resumen
Widgets incrustables
Coloca widgets de tu sitio web como embeds en dominios externos. Gestiona los slots de widgets y configura los dominios permitidos.
¿Qué son los Widgets incrustables?
Los Widgets incrustables te permiten colocar ciertas partes de tu sitio web como widgets independientes en sitios externos. Piensa en un widget de reseñas en un sitio de socios, un formulario de reservas en una página de destino externa, o tu chatbot en un portal de socios.
Widgets disponibles para embedding:
• Agente de voz IA — Widget de voz para contacto con clientes
• Chatbot — Widget de chat IA con historial de conversación y reenvío a soporte
• Reseñas — Calificaciones y estrellas
• Menú — Categorías, artículos y alérgenos
• Reservas de citas — Programar citas
• Reservas de mesa — Reservar mesas
Cada widget funciona en un contenedor seguro y aislado (Shadow DOM) que no interfiere con los estilos del sitio anfitrión.
Slots de widgets
Cada activación de widget consume un slot de widget, independientemente de si es en tu propio sitio o como embed en un dominio externo.
Límites de slots por plan:
• Starter: 5 slots
• Professional: 15 slots
• Agency: 100 slots
¿Necesitas más slots? Actualiza a un plan superior. No hay paquetes de slots separados disponibles.
Consejos
- Consulta tu uso actual de slots en CMS → Widgets incrustables.
- Desactiva widgets no utilizados para liberar slots.
Activar un embed
Ve a CMS → Widgets incrustables y sigue estos pasos:
1. Haz clic en 'Añadir widget'
2. Elige el tipo de widget (ej. Reseñas, Reservas)
3. Elige el tipo de destino: sitio propio o dominio externo
4. Para dominio externo: ingresa el dominio completo (ej. https://sitiosocio.es)
5. Haz clic en 'Activar'
El sistema valida el dominio (HTTPS requerido, sin IPs privadas) y activa el widget.
Consejos
- Puedes configurar hasta 20 dominios permitidos por sitio.
- Solo se permiten dominios HTTPS para embedding.
Nota
- Asegúrate de que el dominio coincida exactamente con donde colocas el widget. Un dominio incorrecto bloqueará el widget.
Generar código de embed
Después de la activación, genera el código de embed:
1. Haz clic en el icono de código junto a un embed activo
2. Copia el fragmento de script
3. Pégalo en el HTML del sitio externo
Ejemplo:
```html
<script src="https://widgets.your-img-cdn.com/sdk.js"
data-site="TU_SITE_ID"
data-widget="reviews"
data-lang="es"></script>
```
El widget se carga automáticamente y se muestra donde coloques el script.
Consejos
- Puedes configurar el idioma mediante data-lang (nl, en, de, fr, es).
- El widget se adapta automáticamente al ancho de su contenedor.
Seguridad
Los Widgets incrustables están asegurados con múltiples capas:
• Validación de dominio — Solo los dominios configurados pueden cargar el widget
• Tokens vinculados al origen — Tokens JWT de corta duración vinculados al sitio, widget y dominio
• Limitación de velocidad — Máximo 60 solicitudes por sitio por minuto, 20 por IP por minuto
• CSP frame-ancestors — Protección del navegador que bloquea la incrustación en dominios no autorizados
• Aislamiento Shadow DOM — El código y estilos del widget están aislados de la página anfitriona
Nota
- Elimina dominios no utilizados de tu configuración para prevenir abusos.
- No compartas tu código de embed públicamente — aunque la seguridad está vinculada al dominio, es mejor proporcionar el código solo a socios de confianza.
Desactivar un embed
Ve a CMS → Widgets incrustables:
1. Haz clic en el icono de papelera junto al embed que deseas eliminar
2. Confirma la desactivación
El widget deja de funcionar inmediatamente en el dominio externo y el slot se libera.
Consejos
- Después de la desactivación, el widget no se cargará más, incluso si el script sigue en el sitio externo.
Instalación por plataforma
A continuación se explica cómo añadir el script de embed en cada plataforma.
WordPress (editor clásico o de bloques):
1. Ve a la página donde quieres el widget
2. Añade un bloque 'HTML personalizado' (Gutenberg) o cambia al editor de texto
3. Pega el script de embed
4. Guarda y publica
Elementor:
1. Abre la página en Elementor
2. Arrastra el widget 'HTML' a la posición deseada
3. Pega el script de embed en el campo HTML
4. Haz clic en 'Actualizar'
Oxygen Builder:
1. Abre la página en Oxygen
2. Añade un componente 'Code Block'
3. Selecciona la pestaña 'HTML' o 'Full Code'
4. Pega el script de embed
5. Guarda
Webflow:
1. Añade un elemento 'Embed' a la página
2. Pega el script de embed en el campo de código
3. Publica el sitio
Squarespace:
1. Añade un bloque 'Código' a la página
2. Pega el script de embed
3. Guarda y publica
Wix:
1. Haz clic en 'Añadir' (+) → 'Insertar código' → 'Personalizado'
2. Haz clic en 'Introducir código'
3. Pega el script de embed
4. Posiciona el elemento donde lo desees
Shopify:
1. Ve a Tienda online → Temas → 'Editar código'
2. Abre el archivo de plantilla de la página deseada (ej. `page.liquid`)
3. Pega el script de embed en la posición deseada
4. Guarda
Sitio HTML estático:
Pega el script de embed directamente en el `<body>` de tu archivo HTML donde quieras que aparezca el widget.
Consejos
- El script puede ir en cualquier parte del <body> — el widget aparece en esa posición exacta (excepto Voice Agent y Chatbot, que flotan abajo a la derecha).
- NO necesitas añadir CSS ni JavaScript adicional. El script carga todo automáticamente.
- Siempre prueba en un entorno de staging/vista previa antes de publicar.
Nota
- NO coloques el script en el <head> — necesita un elemento visible y debe estar en el <body>.
- Algunas plataformas (como Wix) cachean páginas de forma agresiva. Después de añadir el script, puede tardar un momento en que el widget sea visible.
Qué muestra cada widget y estilos
Por widget:
• Voice Agent — Un botón de llamada flotante en la parte inferior derecha de la página. Al hacer clic, se abre un panel de llamada con botones de micrófono, silencio y colgar. El visitante inicia una conexión de voz WebRTC con el Agente Telefónico IA directamente desde el navegador (no se necesita número de teléfono).
• Chatbot — Un botón de chat flotante en la parte inferior derecha. Al hacer clic, se abre una ventana de chat con historial de mensajes, soporte Markdown y reenvío opcional a soporte por correo electrónico. No se requiere inicio de sesión para visitantes — funciona en base al siteId. Soporta captura de email, mensaje de bienvenida y 5 idiomas.
• Reseñas — Puntuación media con estrellas + lista de reseñas individuales (nombre, fecha, texto, estrellas).
• Menú — Categorías con artículos, precios e información de alérgenos. Incluye búsqueda y filtrado.
• Reservas de citas — Un flujo paso a paso: elegir fecha → elegir hora → rellenar datos → confirmación.
• Reservas de mesa — Similar a citas pero para restaurantes: elegir número de comensales + fecha → elegir hora → rellenar datos → confirmación.
Estilos:
Cada widget funciona en un contenedor Shadow DOM. Esto significa:
• El CSS del sitio externo NO afecta al widget
• El widget NO afecta al sitio externo
• NO puedes aplicar CSS personalizado a los elementos internos del widget
Personalización limitada mediante atributos data:
• `data-theme="light"` o `data-theme="dark"` — cambiar entre tema claro y oscuro
• `data-lang="es"` — establecer el idioma (nl, en, de, fr, es)
El widget utiliza automáticamente los colores de marca configurados en los ajustes de tu sitio OptimoCMS.
Consejos
- Voice Agent y Chatbot siempre flotan en la parte inferior derecha, independientemente de dónde coloques el script en la página.
- Los otros widgets (reseñas, menú, reservas) se renderizan en línea en la posición del script.
- El Chatbot recupera automáticamente tus ajustes de chatbot (mensaje de bienvenida, color, nombre) del CMS.
- El aislamiento Shadow DOM previene conflictos con tu tema o CSS existente.