Intégration iFrame

Information

Les iFrames sont la méthode universelle pour intégrer les minuteurs gettickr.app sur n'importe quel site web. Ce guide vous montre tout ce que vous devez savoir pour implémenter des minuteurs en utilisant le code iFrame.

Les iFrames sont la technologie fondamentale derrière l'intégration des minuteurs gettickr.app sur les sites web. Comprendre comment travailler avec les iFrames vous donne la flexibilité d'intégrer des minuteurs sur n'importe quelle plateforme web ou page codée sur mesure.

Qu'est-ce qu'une iFrame ?

Une iFrame (cadre en ligne) est un élément HTML qui intègre une autre page HTML dans votre page actuelle. Lorsque vous utilisez une iFrame pour intégrer un minuteur, vous créez une fenêtre sur votre page web qui affiche votre minuteur depuis gettickr.app.

Aspect	Description
Technologie	Élément HTML standard (`<iframe>`)
Support navigateur	Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge)
Compatibilité	Fonctionne sur toutes les plateformes de sites web
Complexité	Simple - juste coller le code HTML
Flexibilité	Contrôle total sur la taille, la position et le style

Tip

Les iFrames sont la même technologie utilisée pour intégrer des vidéos YouTube, Google Maps et autre contenu externe sur les sites web. Si votre plateforme supporte ceux-ci, elle supporte les minuteurs gettickr.app !

Structure de base du code iFrame

Le code iFrame de base pour intégrer un minuteur suit une structure HTML simple :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
>
</iframe>

Attributs iFrame expliqués

Attribut	Objectif	Valeur d'exemple	Requis
`src`	URL du minuteur à afficher	`https://gettickr.app/r/#abc123`	✅ Oui
`width`	Largeur de l'iFrame	`800` (pixels) ou `100%` (responsive)	✅ Oui
`height`	Hauteur de l'iFrame	`400` (pixels)	✅ Oui
`frameborder`	Bordure autour de l'iFrame	`0` (pas de bordure)	⬜ Optionnel
`allowfullscreen`	Activer la capacité plein écran	Aucune valeur nécessaire	⬜ Optionnel
`loading`	Quand charger l'iFrame	`lazy` (charger quand visible)	⬜ Optionnel
`title`	Description d'accessibilité	`"Minuteur compte à rebours"`	⬜ Recommandé

Tip

Incluez toujours un attribut title pour l'accessibilité - cela aide les lecteurs d'écran à décrire le contenu aux utilisateurs malvoyants.

Création de votre code iFrame

Suivez ces étapes pour créer du code iFrame pour votre minuteur :

Étape 1 : Obtenir votre URL de minuteur

Créez et personnalisez votre minuteur dans l'éditeur
Dans la section Renderer, trouvez l'URL d'affichage de votre minuteur
Copiez l'URL complète (ressemble à https://gettickr.app/r/#VOTRE-ID-MINUTEUR)

Étape 2 : Choisir vos dimensions

Décidez de la largeur et de la hauteur en fonction du design de votre minuteur et de son emplacement d'apparition :

Placement du minuteur	Largeur recommandée	Hauteur recommandée	Ratio d'aspect
Pleine largeur	`100%`	`400-600px`	~16:9 ou 16:6
Section hero	`1200px` ou `100%`	`600px`	2:1
Barre latérale	`300-400px`	`200-300px`	~4:3
Largeur contenu	`800px`	`400px`	2:1
Petit widget	`400px`	`200px`	2:1

Information

Faites correspondre les dimensions de l'iFrame aux dimensions de conception que vous avez définies lors de la création de votre minuteur dans l'éditeur pour la meilleure apparence.

Étape 3 : Construire votre code

Remplacez VOTRE-ID-MINUTEUR par votre ID de minuteur réel de l'URL :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  frameborder="0"
  title="Minuteur compte à rebours"
  allowfullscreen
>
</iframe>

Étape 4 : Ajouter à votre site web

Copiez le code iFrame complet et collez-le dans votre site web :

Éditeur HTML/Code : Coller directement dans votre HTML
Constructeur de site web : Utiliser un bloc "HTML personnalisé" ou "Code intégré"
CMS : Ajouter au bloc HTML, widget HTML personnalisé ou éditeur de texte (mode HTML)

Warning

Assurez-vous de coller le code en mode HTML, pas en mode visuel/texte enrichi. Si vous collez en mode visuel, le code apparaîtra comme du texte au lieu de rendre le minuteur.

Considérations de sécurité

