Widget-Installationsanleitung

Schritte

1. Bearbeiten Sie den Beitrag, die Seite oder den Widget-Bereich, wo die Lesung erscheinen soll.
2. Im Block-Editor auf "+" klicken und "Eigenes HTML" wählen. In Elementor ein "HTML"-Widget ziehen. Im Classic Editor zur Registerkarte "Text" wechseln.
3. Snippet einfügen.
4. Speichern / veröffentlichen. Das Widget erscheint sofort.

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

Häufige Fehler

• In einen normalen Absatzblock einfügen — WordPress maskiert das HTML.
• Cache-Plugins (WP Rocket, W3 Total Cache) liefern alte Seite — Cache leeren.
• Sicherheits-Plugins entfernen <script> — Skripte von sundaybiblereadings.com erlauben.

Erfolgs-Checkliste

• Eigenes HTML / Code-Block verwendet (kein Absatz).
• Cache geleert.
• Widget im Frontend sichtbar (nicht nur im Editor).

Schritte

1. Bearbeiten Sie die Seite, wo das Widget hin soll.
2. Klicken Sie "+" und fügen Sie einen "Code"-Block ein.
3. Stellen Sie sicher, dass "Quelltext anzeigen" AUS ist und der Typ HTML lautet.
4. Snippet einfügen und speichern.

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

Häufige Fehler

• Kostenloser Tarif deaktiviert Code-Blöcke.
• "Quelltext anzeigen" aktiviert — HTML wird als Text gedruckt.
• Snippet in einen Markdown-Block packen.

Erfolgs-Checkliste

• Seite gespeichert und veröffentlicht.
• Code-Block enthält HTML, nicht reinen Text.
• Mobile Vorschau zeigt das Widget.

Schritte

1. Im Wix-Editor: Hinzufügen (+) → Einbettungscode → HTML Embed.
2. "Code" wählen und das iframe-Snippet einfügen.
3. Platzhalter grob auf die gewünschte Größe ziehen.
4. Veröffentlichen.

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

Häufige Fehler

• "Website-Adresse" statt "Code" wählen.
• iframe zu klein — Höhe auf 320px oder mehr setzen.
• Vergessen zu veröffentlichen (Speichern reicht nicht).

Erfolgs-Checkliste

• HTML-Embed-Element hinzugefügt.
• iframe-Höhe ≥ 320px am Desktop.
• Seite veröffentlicht.

Schritte

1. Erweiterungen → Module → Neu → Eigene.
2. Im Editor "Editor umschalten" klicken, um in den rohen HTML-Modus zu wechseln.
3. Snippet einfügen, Modul einer Position zuweisen und speichern.
4. System → Konfiguration → Textfilter und die Benutzergruppe auf "Keine Filterung" setzen.

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

Häufige Fehler

• TinyMCE entfernt <script> — Editor vor dem Einfügen umschalten.
• Standardtextfilter blockiert iframe / script — pro Gruppe anpassen.
• Modul falscher Template-Position zugewiesen.

Erfolgs-Checkliste

• Modul veröffentlicht und sichtbarer Position zugewiesen.
• Textfilter entfernt keine Skripte für die Gruppe.
• Widget auf den konfigurierten Seiten sichtbar.

Schritte

1. Struktur → Block layout → Custom block library → Add custom block.
2. Textformat auf "Full HTML" setzen.
3. Snippet in den Body einfügen und speichern.
4. Block in einer beliebigen Region platzieren.

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

Häufige Fehler

• Basic HTML — entfernt iframe und script.
• Vergessen, den Block nach dem Erstellen zu platzieren.
• Aggressive CSP-Module blockieren sundaybiblereadings.com.

Erfolgs-Checkliste

• Format Full HTML verwendet.
• Block in sichtbarer Region.
• Cache neu aufgebaut (admin/config/development/performance).

Schritte

1. HTML-Datei in einem Editor öffnen.
2. Snippet innerhalb von <body> einfügen.
3. Speichern und hochladen.

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

Häufige Fehler

• In <head> einfügen — das Script braucht das DOM.
• Über HTTP hosten — Mixed-Content blockiert das Widget.

Erfolgs-Checkliste

• Snippet in <body>.
• Seite über HTTPS ausgeliefert.
• Seite nach Upload neu geladen.

Schritte

1. Komponente BibleWidget erstellen (Snippet unten).
2. Überall in der App importieren.
3. Script nur einmal einbinden, auch wenn die Komponente mehrfach gemountet wird.

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

Häufige Fehler

• document.createElement im SSR aufrufen — in useEffect verpacken.
• Script mehrfach hinzufügen — vorhandene id prüfen.
• Strenge CSP ohne https://sundaybiblereadings.com in frame-src/script-src.

Erfolgs-Checkliste

• Script genau einmal hinzugefügt.
• Komponente rendert das Marker-Div.
• Keine Hydration-Warnungen in der Konsole.

Schritte

1. Client Component (App Router) oder beliebige Komponente (Pages Router) erstellen, die next/script umhüllt.
2. Marker-Div neben Script rendern.
3. Komponente importieren und platzieren.

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

Häufige Fehler

• "use client" im App Router vergessen.
• strategy="beforeInteractive" — das Widget braucht das DOM.
• Datei auf Seitenebene importieren, ohne sie als Client zu markieren.

Erfolgs-Checkliste

• Komponente als Client markiert (App Router).
• Script wird pro Seite nur einmal gerendert.
• Produktions-Build mountet das Widget weiterhin.

Schritte

1. Single-File-Komponente erstellen (Snippet unten).
2. Überall in der App importieren.
3. In Nuxt bei Bedarf <ClientOnly> verwenden, um SSR zu überspringen.

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

Häufige Fehler

• Script im SSR-Kontext laden — useOnMounted verwenden.
• Mehrere Kopien des Script-Tags mounten.

Erfolgs-Checkliste

• Script-ID-Prüfung verhindert Duplikate.
• Widget rendert nach Hard-Reload.
• Funktioniert im Nuxt Universal-Modus.