Libro de Reclamaciones: embed
Un botón flotante con modal, vía un solo <script>. Sin dependencias, < 5KB.
El widget es un script con atributos data-*, no un custom element. Pégalo antes de </body>. Se monta solo al cargar el DOM.
Instalación
<script src="https://app.denorly.com/assets/libro-widget.js"
data-token="8f3b2c1a-9d4e-4f7a-b6c2-1e5a7d9c0b3f"
data-position="bottom-right"
data-color="#E8A817"
data-text="Libro de Reclamaciones"
data-mode="modal"
async></script>Solo data-token es obligatorio. El resto tiene defaults.
Atributos
| Atributo | Default | Valores / notas |
|---|---|---|
| data-token | - | Requerido. UUID del formulario. Sin él, el widget no se monta. |
| data-position | bottom-right | bottom-right o bottom-left. |
| data-color | #EF4444 | Color del botón (cualquier CSS color). |
| data-text | Libro de Reclamaciones | Texto del botón (se oculta en móvil, queda el ícono). |
| data-mode | modal | modal (iframe en overlay) o redirect (navega a la página). |
Sin widget: iframe directo
Si prefieres incrustar el formulario tú mismo, usa la URL pública con ?embed=true.
<iframe
src="https://denorly.com/libro-de-reclamaciones/8f3b2c1a-9d4e-4f7a-b6c2-1e5a7d9c0b3f?embed=true"
style="width:100%;height:85vh;border:none"
title="Libro de Reclamaciones"
loading="lazy"></iframe>La página pública también funciona standalone (sin embed) en https://denorly.com/libro-de-reclamaciones/{TOKEN}.
Evento postMessage
Al enviar una queja, el iframe emite un postMessage a la ventana padre. El widget lo usa para auto-cerrar el modal; tú puedes escucharlo para tu propia lógica.
window.addEventListener("message", (e) => {
if (e.data && e.data.type === "denorly:complaint:submitted") {
// queja registrada: dispara tu analytics, toast, etc.
}
});Gotcha: el widget se auto-protege contra doble carga (window.__denorlyLibroWidget). Si incluyes el script dos veces, solo se monta una vez. En SPAs (Next/Astro con vistas client-side), inclúyelo una sola vez en el layout raíz, no por página.