Guía de instalación de widgets

Pasos

1. Edita la entrada, página o área de widgets donde quieras que aparezca la lectura.
2. En el editor por bloques pulsa "+" y elige "HTML personalizado". En Elementor arrastra un widget "HTML". En el Editor Clásico cambia a la pestaña "Texto".
3. Pega el siguiente fragmento.
4. Guarda / publica. El widget aparece de inmediato en el frontend.

<script src="https://sundaybiblereadings.com/widgets/embed.js" async></script>
<div data-sbr-widget="daily-reading"
     data-locale="auto"
     data-tradition="catholic"
     data-theme="light"
     data-size="medium"></div>

Errores comunes

• Pegar en un bloque de párrafo normal — WordPress escapará el HTML.
• Plugins de caché (WP Rocket, W3 Total Cache) sirviendo una página antigua — purga la caché tras publicar.
• Plugins de seguridad eliminando <script> — permite scripts desde sundaybiblereadings.com.

Lista de verificación

• Bloque HTML / Código usado (no párrafo).
• Caché purgada.
• Widget visible en el frontend (no solo en el editor).

Pasos

1. Edita la página donde quieras el widget.
2. Pulsa "+" e inserta un bloque "Código".
3. Asegúrate de que "Mostrar fuente" esté DESACTIVADO y el tipo sea HTML.
4. Pega el fragmento y guarda.

<script src="https://sundaybiblereadings.com/widgets/embed.js" async></script>
<div data-sbr-widget="daily-reading"
     data-locale="auto"
     data-tradition="catholic"
     data-theme="light"
     data-size="medium"></div>

Errores comunes

• Usar el plan gratuito, que deshabilita los bloques de Código.
• Dejar "Mostrar fuente" activado — imprime el HTML como texto.
• Envolver el fragmento en un bloque Markdown.

Lista de verificación

• Página guardada y publicada.
• El bloque de Código contiene HTML, no texto plano.
• La vista previa móvil aún muestra el widget.

Pasos

1. En el Editor de Wix haz clic en Añadir (+) → Insertar Código → HTML Embed.
2. Elige "Código" y pega el fragmento de iframe.
3. Redimensiona el marcador al tamaño aproximado deseado.
4. Publica.

<iframe
  src="https://sundaybiblereadings.com/widgets/embed/daily-reading?locale=auto&tradition=catholic&theme=light&size=medium"
  width="100%"
  height="320"
  loading="lazy"
  style="border:0;overflow:hidden;width:100%;"
  title="Sunday Bible Readings"></iframe>

Errores comunes

• Elegir "Dirección Web" en lugar de "Código".
• Dejar el iframe demasiado corto — fija su altura en 320px o más.
• Olvidar publicar (Guardar no basta).

Lista de verificación

• Elemento HTML Embed añadido (no solo Guardado).
• Altura del iframe ≥ 320px en escritorio.
• Sitio publicado.

Pasos

1. Ve a Extensiones → Módulos → Nuevo → Personalizado.
2. En el editor pulsa "Alternar editor" para entrar en HTML puro.
3. Pega el fragmento, asigna el módulo a una posición y guarda.
4. Revisa Sistema → Configuración Global → Filtros de Texto y establece el tipo "Sin Filtrado" para el grupo que publica el widget.

<script src="https://sundaybiblereadings.com/widgets/embed.js" async></script>
<div data-sbr-widget="daily-reading"
     data-locale="auto"
     data-tradition="catholic"
     data-theme="light"
     data-size="medium"></div>

Errores comunes

• TinyMCE eliminando <script> — desactiva el editor antes de pegar.
• Filtro de texto bloqueando iframe / script — ajusta por grupo de usuarios.
• Módulo asignado a una posición de plantilla incorrecta.

Lista de verificación

• Módulo publicado y asignado a una posición visible.
• El filtro de texto no elimina scripts para el grupo de usuarios.
• Widget visible en las páginas configuradas.

Pasos

1. Ve a Estructura → Disposición de bloques → Biblioteca de bloques personalizados → Añadir bloque.
2. Pon Formato de texto en "Full HTML".
3. Pega el fragmento en el cuerpo y guarda.
4. Coloca el bloque en la región que prefieras.

