Sunday Bible Readings

Przewodnik instalacji widżetów

Dowiedz się, jak w kilka minut dodać Czytanie dnia lub Czytania niedzielne do swojej strony.

Wypróbuj

Demo na żywo

Zobacz, jak wygląda widżet, zanim go zainstalujesz. Zmień tradycję, język, motyw i rozmiar — podgląd aktualizuje się natychmiast.

Katolicka
Jasny

Katolicki · Czytanie dnia · Jasny

Protestancka
Ciemny

Protestancki · Czytania niedzielne · Ciemny

Prawosławna
Jasny

Prawosławny · Czytanie dnia · Jasny

Chcesz wypróbować wszystkie opcje?

Interaktywny kreator pozwala łączyć tradycję, język, motyw, rozmiar i opcje — a następnie kopiuje dla Ciebie kod osadzania.

Otwórz kreator
Stwórz swój widżet

Szybki start

Instalacja w pięć minut

Najszybsza ścieżka: wklej fragment, zapisz, gotowe. Poniżej wybierz platformę dla przewodnika krok po kroku.

Zalecane — osadzenie skryptu

Iframe automatycznie dopasowujący wysokość. Działa na każdej nowoczesnej stronie.

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

Alternatywa — osadzenie iframe

Użyj, gdy skrypty zewnętrzne są niedozwolone.

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

Przewodniki instalacji

Krok po kroku dla każdej platformy

Wybierz CMS lub framework. Każdy przewodnik zawiera kod do skopiowania, typowe błędy i listę kontrolną.

WordPress

Łatwy
2 min

Działa w każdym planie WordPress pozwalającym na własny HTML — Gutenberg, Elementor i Edytor Klasyczny są wspierane.

Kroki

  1. Edytuj wpis, stronę lub obszar widżetu, gdzie ma się pojawić czytanie.
  2. W edytorze blokowym kliknij "+" i wybierz "Własny HTML". W Elementorze przeciągnij widżet "HTML". W Edytorze Klasycznym przejdź do zakładki "Tekst".
  3. Wklej poniższy fragment.
  4. Zapisz / opublikuj. Widżet pojawi się od razu na froncie.

Dla sidebarów i stopek użyj Wygląd → Widżety → Własny HTML.

Jeśli motyw wymaga skryptów w stopce, umieść <script> w polu "Footer scripts" motywu, a <div data-sbr-widget="..."> tam, gdzie ma się pojawić widżet.

Przykładowy kod

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

Częste błędy

  • Wklejanie do zwykłego bloku akapitu — WordPress eskapuje HTML.
  • Wtyczki cache (WP Rocket, W3 Total Cache) podają starą stronę — wyczyść cache po publikacji.
  • Wtyczki bezpieczeństwa usuwają <script> — zezwól skryptom z sundaybiblereadings.com.

Lista kontrolna

  • Użyto bloku Własny HTML / Kod (nie akapit).
  • Cache wyczyszczony.
  • Widżet widoczny na froncie (nie tylko w edytorze).

Squarespace

Łatwy
2 min

Squarespace 7.1 obsługuje widżety przez blok "Kod". Plany płatne pozwalają też wstrzyknąć skrypt na całą stronę.

Kroki

  1. Edytuj stronę, na której chcesz widżet.
  2. Kliknij "+" i wstaw blok "Kod".
  3. Upewnij się, że "Pokaż źródło" jest WYŁĄCZONE i typ to HTML.
  4. Wklej fragment i zapisz.

Aby użyć widżetu na każdej stronie, idź do Ustawienia → Zaawansowane → Wstrzykiwanie kodu → Stopka i wklej tylko tag <script> raz. Następnie wstaw <div data-sbr-widget="..."> na poszczególnych stronach.

Przykładowy kod

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

Częste błędy

  • Użycie planu darmowego, który wyłącza bloki Kodu.
  • Pozostawienie "Pokaż źródło" włączonego — drukuje HTML jako tekst.
  • Owijanie fragmentu w blok Markdown.

Lista kontrolna

  • Strona zapisana i opublikowana.
  • Blok Kodu zawiera HTML, nie zwykły tekst.
  • Podgląd mobilny nadal pokazuje widżet.

Wix

Łatwy
3 min

Użyj osadzenia iframe dla najbardziej spójnego wyniku. Edytor Wix izoluje skrypty zewnętrzne.

Kroki

  1. W Edytorze Wix kliknij Dodaj (+) → Kod osadzenia → HTML Embed.
  2. Wybierz "Kod" i wklej fragment iframe poniżej.
  3. Dopasuj rozmiar placeholdera.
  4. Opublikuj.

Na Wix Business / VIP można użyć skryptu przez Ustawienia → Własny kod → Dodaj → Koniec body.

Przykładowy kod

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

