Guida all'installazione dei widget

Passi

1. Modifica il post, la pagina o l'area widget dove vuoi mostrare la lettura.
2. Nell'editor a blocchi clicca "+" e scegli "HTML personalizzato". In Elementor trascina un widget "HTML". Nel Classico passa alla scheda "Testo".
3. Incolla lo snippet qui sotto.
4. Salva / pubblica. Il widget appare subito sul sito.

<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>

Errori comuni

• Incollare in un blocco paragrafo — WordPress farà l'escape dell'HTML.
• Plugin di cache (WP Rocket, W3 Total Cache) che mostrano una pagina vecchia — svuota la cache dopo aver pubblicato.
• Plugin di sicurezza che rimuovono <script> — consenti gli script da sundaybiblereadings.com.

Checklist di successo

• Blocco HTML / Codice usato (non paragrafo).
• Cache svuotata.
• Widget visibile sul front-end (non solo nell'editor).

Passi

1. Modifica la pagina dove vuoi il widget.
2. Clicca "+" e inserisci un blocco "Codice".
3. Assicurati che "Mostra sorgente" sia OFF e il tipo sia HTML.
4. Incolla lo snippet e salva.

<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>

Errori comuni

• Usare il piano gratuito, che disabilita i blocchi Codice.
• Lasciare "Mostra sorgente" attivo — stampa l'HTML come testo.
• Avvolgere lo snippet in un blocco Markdown.

Checklist di successo

• Pagina salvata e pubblicata.
• Blocco Codice contiene HTML, non testo.
• L'anteprima mobile mostra ancora il widget.

Passi

1. Nell'editor Wix clicca Aggiungi (+) → Codice di incorporamento → HTML Embed.
2. Scegli "Codice" e incolla lo snippet iframe.
3. Ridimensiona il segnaposto.
4. Pubblica.

<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>

Errori comuni

• Scegliere "Indirizzo web" invece di "Codice".
• Iframe troppo basso — imposta altezza ≥ 320px.
• Dimenticare di pubblicare (Salva non basta).

Checklist di successo

• Elemento HTML Embed aggiunto.
• Altezza iframe ≥ 320px su desktop.
• Sito pubblicato.

Passi

1. Vai in Estensioni → Moduli → Nuovo → Personalizzato.
2. Nell'editor clicca "Cambia editor" per passare a HTML grezzo.
3. Incolla lo snippet, assegna il modulo a una posizione e salva.
4. Controlla Sistema → Configurazione → Filtri di testo e imposta il gruppo a "Nessun filtro".

<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>

Errori comuni

• TinyMCE rimuove <script> — disattiva l'editor prima di incollare.
• Filtro di testo blocca iframe / script — regola per gruppo.
• Modulo assegnato alla posizione errata del template.

Checklist di successo

• Modulo pubblicato in posizione visibile.
• Filtro di testo non rimuove gli script per il gruppo.
• Widget visibile nelle pagine configurate.

Passi

1. Vai in Struttura → Layout blocchi → Libreria blocchi → Aggiungi.
2. Imposta Formato testo a "Full HTML".
3. Incolla lo snippet nel corpo e salva.
4. Posiziona il blocco in qualsiasi regione.

<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>

Errori comuni

• Usare Basic HTML — rimuove iframe e script.
• Dimenticare di posizionare il blocco dopo averlo creato.
• Moduli CSP aggressivi che bloccano sundaybiblereadings.com.

Checklist di successo

• Formato Full HTML usato.
• Blocco in regione visibile.
• Cache ricostruita (admin/config/development/performance).

Passi

1. Apri il file HTML in un editor.
2. Incolla lo snippet dentro <body>.
3. Salva e carica.

<!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>

Errori comuni

• Incollare in <head> — lo script ha bisogno del DOM.
• Servire in HTTP — il contenuto misto blocca il widget.

Checklist di successo

• Snippet dentro <body>.
• Sito servito in HTTPS.
• Pagina ricaricata dopo l'upload.

Passi

1. Crea un componente BibleWidget (snippet sotto).
2. Importalo dove vuoi nell'app.
3. Assicurati che lo script venga aggiunto una sola volta anche se il componente si monta più volte.

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"
    />
  );
}

Errori comuni

• Chiamare document.createElement in SSR — usa useEffect.
• Aggiungere lo script più volte — controlla l'id esistente.
• CSP stretta senza https://sundaybiblereadings.com in frame-src/script-src.

Checklist di successo

• Script aggiunto una sola volta.
• Il componente renderizza il div marker.
• Nessun warning di hydration in console.

Passi

1. Crea un Client Component (App Router) o qualsiasi componente (Pages Router) che incapsuli next/script.
2. Renderizza il div marker accanto a Script.
3. Importa e usa il componente dove vuoi.

// 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"
      />
    </>
  );
}

Errori comuni

• Dimenticare "use client" nell'App Router.
• Usare strategy="beforeInteractive" — serve il DOM.
• Importare il file a livello di pagina senza marcarlo client.

Checklist di successo

• Componente marcato come client (App Router).
• Script renderizzato una sola volta per pagina.
• La build di produzione monta ancora il widget.

Passi

1. Crea un componente single-file (snippet sotto).
2. Importalo dove vuoi nell'app.
3. In Nuxt, usa <ClientOnly> per saltare l'SSR se preferisci.

<!-- 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>

Errori comuni

• Caricare lo script in contesto SSR — usa onMounted.
• Montare più copie dello script.

Checklist di successo

• Controllo dell'id evita duplicati.
• Widget renderizzato dopo refresh forzato.
• Funziona in modalità universale di Nuxt.