Guide d'installation des widgets

Étapes

1. Modifiez l'article, la page ou la zone de widgets où vous voulez la lecture.
2. Dans l'éditeur de blocs, cliquez sur "+" et choisissez "HTML personnalisé". Dans Elementor, glissez un widget "HTML". Dans l'éditeur classique, passez à l'onglet "Texte".
3. Collez le code ci-dessous.
4. Enregistrez / publiez. Le widget apparaît immédiatement sur le site.

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

Erreurs courantes

• Coller dans un bloc paragraphe — WordPress échappera le HTML.
• Plugins de cache (WP Rocket, W3 Total Cache) servant une ancienne version — videz le cache.
• Plugins de sécurité supprimant <script> — autorisez les scripts depuis sundaybiblereadings.com.

Checklist de réussite

• Bloc HTML / Code utilisé (pas paragraphe).
• Cache vidé.
• Widget visible côté public (pas seulement dans l'éditeur).

Étapes

1. Modifiez la page où vous voulez le widget.
2. Cliquez sur "+" et insérez un bloc "Code".
3. Assurez-vous que "Afficher la source" est désactivé et que le type est HTML.
4. Collez et enregistrez.

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

Erreurs courantes

• Plan gratuit qui désactive les blocs Code.
• "Afficher la source" activé — imprime le HTML comme texte.
• Envelopper le code dans un bloc Markdown.

Checklist de réussite

• Page enregistrée et publiée.
• Bloc Code contient du HTML, pas du texte brut.
• L'aperçu mobile affiche encore le widget.

Étapes

1. Dans l'éditeur Wix, cliquez sur Ajouter (+) → Code d'intégration → HTML Embed.
2. Choisissez "Code" et collez l'iframe ci-dessous.
3. Redimensionnez l'emplacement à la taille voulue.
4. Publiez.

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

Erreurs courantes

• Choisir "Adresse du site" au lieu de "Code".
• Iframe trop court — fixez la hauteur à 320px ou plus.
• Oublier de publier (Enregistrer ne suffit pas).

Checklist de réussite

• Élément HTML Embed ajouté.
• Hauteur du iframe ≥ 320px sur desktop.
• Site publié.

Étapes

1. Allez dans Extensions → Modules → Nouveau → Personnalisé.
2. Dans l'éditeur, cliquez sur "Basculer l'éditeur" pour passer en HTML pur.
3. Collez le code, assignez le module à une position et enregistrez.
4. Vérifiez Système → Configuration globale → Filtres de texte et passez le groupe sur "Sans filtrage".

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

Erreurs courantes

• TinyMCE supprimant <script> — désactivez l'éditeur avant de coller.
• Filtre de texte bloquant iframe / script — ajustez par groupe.
• Module assigné à la mauvaise position du modèle.

Checklist de réussite

• Module publié et assigné à une position visible.
• Le filtre de texte ne supprime pas les scripts pour le groupe.
• Widget visible sur les pages configurées.

Étapes

1. Allez dans Structure → Disposition des blocs → Bibliothèque de blocs → Ajouter.
2. Définissez Format de texte sur "Full HTML".
3. Collez le code dans le corps et enregistrez.
4. Placez le bloc dans la région voulue.

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

Erreurs courantes

• Utiliser Basic HTML — supprime iframe et script.
• Oublier de placer le bloc après création.
• Modules CSP stricts bloquant sundaybiblereadings.com.

Checklist de réussite

• Format Full HTML utilisé.
• Bloc placé dans une région visible.
• Cache reconstruit (admin/config/development/performance).

Étapes

1. Ouvrez votre fichier HTML dans un éditeur.
2. Collez le code dans <body>.
3. Enregistrez et téléversez.

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

Erreurs courantes

• Coller dans <head> — le script a besoin du DOM.
• Servir en HTTP — le contenu mixte bloque le widget.

Checklist de réussite

• Code dans <body>.
• Site servi en HTTPS.
• Page rechargée après upload.

Étapes

1. Créez un composant BibleWidget (snippet ci-dessous).
2. Importez-le où vous voulez.
3. Assurez-vous que le script n'est ajouté qu'une fois, même si le composant se monte plusieurs fois.

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

Erreurs courantes

• Appeler document.createElement en SSR — encapsulez dans useEffect.
• Ajouter le script plusieurs fois — vérifiez l'id existant.
• CSP stricte sans https://sundaybiblereadings.com dans frame-src/script-src.

Checklist de réussite

• Script ajouté une seule fois.
• Le composant rend le div marqueur.
• Aucun avertissement d'hydratation dans la console.

Étapes

1. Créez un Client Component (App Router) ou tout composant (Pages Router) qui enveloppe next/script.
2. Rendez le div marqueur à côté de Script.
3. Importez et placez le composant où vous voulez.

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

Erreurs courantes

• Oublier la directive "use client" en App Router.
• Utiliser strategy="beforeInteractive" — le widget a besoin du DOM.
• Importer le fichier au niveau page sans le marquer client.

Checklist de réussite

• Composant marqué client (App Router).
• Script rendu une seule fois par page.
• Le build de production monte toujours le widget.

Étapes

1. Créez un composant single-file (snippet ci-dessous).
2. Importez-le où vous voulez.
3. Dans Nuxt, utilisez <ClientOnly> pour sauter le SSR si vous préférez.

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

Erreurs courantes

• Charger le script en contexte SSR — utilisez onMounted.
• Monter plusieurs copies du script.

Checklist de réussite

• Vérification d'id pour éviter les doublons.
• Widget rendu après un rechargement complet.
• Fonctionne avec le mode universel de Nuxt.