Częste błędy

  • Wybór "Adres strony" zamiast "Kod".
  • Zbyt niski iframe — ustaw wysokość na co najmniej 320px.
  • Zapomnienie o publikacji (Zapis nie wystarcza).

Lista kontrolna

  • Element HTML Embed dodany.
  • Wysokość iframe ≥ 320px na desktopie.
  • Strona opublikowana.

Joomla

Średni
4 min

Użyj modułu Własny HTML lub artykułu w trybie HTML. Upewnij się, że edytor i filtry tekstu nie usuwają skryptów.

Kroki

  1. Idź do Rozszerzenia → Moduły → Nowy → Własny.
  2. W edytorze kliknij "Przełącz edytor", aby przejść do czystego HTML.
  3. Wklej fragment, przypisz moduł do pozycji i zapisz.
  4. Sprawdź System → Konfiguracja globalna → Filtry tekstu i ustaw grupę użytkowników na "Bez filtrowania".

Przykładowy kod

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

Częste błędy

  • TinyMCE usuwa <script> — przełącz edytor przed wklejeniem.
  • Domyślny filtr tekstu blokuje iframe / script — dostosuj per grupa.
  • Moduł przypisany do złej pozycji szablonu.

Lista kontrolna

  • Moduł opublikowany w widocznej pozycji.
  • Filtr tekstu nie usuwa skryptów dla grupy.
  • Widżet widoczny na skonfigurowanych stronach.

Drupal

Średni
5 min

Użyj bloku niestandardowego z formatem Full HTML. Format Full HTML musi być włączony dla roli umieszczającej widżet.

Kroki

  1. Idź do Struktura → Układ bloków → Biblioteka bloków → Dodaj.
  2. Ustaw Format tekstu na "Full HTML".
  3. Wklej fragment do treści i zapisz.
  4. Umieść blok w dowolnym regionie.

Przykładowy kod

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

Częste błędy

  • Użycie Basic HTML — usuwa iframe i script.
  • Zapomnienie o umieszczeniu bloku po utworzeniu.
  • Agresywne moduły CSP blokujące sundaybiblereadings.com.

Lista kontrolna

  • Użyto formatu Full HTML.
  • Blok w widocznym regionie.
  • Cache odbudowany (admin/config/development/performance).

Static HTML

Łatwy
1 min

Wklej fragment w dowolnym miejscu w <body>. Działa z czystym HTML, GitHub Pages, Netlify, Cloudflare Pages, Vercel itd.

Kroki

  1. Otwórz plik HTML w dowolnym edytorze.
  2. Wklej fragment wewnątrz <body>.
  3. Zapisz i wyślij.

Przykładowy kod

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

Częste błędy

  • Wklejanie w <head> — skrypt potrzebuje istniejącego DOM.
  • Hosting na HTTP — reguły mixed-content blokują widżet.

Lista kontrolna

  • Fragment w <body>.
  • Strona serwowana przez HTTPS.
  • Strona odświeżona po wgraniu.

React

Łatwy
3 min

Wyrenderuj <div> marker w dowolnym komponencie i załaduj skrypt raz przez useEffect, aby uniknąć SSR.

Kroki

  1. Utwórz komponent BibleWidget (fragment poniżej).
  2. Zaimportuj gdziekolwiek w aplikacji.
  3. Upewnij się, że skrypt jest dodawany tylko raz, nawet jeśli komponent montuje się wielokrotnie.

Przykładowy kod

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

Częste błędy

  • Wywołanie document.createElement w SSR — opakuj w useEffect.
  • Dodawanie skryptu wielokrotnie — sprawdź istniejące id.
  • Ścisła CSP bez https://sundaybiblereadings.com w frame-src/script-src.

Lista kontrolna

  • Skrypt dodany dokładnie raz.
  • Komponent renderuje div markera.
  • Brak ostrzeżeń hydration w konsoli.

Next.js

Łatwy
3 min

Użyj next/script ze strategy="afterInteractive". Działa w App Router (oznacz komponent "use client") i Pages Router.

Kroki

  1. Utwórz Client Component (App Router) lub dowolny komponent (Pages Router), który opakowuje next/script.
  2. Renderuj div markera obok Script.
  3. Zaimportuj i umieść komponent tam, gdzie chcesz widżet.

Przykładowy kod

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

Częste błędy

  • Zapomnienie o "use client" w App Router.
  • Użycie strategy="beforeInteractive" — widżet potrzebuje DOM.
  • Import pliku na poziomie strony bez oznaczenia jako client.

Lista kontrolna

  • Komponent oznaczony jako client (App Router).
  • Skrypt renderowany tylko raz na stronie.
  • Build produkcyjny nadal montuje widżet.

Vue / Nuxt

Łatwy
3 min

