Widget Installation Guide

Steps

1. Edit the post, page, or widget area where you want the reading to appear.
2. In the block editor click the "+" and choose "Custom HTML". In Elementor, drag in an "HTML" widget. In the Classic Editor switch to the "Text" tab.
3. Paste the snippet below.
4. Save / publish. The widget appears immediately on the front-end.

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

Common mistakes

• Pasting into a regular paragraph block — WordPress will escape the HTML.
• Caching plugins (WP Rocket, W3 Total Cache) serving an older page — purge the cache after publishing.
• Security plugins stripping <script> tags — allow scripts from sundaybiblereadings.com.

Success checklist

• Custom HTML / Code block used (not paragraph).
• Cache purged.
• Widget visible on the front-end (not just the editor).

Steps

1. Edit the page where you want the widget.
2. Click "+" and insert a "Code" block.
3. Make sure "Display Source" is OFF and the block type is HTML.
4. Paste the snippet and save.

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

Common mistakes

• Using the free plan, which disables Code blocks.
• Leaving "Display Source" enabled — that prints the HTML as text.
• Wrapping the snippet inside a Markdown block.

Success checklist

• Page saved and published.
• Code block contains HTML, not plain text.
• Mobile preview still shows the widget.

Steps

1. In the Wix Editor click Add (+) → Embed Code → Embed HTML.
2. Choose "Code" and paste the iframe snippet below.
3. Resize the placeholder to roughly the size you want.
4. Publish.

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

Common mistakes

• Choosing "Website Address" instead of "Code".
• Leaving the iframe too short — set its height to 320px or larger.
• Forgetting to publish (Save is not enough).

Success checklist

• Embed HTML element added, not just Save.
• Iframe height >= 320px on desktop.
• Site published.

Steps

1. Go to Extensions → Modules → New → Custom.
2. In the text editor click the "Toggle Editor" button to enter raw HTML mode.
3. Paste the snippet, assign the module to a position, and save.
4. Check System → Global Configuration → Text Filters and set the user group that posts the widget to Filter Type: No Filtering.

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

Common mistakes

• TinyMCE stripping <script> tags — toggle the editor off before pasting.
• Default text filter blacklisting iframe / script — adjust per user group.
• Module assigned to the wrong template position.

Success checklist

• Module published and assigned to a visible position.
• Text filter does not strip scripts for the user group.
• Widget visible on the configured pages.

Steps

1. Go to Structure → Block layout → Custom block library → Add custom block.
2. Set Text format to "Full HTML".
3. Paste the snippet into the body and save.
4. Place the block in any region you want.

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

Common mistakes

• Using Basic HTML — it strips iframe and script tags.
• Forgetting to place the block after creating it.
• Aggressive CSP modules blocking sundaybiblereadings.com.

Success checklist

• Full HTML format used.
• Block placed in a visible region.
• Cache rebuilt (admin/config/development/performance).

Steps

1. Open your HTML file in any editor.
2. Paste the snippet anywhere inside <body>.
3. Save and upload.

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

Common mistakes

• Pasting inside <head> — the script needs the DOM to exist.
• Hosting over plain HTTP — mixed-content rules block the widget.

Success checklist

• Snippet inside <body>.
• Site served over HTTPS.
• Page reloaded after upload.

Steps

1. Create a BibleWidget component (snippet below).
2. Import it anywhere in your app.
3. Make sure the script is added only once, even if the component mounts multiple times.

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

Common mistakes

• Calling document.createElement during SSR — wrap in useEffect.
• Adding the script multiple times — check for an existing id first.
• Strict CSP missing https://sundaybiblereadings.com in frame-src/script-src.

Success checklist

• Script appended exactly once.
• Component renders the marker div.
• No hydration warnings in the console.

Steps

1. Create a Client Component (App Router) or any component (Pages Router) that wraps next/script.
2. Render the marker div alongside the Script tag.
3. Import and place the component wherever you want the 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"
      />
    </>
  );
}

Common mistakes

• Forgetting the "use client" directive in the App Router.
• Using strategy="beforeInteractive" — the widget needs the DOM to mount.
• Importing the file at the page level without marking it client.

Success checklist

• Component marked as client (App Router).
• Script renders only once per page.
• Production build still mounts the widget.

Steps

1. Create a single-file component (snippet below).
2. Import it anywhere in your app.
3. In Nuxt, use a <ClientOnly> wrapper to skip SSR if you prefer.

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

Common mistakes

• Loading the script in SSR context — use onMounted.
• Mounting multiple copies of the script tag.

Success checklist

• Script id check prevents duplicates.
• Widget renders on a hard refresh.
• Works with Nuxt's universal mode.