Aperçu de l’intégration sur site web
Information
Intégrez vos Timers sur n’importe quel site via une URL d’affichage
(Renderer) stable. Les méthodes les plus simples sont l’iframe standard et un
bloc HTML personnalisé. Des guides dédiés existent pour WordPress, Shopify,
Wix/Squarespace et l’intégration HTML avancée.
Options d’intégration
Choisissez la méthode qui convient le mieux à votre stack et à votre CMS:
- iFrame standard
- Bloc HTML personnalisé
- CMS: WordPress, Shopify, Wix/Squarespace
- Intégration HTML avancée (composants UI, styles sur mesure)
| Méthode | Difficulté | Mise en place | Idéal pour |
|---|---|---|---|
| iFrame | Très faible | Coller une URL dans une balise | Sites classiques, blogs |
| Bloc HTML personnalisé | Faible | Ajouter un bloc “HTML/Code” | CMS avec éditeurs visuels |
| WordPress | Faible | Bloc “HTML personnalisé”/shortcode | Blogs, pages marketing |
| Shopify | Moyen | Section/Bloc custom dans thème | Boutiques e‑commerce |
| Wix/Squarespace | Faible | Embed/Code block | Sites vitrines, portfolios |
| HTML avancé | Moyen+ | Template + CSS dédié | Contrôle fin du design/branding |
Tip
Commencez avec l’iframe. Si vous avez des besoins de design poussés,
passez ensuite à l’intégration HTML personnalisée pour styler le conteneur
autour du Renderer.
Récupérer l’URL du Renderer
Chaque Timer possède une URL d’affichage. Pour la récupérer:
- Ouvrez votre Timer dans l’éditeur
- Si vous êtes Premium, enregistrez-le pour disposer d’une URL stable
- Copiez l’URL du Renderer depuis l’interface
- Utilisez cette URL dans une iFrame ou source navigateur
Premium Feature
Les Timers enregistrés conservent une URL stable. Intégrez une
fois, puis modifiez le Timer sans changer l’embed. Les Timers Free peuvent
régénérer une nouvelle URL à chaque modification.
Intégration via iFrame
Exemple d’iframe standard:
Bonnes pratiques:
- Définissez largeur/hauteur adaptées à votre mise en page
- Retirez la bordure pour un rendu propre
- Utilisez
loading="lazy"si le contexte s’y prête - Encapsulez l’iframe dans un conteneur responsive si nécessaire
Warning
Certaines plateformes appliquent des restrictions aux iframes
(sandbox, CSP). En cas de blocage, privilégiez un bloc HTML dédié ou vérifiez
les paramètres de sécurité du CMS.
Intégration WordPress
Deux options simples:
- Bloc “HTML personnalisé”: collez l’iframe
- Shortcode personnalisé: si votre thème le permet
Étapes recommandées:
- Ouvrez l’éditeur (Gutenberg)
- Ajoutez un bloc “HTML personnalisé”
- Collez l’iframe du Renderer
- Ajustez le style via le CSS du thème au besoin
Information
Pour des styles avancés, créez une classe de conteneur autour de
l’iframe et ajoutez des règles CSS via “Personnaliser” > “CSS additionnel”.
Intégration Shopify
Selon votre thème, ajoutez une section/bloc personnalisé:
- Dans “Thème” > “Personnaliser”, ajoutez une section
- Insérez un bloc HTML (ou code)
- Collez l’iframe du Renderer
- Testez sur desktop et mobile
- Ajustez le CSS de thème pour le responsive
Tip
Placez le Timer sur des pages à fort trafic (ex. page d’offre, landing
de lancement) et harmonisez les couleurs avec votre charte.
Intégration Wix/Squarespace
Utilisez un bloc “Embed”/“Code”:
- Ajoutez un bloc “Embed” (Wix) ou “Code” (Squarespace)
- Collez l’iframe du Renderer
- Ajustez les dimensions et marges
- Publiez et vérifiez le rendu
Information
Certains templates imposent des marges internes. Ajoutez un conteneur
et gérez l’espacement pour un cadrage net.
Intégration HTML avancée
Pour un contrôle fin (layout, branding autour du Timer), placez le Renderer dans un conteneur dédié et stylisez ce conteneur:
Tip
Stylisez le conteneur (autour du Renderer), pas le contenu interne du
Timer, afin d’éviter les conflits et conserver la fluidité des mises à jour.
URLs et mises à jour: Free vs Premium
| Aspect | Free | Premium |
|---|---|---|
| Sauvegarde | Non | Oui (Dashboard) |
| URL d’affichage | Peut changer après modification | Stable, ne change pas |
| Mises à jour sur site | Souvent requiert une nouvelle URL | Automatiques, sans changer de lien |
| Contrôle à distance | Non | Oui (stream et site, instantané) |
Information
Avec Premium, modifiez le Timer (durée/design/cible) et laissez
l’embed tel quel: l’affichage se met à jour automatiquement.
Performances et SEO
- Performances: l’iframe charge une vue dédiée optimisée pour l’affichage
- Lazy loading: activez-le si le Timer n’est pas au-dessus de la ligne de flottaison
- SEO: les Timers sont visuels; privilégiez du texte contextuel autour pour décrire l’événement/la promotion
Tip
Encadrez le Timer d’un titre et d’un paragraphe descriptif pour
renforcer la sémantique et la conversion.
Dépannage
- L’iframe ne s’affiche pas
- Vérifiez l’URL du Renderer et la politique CSP du site
- Essayez sans bloqueurs de scripts/trackers
- Le Timer ne se met pas à jour
- Assurez-vous que l’éditeur reste ouvert (ou que le Timer est enregistré en Premium)
- Revalidez que vous utilisez l’URL correcte
- Mise en page cassée
- Ajoutez un conteneur et des styles CSS propres (dimensions, marges, overflow)
Bonnes pratiques
- Responsive: encapsulez l’iframe dans un conteneur à largeur fluide
- Contraste: assurez une lisibilité optimale sur tous les fonds
- Test multi‑appareils: vérifiez desktop, tablette, mobile
- Stabilité: pour les sites à forte audience, privilégiez les Timers Premium (URL stable)