Les navigateurs modernes implémentent des fonctionnalités de sécurité pour les iFrames pour protéger les utilisateurs :

Fonctionnalité de sécurité	Ce qu'elle fait	Compatibilité gettickr.app
Exigence HTTPS	Beaucoup de sites n'autorisent que les iFrames HTTPS	✅ gettickr.app utilise HTTPS
X-Frame-Options	Contrôle qui peut intégrer le contenu	✅ Autorise l'intégration
En-têtes CSP	Restrictions de politique de sécurité du contenu	✅ En liste blanche
Attribut Sandbox	Restreint les capacités de l'iFrame	⬜ Pas nécessaire pour les minuteurs

Information

Les minuteurs Gettickr.app sont conçus pour fonctionner en toute sécurité dans les iFrames sans nécessiter de configurations de sécurité spéciales. Les paramètres de sécurité par défaut du navigateur fonctionnent parfaitement bien.

Attribut Sandbox optionnel

Si votre politique de sécurité de site web l'exige, vous pouvez ajouter des restrictions sandbox :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  style="border: none;"
>
</iframe>

Warning

N'ajoutez l'attribut sandbox que s'il est spécifiquement requis par votre politique de sécurité. Il peut restreindre la fonctionnalité du minuteur s'il n'est pas configuré correctement.

Optimisation des performances

Chargement différé

Différer le chargement des iFrames jusqu'à ce qu'elles soient près de la fenêtre d'affichage :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  loading="lazy"
  style="border: none;"
>
</iframe>

Avantages :

Chargement initial de page plus rapide
Bande passante réduite pour les utilisateurs qui ne défilent pas jusqu'au minuteur
Meilleures performances sur les appareils mobiles

Tip

Utilisez loading="lazy" pour les minuteurs qui apparaissent sous le pli (non immédiatement visibles au chargement de la page).

Bonnes pratiques de performance

Pratique	Pourquoi	Comment
Minuteur unique par page	Minimiser l'utilisation des ressources	Utiliser un minuteur, pas multiples
Taille appropriée	Ne pas charger d'iFrames énormes inutilement	Correspondre aux dimensions de conception
Chargement différé	Charger seulement quand nécessaire	Ajouter `loading="lazy"`
Éviter les iFrames imbriquées	La complexité nuit aux performances	Un seul niveau seulement

Dépannage

Le minuteur n'apparaît pas

Problème	Solution
Espace vide où le minuteur devrait être	Vérifier que l'URL du minuteur est correcte
Aucune iFrame visible du tout	Vérifier le mode HTML (pas l'éditeur visuel)
Message d'erreur dans l'iFrame	Le minuteur peut avoir été supprimé ou l'URL est incorrecte
Écran noir	Les dimensions de l'iFrame peuvent être incorrectes

Tip

Ouvrez l'URL du minuteur directement dans un navigateur pour vérifier qu'elle fonctionne avant de dépanner l'intégration iFrame.

Problèmes de dimensionnement

Problème	Solution
Le minuteur apparaît trop petit	Augmenter les valeurs de largeur et hauteur
Le minuteur apparaît coupé	Vérifier que les dimensions de l'iFrame correspondent au design du minuteur
Le minuteur déborde du conteneur	Ajouter `max-width: 100%` à l'iFrame
Barres de défilement non désirées	Définir `scrolling="no"` ou `overflow: hidden`
Mauvais ratio d'aspect sur mobile	Implémenter un conteneur de ratio d'aspect responsive

Problèmes spécifiques aux plateformes

Plateforme	Problème courant	Solution
WordPress	L'éditeur visuel supprime le code	Utiliser l'éditeur de code ou le bloc HTML
Wix	iFrame non autorisée dans le texte	Utiliser l'élément HTML iFrame du menu Ajouter
Squarespace	Support iFrame limité	Utiliser le bloc Code, pas le bloc Texte
Shopify	iFrame dans les templates liquid	Utiliser la syntaxe Liquid appropriée pour HTML
Webflow	Élément Embed nécessaire	Utiliser l'élément Embed, pas HTML Embed

Warning

Certaines plateformes de sites web filtrent ou restreignent le code iFrame pour la sécurité. Si votre iFrame ne fonctionne pas, vérifiez la documentation de votre plateforme sur l'intégration de contenu externe.

Erreurs de console du navigateur

Vérifier la console de développement du navigateur (F12) pour les messages d'erreur :

X-Frame-Options refusé

Solution : Contactez votre hébergeur web - votre site peut bloquer les iFrames.

Contenu mixte : chargement de contenu non sécurisé bloqué

Solution : Assurez-vous que l'URL du minuteur utilise https:// et non http://

CSP : violation frame-src

Solution : Mettre à jour votre politique de sécurité du contenu pour autoriser gettickr.app

Étapes suivantes

Intégration WordPress - Guide spécifique à la plateforme pour WordPress
Intégration Shopify - Configuration de minuteur e-commerce
Intégration HTML personnalisée - Techniques d'implémentation avancées
Personnaliser le design du minuteur - Faire correspondre votre minuteur à l'esthétique de votre site web

Tip

Pour des instructions spécifiques à la plateforme au-delà du code iFrame de base, consultez les guides d'intégration dédiés pour votre plateforme de site web !

Intégration iFrame

Information

Qu'est-ce qu'une iFrame ?

Aspect	Description
Technologie	Élément HTML standard (`<iframe>`)
Support navigateur	Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge)
Compatibilité	Fonctionne sur toutes les plateformes de sites web
Complexité	Simple - juste coller le code HTML
Flexibilité	Contrôle total sur la taille, la position et le style