Ten sam wzorzec co React: dodaj skrypt w onMounted (lub mounted() w Options API) i renderuj szablon markera.

Kroki

  1. Utwórz komponent single-file (fragment poniżej).
  2. Zaimportuj gdziekolwiek w aplikacji.
  3. W Nuxt użyj <ClientOnly>, by pominąć SSR, jeśli wolisz.

Przykładowy kod

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

Częste błędy

  • Ładowanie skryptu w kontekście SSR — użyj onMounted.
  • Montowanie wielu kopii skryptu.

Lista kontrolna

  • Sprawdzanie id skryptu zapobiega duplikatom.
  • Widżet renderuje się po twardym odświeżeniu.
  • Działa w trybie uniwersalnym Nuxt.

Dostosuj

Każda opcja wyjaśniona

Cała personalizacja odbywa się przez atrybuty data-* na divie markera (lub parametry w src iframe).

AtrybutWartościUwagi
data-sbr-widget
daily-readingsunday-readings
Wymagane. Wybiera, który widżet wyświetlić.
data-locale
autoenesptfritdepl
"auto" wykrywa język przeglądarki z angielskim jako zapasem.
data-tradition
catholicprotestantorthodox
Steruje odniesieniami biblijnymi i celami linków.
data-theme
lightdarkauto
"auto" dopasowuje się do schematu kolorów systemu.
data-size
smallmediumlarge
Wpływa na typografię i początkową wysokość iframe.
data-logo
10
Pokaż nagłówek z ikoną książki.
data-desc
10
Pokaż krótką refleksję / opis.

Przykłady osadzenia

Skrypt czy iframe

Oba są darmowe. Wybierz to, co pasuje do Twojego CMS.

Osadzenie skryptu (zalecane)

Mały skrypt loader znajduje każdy data-sbr-widget na stronie, wstawia responsywny iframe i automatycznie dopasowuje jego rozmiar — bez skoków layoutu.

Zalecane dla: WordPress, Squarespace (płatny), statyczny HTML, React, Next.js, Vue.

Osadzenie iframe

Pojedynczy <iframe> ze stałą początkową wysokością. Bez JavaScriptu po Twojej stronie.

Zalecane dla: Wix, ograniczone Joomla/Drupal, środowiska ze ścisłą CSP, e-maile (iframe są usuwane — linkuj do strony kanonicznej).

Kompatybilność

Obsługa przeglądarek

Wszystkie nowoczesne przeglądarki z dwóch ostatnich głównych wersji.

Chrome
Firefox
Safari
Edge
Brave

IE 11 nie jest wspierany. Mobile Safari, Chrome Android i Firefox Android są wspierane.

Rozwiązywanie problemów

Napraw typowe problemy

Szukaj po objawie. Jeśli czegoś brakuje, napisz do nas — dodamy.

Dobre praktyki

Gdzie umieścić widżet

    Umieść Czytanie dnia na stronie głównej, blisko góry.
    Umieść Czytania niedzielne obok informacji o nabożeństwach.
    Zostaw odstęp wokół widżetu, by nie tłoczył innych treści.
    Unikaj ukrytych zakładek i zamkniętych akordeonów — widżet nie zmierzy tam swojej wysokości.
    Użyj jednego widżetu nad linią zagięcia i jednego pod nią, jeśli oba są istotne.
    Przetestuj na komputerze i telefonie przed ogłoszeniem.

Dostępność

  • Linki i przyciski CTA dostępne z klawiatury.
  • Semantyczny HTML (article, header, footer).
  • Kontrast kolorów zgodny z WCAG AA w obu motywach.
  • Działa z czytnikami ekranu — tytuł i meta są odczytywane.

Wydajność

  • Mały, asynchroniczny skrypt loader.
  • Iframe ładowany leniwie (loading="lazy").
  • Zmiana rozmiaru przez postMessage — bez skoków layoutu.
  • Responsywny domyślnie; nie wymaga dodatkowego CSS.

Atrybucja

  • Widżety są całkowicie darmowe.
  • Stopka "Powered by Sunday Bible Readings" musi pozostać widoczna.
  • Link prowadzi do odpowiedniej strony kanonicznej.
  • Usuwanie lub ukrywanie atrybucji jest niedozwolone.

Aktualizacje

Ustaw i zapomnij

Widżety zawsze pokazują najnowsze czytania. Nie musisz nic wdrażać, odświeżać ani aktualizować fragmentu. Każdego dnia widżet pobiera czytanie dnia; co tydzień — czytania najbliższej niedzieli.

FAQ

Najczęstsze pytania

Pomoc

Potrzebujesz pomocy?

Skontaktuj sięZasoby dla kościołówKreator widżetuDemo na żywoPrzewodniki instalacjiRozwiązywanie problemów