Guia de instalação de widgets

Passos

1. Edite o post, página ou área de widget onde a leitura deve aparecer.
2. No editor de blocos clique em "+" e escolha "HTML personalizado". No Elementor arraste um widget "HTML". No Editor Clássico mude para a aba "Texto".
3. Cole o trecho abaixo.
4. Salve / publique. O widget aparece imediatamente no 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>

Erros comuns

• Colar em um bloco de parágrafo — o WordPress escapará o HTML.
• Plugins de cache (WP Rocket, W3 Total Cache) servindo página antiga — limpe o cache após publicar.
• Plugins de segurança removendo <script> — permita scripts de sundaybiblereadings.com.

Checklist de sucesso

• Bloco HTML / Código usado (não parágrafo).
• Cache limpo.
• Widget visível no front-end (não só no editor).

Passos

1. Edite a página onde deseja o widget.
2. Clique em "+" e insira um bloco "Código".
3. Garanta que "Exibir fonte" esteja DESLIGADO e o tipo seja HTML.
4. Cole o trecho e salve.

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

Erros comuns

• Usar o plano gratuito, que desativa blocos de Código.
• Deixar "Exibir fonte" ativado — imprime o HTML como texto.
• Envolver o trecho em um bloco Markdown.

Checklist de sucesso

• Página salva e publicada.
• Bloco de Código contém HTML, não texto puro.
• A pré-visualização mobile ainda mostra o widget.

Passos

1. No Editor do Wix clique em Adicionar (+) → Código de Incorporação → HTML Embed.
2. Escolha "Código" e cole o trecho de iframe.
3. Redimensione o espaço reservado para o tamanho desejado.
4. Publique.

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

Erros comuns

• Escolher "Endereço do site" em vez de "Código".
• Deixar o iframe baixo demais — defina altura ≥ 320px.
• Esquecer de publicar (Salvar não basta).

Checklist de sucesso

• Elemento HTML Embed adicionado.
• Altura do iframe ≥ 320px no desktop.
• Site publicado.

Passos

1. Vá em Extensões → Módulos → Novo → Personalizado.
2. No editor clique em "Alternar Editor" para entrar no HTML puro.
3. Cole o trecho, atribua o módulo a uma posição e salve.
4. Verifique Sistema → Configuração Global → Filtros de Texto e defina o grupo como "Sem Filtragem".

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

Erros comuns

• TinyMCE removendo <script> — desative o editor antes de colar.
• Filtro padrão bloqueando iframe / script — ajuste por grupo.
• Módulo atribuído à posição errada.

Checklist de sucesso

• Módulo publicado e em posição visível.
• Filtro de texto não remove scripts para o grupo.
• Widget visível nas páginas configuradas.

Passos

1. Vá em Estrutura → Layout de blocos → Biblioteca de blocos → Adicionar.
2. Defina Formato de texto como "Full HTML".
3. Cole o trecho no corpo e salve.
4. Coloque o bloco em qualquer região.

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

Erros comuns

• Usar Basic HTML — remove iframe e script.
• Esquecer de colocar o bloco após criar.
• Módulos CSP agressivos bloqueando sundaybiblereadings.com.

Checklist de sucesso

• Formato Full HTML usado.
• Bloco em região visível.
• Cache reconstruído (admin/config/development/performance).

Passos

1. Abra seu arquivo HTML em qualquer editor.
2. Cole o trecho dentro de <body>.
3. Salve e envie.

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

Erros comuns

• Colar dentro de <head> — o script precisa do DOM.
• Servir por HTTP — regras de conteúdo misto bloqueiam o widget.

Checklist de sucesso

• Trecho dentro de <body>.
• Site servido por HTTPS.
• Página recarregada após o envio.

Passos

1. Crie um componente BibleWidget (trecho abaixo).
2. Importe onde quiser no app.
3. Garanta que o script seja adicionado uma única vez, mesmo se o componente montar várias vezes.

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

Erros comuns

• Chamar document.createElement no SSR — envolva em useEffect.
• Adicionar o script várias vezes — verifique id existente.
• CSP estrita sem https://sundaybiblereadings.com em frame-src/script-src.

Checklist de sucesso

• Script adicionado uma única vez.
• Componente renderiza o div marcador.
• Sem avisos de hidratação no console.

Passos

1. Crie um Client Component (App Router) ou qualquer componente (Pages Router) que use next/script.
2. Renderize o div marcador ao lado do Script.
3. Importe e use o componente onde quiser.

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

Erros comuns

• Esquecer "use client" no App Router.
• Usar strategy="beforeInteractive" — o widget precisa do DOM.
• Importar o arquivo no nível da página sem marcá-lo como cliente.

Checklist de sucesso

• Componente marcado como cliente (App Router).
• Script renderizado apenas uma vez por página.
• Build de produção ainda monta o widget.

Passos

1. Crie um componente single-file (trecho abaixo).
2. Importe onde quiser no app.
3. No Nuxt, use <ClientOnly> para pular o SSR se preferir.

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

Erros comuns

• Carregar o script no contexto SSR — use onMounted.
• Montar várias cópias do script.

Checklist de sucesso

• Verificação de id evita duplicatas.
• Widget renderiza após recarregar.
• Funciona no modo universal do Nuxt.