<script src="https://sundaybiblereadings.com/widgets/embed.js" async></script>
<div data-sbr-widget="daily-reading"
     data-locale="auto"
     data-tradition="catholic"
     data-theme="light"
     data-size="medium"></div>

Errores comunes

• Usar Basic HTML — elimina iframes y scripts.
• Olvidar colocar el bloque tras crearlo.
• Módulos CSP agresivos bloqueando sundaybiblereadings.com.

Lista de verificación

• Formato Full HTML usado.
• Bloque colocado en una región visible.
• Caché reconstruida (admin/config/development/performance).

Pasos

1. Abre tu archivo HTML en cualquier editor.
2. Pega el fragmento dentro de <body>.
3. Guarda y sube.

<!doctype html>
<html lang="en">
  <body>
    <script src="https://sundaybiblereadings.com/widgets/embed.js" async></script>
    <div data-sbr-widget="daily-reading"
         data-locale="auto"
         data-tradition="catholic"
         data-theme="light"
         data-size="medium"></div>
  </body>
</html>

Errores comunes

• Pegar dentro de <head> — el script necesita que exista el DOM.
• Servir sobre HTTP — las reglas de contenido mixto bloquean el widget.

Lista de verificación

• Fragmento dentro de <body>.
• Sitio servido por HTTPS.
• Página recargada tras subir.

Pasos

1. Crea un componente BibleWidget (fragmento abajo).
2. Impórtalo donde quieras en tu app.
3. Asegúrate de añadir el script solo una vez aunque el componente se monte varias veces.

import { useEffect } from "react";

export function BibleWidget() {
  useEffect(() => {
    const id = "sbr-widget-loader";
    if (document.getElementById(id)) return;
    const s = document.createElement("script");
    s.id = id;
    s.src = "https://sundaybiblereadings.com/widgets/embed.js";
    s.async = true;
    document.body.appendChild(s);
  }, []);

  return (
    <div
      data-sbr-widget="daily-reading"
      data-locale="auto"
      data-tradition="catholic"
      data-theme="auto"
      data-size="medium"
    />
  );
}

Errores comunes

• Llamar a document.createElement en SSR — envuélvelo en useEffect.
• Añadir el script varias veces — comprueba el id existente primero.
• CSP estricta sin https://sundaybiblereadings.com en frame-src/script-src.

Lista de verificación

• Script añadido una sola vez.
• El componente renderiza el div marcador.
• Sin avisos de hidratación en consola.

Pasos

1. Crea un Client Component (App Router) o cualquier componente (Pages Router) que envuelva next/script.
2. Renderiza el div marcador junto al Script.
3. Importa y coloca el componente donde quieras el widget.

// app/components/BibleWidget.tsx — App Router (Client Component)
"use client";
import Script from "next/script";

export default function BibleWidget() {
  return (
    <>
      <Script
        src="https://sundaybiblereadings.com/widgets/embed.js"
        strategy="afterInteractive"
      />
      <div
        data-sbr-widget="sunday-readings"
        data-locale="auto"
        data-tradition="catholic"
        data-theme="auto"
        data-size="medium"
      />
    </>
  );
}

Errores comunes

• Olvidar la directiva "use client" en App Router.
• Usar strategy="beforeInteractive" — el widget necesita el DOM.
• Importar el archivo a nivel de página sin marcarlo como cliente.

Lista de verificación

• Componente marcado como cliente (App Router).
• Script renderizado solo una vez por página.
• El build de producción sigue montando el widget.

Pasos

1. Crea un componente de archivo único (fragmento abajo).
2. Impórtalo donde quieras en tu app.
3. En Nuxt, usa <ClientOnly> si prefieres omitir SSR.

<!-- BibleWidget.vue -->
<template>
  <div
    data-sbr-widget="daily-reading"
    data-locale="auto"
    data-tradition="catholic"
    data-theme="auto"
    data-size="medium"
  />
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  if (document.getElementById("sbr-widget-loader")) return;
  const s = document.createElement("script");
  s.id = "sbr-widget-loader";
  s.src = "https://sundaybiblereadings.com/widgets/embed.js";
  s.async = true;
  document.body.appendChild(s);
});
</script>

Errores comunes

• Cargar el script en contexto SSR — usa onMounted.
• Montar varias copias del script.

Lista de verificación

• El id del script evita duplicados.
• El widget se renderiza tras recarga forzada.
• Funciona en modo universal de Nuxt.