Tip

Structure de base du code iFrame

Le code iFrame de base pour intégrer un minuteur suit une structure HTML simple :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  frameborder="0"
  allowfullscreen
>
</iframe>

Attributs iFrame expliqués

Attribut	Objectif	Valeur d'exemple	Requis
`src`	URL du minuteur à afficher	`https://gettickr.app/r/#abc123`	✅ Oui
`width`	Largeur de l'iFrame	`800` (pixels) ou `100%` (responsive)	✅ Oui
`height`	Hauteur de l'iFrame	`400` (pixels)	✅ Oui
`frameborder`	Bordure autour de l'iFrame	`0` (pas de bordure)	⬜ Optionnel
`allowfullscreen`	Activer la capacité plein écran	Aucune valeur nécessaire	⬜ Optionnel
`loading`	Quand charger l'iFrame	`lazy` (charger quand visible)	⬜ Optionnel
`title`	Description d'accessibilité	`"Minuteur compte à rebours"`	⬜ Recommandé

Tip

Incluez toujours un attribut title pour l'accessibilité - cela aide les lecteurs d'écran à décrire le contenu aux utilisateurs malvoyants.

Création de votre code iFrame

Suivez ces étapes pour créer du code iFrame pour votre minuteur :

Étape 1 : Obtenir votre URL de minuteur

Créez et personnalisez votre minuteur dans l'éditeur
Dans la section Renderer, trouvez l'URL d'affichage de votre minuteur
Copiez l'URL complète (ressemble à https://gettickr.app/r/#VOTRE-ID-MINUTEUR)

Étape 2 : Choisir vos dimensions

Décidez de la largeur et de la hauteur en fonction du design de votre minuteur et de son emplacement d'apparition :

Placement du minuteur	Largeur recommandée	Hauteur recommandée	Ratio d'aspect
Pleine largeur	`100%`	`400-600px`	~16:9 ou 16:6
Section hero	`1200px` ou `100%`	`600px`	2:1
Barre latérale	`300-400px`	`200-300px`	~4:3
Largeur contenu	`800px`	`400px`	2:1
Petit widget	`400px`	`200px`	2:1

Information

Faites correspondre les dimensions de l'iFrame aux dimensions de conception que vous avez définies lors de la création de votre minuteur dans l'éditeur pour la meilleure apparence.

Étape 3 : Construire votre code

Remplacez VOTRE-ID-MINUTEUR par votre ID de minuteur réel de l'URL :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  frameborder="0"
  title="Minuteur compte à rebours"
  allowfullscreen
>
</iframe>

Étape 4 : Ajouter à votre site web

Copiez le code iFrame complet et collez-le dans votre site web :

Éditeur HTML/Code : Coller directement dans votre HTML
Constructeur de site web : Utiliser un bloc "HTML personnalisé" ou "Code intégré"
CMS : Ajouter au bloc HTML, widget HTML personnalisé ou éditeur de texte (mode HTML)

Warning

Assurez-vous de coller le code en mode HTML, pas en mode visuel/texte enrichi. Si vous collez en mode visuel, le code apparaîtra comme du texte au lieu de rendre le minuteur.

Considérations de sécurité

Les navigateurs modernes implémentent des fonctionnalités de sécurité pour les iFrames pour protéger les utilisateurs :

Fonctionnalité de sécurité	Ce qu'elle fait	Compatibilité gettickr.app
Exigence HTTPS	Beaucoup de sites n'autorisent que les iFrames HTTPS	✅ gettickr.app utilise HTTPS
X-Frame-Options	Contrôle qui peut intégrer le contenu	✅ Autorise l'intégration
En-têtes CSP	Restrictions de politique de sécurité du contenu	✅ En liste blanche
Attribut Sandbox	Restreint les capacités de l'iFrame	⬜ Pas nécessaire pour les minuteurs

Information

Attribut Sandbox optionnel

Si votre politique de sécurité de site web l'exige, vous pouvez ajouter des restrictions sandbox :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  style="border: none;"
>
</iframe>

Warning

N'ajoutez l'attribut sandbox que s'il est spécifiquement requis par votre politique de sécurité. Il peut restreindre la fonctionnalité du minuteur s'il n'est pas configuré correctement.

Optimisation des performances

Chargement différé

Différer le chargement des iFrames jusqu'à ce qu'elles soient près de la fenêtre d'affichage :

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="800"
  height="400"
  loading="lazy"
  style="border: none;"
>
</iframe>

Avantages :

Chargement initial de page plus rapide
Bande passante réduite pour les utilisateurs qui ne défilent pas jusqu'au minuteur
Meilleures performances sur les appareils mobiles

Tip

Utilisez loading="lazy" pour les minuteurs qui apparaissent sous le pli (non immédiatement visibles au chargement de la page).

Bonnes pratiques de performance

Pratique	Pourquoi	Comment
Minuteur unique par page	Minimiser l'utilisation des ressources	Utiliser un minuteur, pas multiples
Taille appropriée	Ne pas charger d'iFrames énormes inutilement	Correspondre aux dimensions de conception
Chargement différé	Charger seulement quand nécessaire	Ajouter `loading="lazy"`
Éviter les iFrames imbriquées	La complexité nuit aux performances	Un seul niveau seulement

Dépannage

Le minuteur n'apparaît pas

Problème	Solution
Espace vide où le minuteur devrait être	Vérifier que l'URL du minuteur est correcte
Aucune iFrame visible du tout	Vérifier le mode HTML (pas l'éditeur visuel)
Message d'erreur dans l'iFrame	Le minuteur peut avoir été supprimé ou l'URL est incorrecte
Écran noir	Les dimensions de l'iFrame peuvent être incorrectes

Tip

Ouvrez l'URL du minuteur directement dans un navigateur pour vérifier qu'elle fonctionne avant de dépanner l'intégration iFrame.

Problèmes de dimensionnement

Problème	Solution
Le minuteur apparaît trop petit	Augmenter les valeurs de largeur et hauteur
Le minuteur apparaît coupé	Vérifier que les dimensions de l'iFrame correspondent au design du minuteur
Le minuteur déborde du conteneur	Ajouter `max-width: 100%` à l'iFrame
Barres de défilement non désirées	Définir `scrolling="no"` ou `overflow: hidden`
Mauvais ratio d'aspect sur mobile	Implémenter un conteneur de ratio d'aspect responsive

Problèmes spécifiques aux plateformes

Plateforme	Problème courant	Solution
WordPress	L'éditeur visuel supprime le code	Utiliser l'éditeur de code ou le bloc HTML
Wix	iFrame non autorisée dans le texte	Utiliser l'élément HTML iFrame du menu Ajouter
Squarespace	Support iFrame limité	Utiliser le bloc Code, pas le bloc Texte
Shopify	iFrame dans les templates liquid	Utiliser la syntaxe Liquid appropriée pour HTML
Webflow	Élément Embed nécessaire	Utiliser l'élément Embed, pas HTML Embed

Warning

Erreurs de console du navigateur

Vérifier la console de développement du navigateur (F12) pour les messages d'erreur :

X-Frame-Options refusé

Solution : Contactez votre hébergeur web - votre site peut bloquer les iFrames.

Contenu mixte : chargement de contenu non sécurisé bloqué

Solution : Assurez-vous que l'URL du minuteur utilise https:// et non http://

CSP : violation frame-src

Solution : Mettre à jour votre politique de sécurité du contenu pour autoriser gettickr.app

Étapes suivantes

Intégration WordPress - Guide spécifique à la plateforme pour WordPress
Intégration Shopify - Configuration de minuteur e-commerce
Intégration HTML personnalisée - Techniques d'implémentation avancées
Personnaliser le design du minuteur - Faire correspondre votre minuteur à l'esthétique de votre site web

Tip

Pour des instructions spécifiques à la plateforme au-delà du code iFrame de base, consultez les guides d'intégration dédiés pour votre plateforme de site web !