Sites Web HTML Personnalisés

Information

Les sites web codés sur mesure offrent un contrôle total sur l'intégration des minuteurs. Que vous travailliez avec du HTML pur, utilisiez un générateur de sites statiques ou développiez avec un framework, ce guide couvre tout ce dont vous avez besoin !

Les sites web codés sur mesure offrent une flexibilité illimitée pour intégrer les minuteurs gettickr.app. Ce guide est conçu pour les développeurs et couvre les méthodes d'intégration depuis le HTML de base jusqu'aux implémentations avancées de frameworks.

Vue d'ensemble du démarrage rapide

Implémentation	Difficulté	Idéal pour	Temps requis
HTML de base	Facile	Sites statiques	2 minutes
CSS Responsive	Facile	Sites compatibles mobiles	5 minutes
JavaScript	Moyen	Chargement dynamique	10 minutes
Générateurs statiques	Moyen	Sites JAMstack	5 minutes
React/Vue	Moyen	SPAs, applications modernes	10 minutes
Avancé	Difficile	Intégrations complexes	30+ minutes

Tip

Commencez par l'intégration HTML de base et améliorez progressivement en fonction de vos besoins spécifiques et de l'architecture de votre site !

Intégration HTML de base

La méthode d'intégration la plus simple utilise un élément iFrame HTML standard.

Implémentation minimale

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Compte à rebours d'événement</title>
  </head>
  <body>
    <h1>Compte à rebours du lancement de produit</h1>

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

    <p>Ne manquez pas notre plus grand lancement de l'année !</p>
  </body>
</html>

Référence des attributs HTML

Attribut	Requis	Valeur d'exemple	Objectif
`src`	✅ Oui	`https://gettickr.app/r/#abc123`	URL du minuteur
`width`	✅ Oui	`800` ou `100%`	Largeur de l'iFrame
`height`	✅ Oui	`400`	Hauteur de l'iFrame
`frameborder`	⬜ Non	`0`	Supprimer la bordure (ancien)
`style`	⬜ Non	`border: none;`	Style CSS
`title`	⬜ Oui	`"Minuteur compte à rebours"`	Description d'accessibilité
`aria-label`	⬜ Non	`"Temps restant : 3 heures"`	Description pour lecteur d'écran
`loading`	⬜ Non	`lazy`	Chargement différé
`allow`	⬜ Non	`fullscreen`	Autorisations de fonctionnalités
`sandbox`	⬜ Non	`allow-scripts allow-same-origin`	Restrictions de sécurité
`referrerpolicy`	⬜ Non	`no-referrer-when-downgrade`	Politique d'en-tête de référent

Style CSS et mise en page

Minuteur centré

<style>
  .timer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }

  .timer-container iframe {
    display: block;
    margin: 0 auto;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
</style>

<div class="timer-container">
  <h2>Compte à rebours d'événement</h2>
  <iframe
    src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
    width="100%"
    height="400"
    title="Minuteur d'événement"
  >
  </iframe>
</div>

Mise en page en grille avec plusieurs minuteurs

<style>
  .timer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .timer-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .timer-card h3 {
    margin-top: 0;
    color: #333;
  }

  .timer-card iframe {
    width: 100%;
    border: none;
    border-radius: 8px;
  }
</style>

<div class="timer-grid">
  <div class="timer-card">
    <h3>Événement 1 : Lancement de produit</h3>
    <iframe
      src="https://gettickr.app/r/#MINUTEUR-1"
      height="300"
      title="Minuteur événement 1"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Événement 2 : Vente flash</h3>
    <iframe
      src="https://gettickr.app/r/#MINUTEUR-2"
      height="300"
      title="Minuteur événement 2"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Événement 3 : Webinaire</h3>
    <iframe
      src="https://gettickr.app/r/#MINUTEUR-3"
      height="300"
      title="Minuteur événement 3"
    ></iframe>
  </div>
</div>

Minuteur de section hero

<style>
  .hero-countdown {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .hero-countdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/pattern.svg') repeat;
    opacity: 0.1;
  }

  .hero-countdown .content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }

  .hero-countdown h1 {
    font-size: 56px;
    margin: 0 0 20px 0;
    font-weight: 700;
  }

  .hero-countdown .subtitle {
    font-size: 24px;
    margin: 0 0 40px 0;
    opacity: 0.95;
  }

  .hero-countdown iframe {
    border: none;
    background: transparent;
    max-width: 100%;
  }
</style>

<section class="hero-countdown">
  <div class="content">
    <h1>🎉 Vente d'ouverture</h1>
    <p class="subtitle">Jusqu'à 70% de réduction - Ne manquez pas ça !</p>
    <iframe
      src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
      width="100%"
      height="500"
      title="Compte à rebours des soldes"
    >
    </iframe>
  </div>
</section>

Générateurs de sites statiques

Jekyll

<!-- _includes/countdown-timer.html -->
<div class="countdown-timer-wrapper">
  {% if include.title %}
  <h2>{{ include.title }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ include.timer_id }}"
    width="{{ include.width | default: '100%' }}"
    height="{{ include.height | default: '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ include.title | default: 'Minuteur compte à rebours' }}"
  >
  </iframe>

  {% if include.caption %}
  <p class="timer-caption">{{ include.caption }}</p>
  {% endif %}
</div>

<!-- Utilisation dans les pages/articles -->
{% include countdown-timer.html timer_id="VOTRE-ID-MINUTEUR" title="Compte à
rebours d'événement" height="500" caption="Ne manquez pas ça !" %}

Hugo

<!-- layouts/shortcodes/timer.html -->
{{ $timerId := .Get "id" }} {{ $width := .Get "width" | default "100%" }} {{
$height := .Get "height" | default "400" }} {{ $title := .Get "title" | default
"Minuteur compte à rebours" }}

<div class="hugo-timer-container">
  {{ if .Get "heading" }}
  <h2>{{ .Get "heading" }}</h2>
  {{ end }}

  <iframe
    src="https://gettickr.app/r/#{{ $timerId }}"
    width="{{ $width }}"
    height="{{ $height }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ $title }}"
  >
  </iframe>
</div>

<!-- Utilisation dans les fichiers de contenu -->
{{< timer id="VOTRE-ID-MINUTEUR" height="500" heading="Les soldes se terminent
bientôt !" >}}

Gatsby (React)

// src/components/CountdownTimer.js
import React from 'react';

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Minuteur compte à rebours',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: la prop timerId est requise');
    return null;
  }

  const iframeStyle = {
    border: 'none',
    maxWidth: '100%',
    ...style
  };

  return (
    <iframe
      src={`https://gettickr.app/r/#${timerId}`}
      width={width}
      height={height}
      title={title}
      className={className}
      style={iframeStyle}
      frameBorder="0"
      allowFullScreen
    />
  );
};

export default CountdownTimer;

// Utilisation dans les pages
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Lancement de produit</h1>
    <CountdownTimer
      timerId="VOTRE-ID-MINUTEUR"
      height="500"
      title="Compte à rebours de lancement"
    />
  </div>
);

Eleventy (11ty)

// _includes/timer.njk
<div class="eleventy-timer">
  {% if heading %}
  <h2>{{ heading }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ timerId }}"
    width="{{ width or '100%' }}"
    height="{{ height or '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ title or 'Minuteur compte à rebours' }}"
  >
  </iframe>
</div>

<!-- Utilisation dans les templates -->
{% include "timer.njk", { timerId: "VOTRE-ID-MINUTEUR", heading: "Compte à
rebours d'événement", height: "500" } %}

Tip

Créez des composants/inclusions de minuteur réutilisables dans votre générateur de sites statiques pour maintenir la cohérence et simplifier la gestion des minuteurs sur votre site !

Intégration de frameworks

Composant React

import React, { useEffect, useRef, useState } from 'react';

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Minuteur compte à rebours',
  className = '',
  loading = 'lazy',
  onLoad,
  onError
}) => {
  const iframeRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const handleLoad = () => {
      setIsLoaded(true);
      onLoad?.();
    };

    const handleError = () => {
      setHasError(true);
      onError?.();
    };

    iframe.addEventListener('load', handleLoad);
    iframe.addEventListener('error', handleError);

    return () => {
      iframe.removeEventListener('load', handleLoad);
      iframe.removeEventListener('error', handleError);
    };
  }, [onLoad, onError]);

  if (!timerId) {
    console.error('TickrTimer: la prop timerId est requise');
    return <div>Erreur : ID de minuteur non fourni</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Chargement du minuteur...</div>
      )}
      {hasError && (
        <div className="timer-error">Échec du chargement du minuteur</div>
      )}
      <iframe
        ref={iframeRef}
        src={`https://gettickr.app/r/#${timerId}`}
        width={width}
        height={height}
        title={title}
        loading={loading}
        style={{ border: 'none', maxWidth: '100%' }}
        frameBorder="0"
        allowFullScreen
      />
    </div>
  );
};

export default TickrTimer;

// Utilisation
import TickrTimer from './components/TickrTimer';

function App() {
  return (
    <div>
      <h1>Lancement de produit</h1>
      <TickrTimer
        timerId="VOTRE-ID-MINUTEUR"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Minuteur chargé')}
      />
    </div>
  );
}

Composant Vue 3

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Chargement du minuteur...
    </div>
    <div v-if="error" class="timer-error">
      Échec du chargement du minuteur
    </div>
    <iframe
      ref="iframeRef"
      :src="`https://gettickr.app/r/#${timerId}`"
      :width="width"
      :height="height"
      :title="title"
      :loading="loadingAttr"
      frameborder="0"
      allowfullscreen
      style="border: none; max-width: 100%;"
      @load="handleLoad"
      @error="handleError"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  timerId: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400'
  },
  title: {
    type: String,
    default: 'Minuteur compte à rebours'
  },
  className: {
    type: String,
    default: ''
  },
  loadingAttr: {
    type: String,
    default: 'lazy'
  }
});

const emit = defineEmits(['load', 'error']);

const iframeRef = ref(null);
const loaded = ref(false);
const error = ref(false);
const loading = ref(true);

const handleLoad = () => {
  loaded.value = true;
  loading.value = false;
  emit('load');
};

const handleError = () => {
  error.value = true;
  loading.value = false;
  emit('error');
};
</script>

<style scoped>
.countdown-timer-wrapper {
  position: relative;
}

.timer-loading,
.timer-error {
  padding: 20px;
  text-align: center;
  background: #f0f0f0;
  border-radius: 8px;
}

.timer-error {
  color: #e74c3c;
}
</style>

<!-- Utilisation -->
<template>
  <div>
    <h1>Compte à rebours d'événement</h1>
    <CountdownTimer
      timer-id="VOTRE-ID-MINUTEUR"
      height="500"
      @load="onTimerLoad"
    />
  </div>
</template>

<script setup>
import CountdownTimer from './components/CountdownTimer.vue';

const onTimerLoad = () => {
  console.log('Minuteur chargé avec succès');
};
</script>

Composant Angular

// countdown-timer.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-countdown-timer',
  template: `
    <div class="countdown-timer-wrapper" [ngClass]="className">
      <div *ngIf="loading" class="timer-loading">Chargement du minuteur...</div>
      <div *ngIf="error" class="timer-error">Échec du chargement du minuteur</div>
      <iframe
        [src]="safeUrl"
        [width]="width"
        [height]="height"
        [title]="title"
        [attr.loading]="loadingAttr"
        frameborder="0"
        allowfullscreen
        (load)="onLoad()"
        (error)="onError()"
        style="border: none; max-width: 100%;">
      </iframe>
    </div>
  `,
  styles: [`
    .countdown-timer-wrapper {
      position: relative;
    }
    .timer-loading, .timer-error {
      padding: 20px;
      text-align: center;
      background: #f0f0f0;
      border-radius: 8px;
    }
    .timer-error {
      color: #e74c3c;
    }
  `]
})
export class CountdownTimerComponent implements OnInit {
  @Input() timerId!: string;
  @Input() width: string = '100%';
  @Input() height: string = '400';
  @Input() title: string = 'Minuteur compte à rebours';
  @Input() className: string = '';
  @Input() loadingAttr: string = 'lazy';

  safeUrl!: SafeResourceUrl;
  loading: boolean = true;
  error: boolean = false;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    if (!this.timerId) {
      console.error('CountdownTimer: timerId est requis');
      this.error = true;
      this.loading = false;
      return;
    }

    const url = `https://gettickr.app/r/#${this.timerId}`;
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  onLoad() {
    this.loading = false;
  }

  onError() {
    this.loading = false;
    this.error = true;
  }
}

// Utilisation dans les templates
<app-countdown-timer
  timerId="VOTRE-ID-MINUTEUR"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Les composants de framework offrent une meilleure intégration avec le cycle de vie de votre application, la gestion d'état et peuvent inclure des états de chargement et une gestion des erreurs.

Optimisation des performances

Chargement différé

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="100%"
  height="400"
  loading="lazy"
  style="border: none;"
  title="Minuteur compte à rebours"
>
</iframe>

Préchargement des minuteurs critiques

<!-- Dans la section <head> -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Script de chargement asynchrone

<div id="timer-placeholder" data-timer-id="VOTRE-ID-MINUTEUR"></div>

<script>
  (function () {
    function loadTimer() {
      const placeholder = document.getElementById('timer-placeholder');
      const timerId = placeholder.dataset.timerId;

      if (!placeholder || !timerId) return;

      const iframe = document.createElement('iframe');
      iframe.src = `https://gettickr.app/r/#${timerId}`;
      iframe.width = '100%';
      iframe.height = '400';
      iframe.style.border = 'none';
      iframe.title = 'Minuteur compte à rebours';

      placeholder.appendChild(iframe);
    }

    // Charger après le chargement complet de la page
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Bonnes pratiques de performance

Pratique	Implémentation	Avantage
Chargement différé	Ajouter l'attribut `loading="lazy"`	Chargement initial de page plus rapide
Prérésolution DNS	`<link rel="dns-prefetch">`	Connexion plus rapide
Préconnexion	`<link rel="preconnect">`	Chargement de ressource plus rapide
JavaScript asynchrone	Charger après l'événement de chargement de page	Chargement non bloquant
Intersection Observer	Charger lors du défilement dans la vue	Chargement différé
Minimiser le nombre de minuteurs	1-3 minuteurs par page max	Meilleures performances
Dimensions appropriées	Correspondre à la taille du design	Réduire le rendu inutile
Supprimer les attributs inutilisés	Enlever le HTML non nécessaire	DOM plus petit

Bonnes pratiques de sécurité

Politique de sécurité du contenu (CSP)

<!-- Ajouter à <head> ou définir comme en-tête HTTP -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Attribut Sandbox (si nécessaire)

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="100%"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  title="Minuteur compte à rebours"
>
</iframe>

Warning

N'utilisez l'attribut sandbox que s'il est spécifiquement requis par votre politique de sécurité. Une configuration incorrecte peut casser la fonctionnalité du minuteur.

HTTPS uniquement

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

Information

Utilisez toujours HTTPS (https://) dans les URL de minuteur, jamais HTTP. Les navigateurs modernes bloquent le contenu mixte (iFrames HTTP sur des pages HTTPS).

Dépannage

Problèmes courants

Problème	Cause possible	Solution
Le minuteur n'apparaît pas	URL incorrecte	Vérifier l'ID et l'URL du minuteur
iFrame noir/vide	Problème réseau	Vérifier la console du navigateur pour les erreurs
Politique de sécurité du contenu	CSP bloquant l'iframe	Ajouter gettickr.app à frame-src
Avertissement de contenu mixte	HTTP sur page HTTPS	Utiliser https:// dans l'URL du minuteur
Minuteur trop petit	Taille du conteneur trop petite	Ajuster la largeur/hauteur du conteneur
Contenu qui se chevauche	Conflits CSS	Utiliser l'isolation ou z-index
Chargement lent	Pas de chargement différé	Ajouter l'attribut `loading="lazy"`
Erreurs JavaScript	Erreur de syntaxe dans le code	Vérifier la console du navigateur, valider JS

Étapes suivantes

Intégration iFrame - Documentation de base sur les iFrames
Intégration WordPress - Si vous utilisez également WordPress
Intégration Shopify - Pour les sites e-commerce
Tip
L'intégration HTML personnalisée offre une flexibilité maximale. Commencez simplement et améliorez progressivement en fonction de vos besoins !

Sites Web HTML Personnalisés

Information

Vue d'ensemble du démarrage rapide

Implémentation	Difficulté	Idéal pour	Temps requis
HTML de base	Facile	Sites statiques	2 minutes
CSS Responsive	Facile	Sites compatibles mobiles	5 minutes
JavaScript	Moyen	Chargement dynamique	10 minutes
Générateurs statiques	Moyen	Sites JAMstack	5 minutes
React/Vue	Moyen	SPAs, applications modernes	10 minutes
Avancé	Difficile	Intégrations complexes	30+ minutes

Tip

Commencez par l'intégration HTML de base et améliorez progressivement en fonction de vos besoins spécifiques et de l'architecture de votre site !

Intégration HTML de base

La méthode d'intégration la plus simple utilise un élément iFrame HTML standard.

Implémentation minimale

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Compte à rebours d'événement</title>
  </head>
  <body>
    <h1>Compte à rebours du lancement de produit</h1>

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

    <p>Ne manquez pas notre plus grand lancement de l'année !</p>
  </body>
</html>

Référence des attributs HTML

Attribut	Requis	Valeur d'exemple	Objectif
`src`	✅ Oui	`https://gettickr.app/r/#abc123`	URL du minuteur
`width`	✅ Oui	`800` ou `100%`	Largeur de l'iFrame
`height`	✅ Oui	`400`	Hauteur de l'iFrame
`frameborder`	⬜ Non	`0`	Supprimer la bordure (ancien)
`style`	⬜ Non	`border: none;`	Style CSS
`title`	⬜ Oui	`"Minuteur compte à rebours"`	Description d'accessibilité
`aria-label`	⬜ Non	`"Temps restant : 3 heures"`	Description pour lecteur d'écran
`loading`	⬜ Non	`lazy`	Chargement différé
`allow`	⬜ Non	`fullscreen`	Autorisations de fonctionnalités
`sandbox`	⬜ Non	`allow-scripts allow-same-origin`	Restrictions de sécurité
`referrerpolicy`	⬜ Non	`no-referrer-when-downgrade`	Politique d'en-tête de référent

Style CSS et mise en page

Minuteur centré

<style>
  .timer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }

  .timer-container iframe {
    display: block;
    margin: 0 auto;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
</style>

<div class="timer-container">
  <h2>Compte à rebours d'événement</h2>
  <iframe
    src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
    width="100%"
    height="400"
    title="Minuteur d'événement"
  >
  </iframe>
</div>

Mise en page en grille avec plusieurs minuteurs

<style>
  .timer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .timer-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .timer-card h3 {
    margin-top: 0;
    color: #333;
  }

  .timer-card iframe {
    width: 100%;
    border: none;
    border-radius: 8px;
  }
</style>

<div class="timer-grid">
  <div class="timer-card">
    <h3>Événement 1 : Lancement de produit</h3>
    <iframe
      src="https://gettickr.app/r/#MINUTEUR-1"
      height="300"
      title="Minuteur événement 1"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Événement 2 : Vente flash</h3>
    <iframe
      src="https://gettickr.app/r/#MINUTEUR-2"
      height="300"
      title="Minuteur événement 2"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Événement 3 : Webinaire</h3>
    <iframe
      src="https://gettickr.app/r/#MINUTEUR-3"
      height="300"
      title="Minuteur événement 3"
    ></iframe>
  </div>
</div>

Minuteur de section hero

<style>
  .hero-countdown {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .hero-countdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/pattern.svg') repeat;
    opacity: 0.1;
  }

  .hero-countdown .content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }

  .hero-countdown h1 {
    font-size: 56px;
    margin: 0 0 20px 0;
    font-weight: 700;
  }

  .hero-countdown .subtitle {
    font-size: 24px;
    margin: 0 0 40px 0;
    opacity: 0.95;
  }

  .hero-countdown iframe {
    border: none;
    background: transparent;
    max-width: 100%;
  }
</style>

<section class="hero-countdown">
  <div class="content">
    <h1>🎉 Vente d'ouverture</h1>
    <p class="subtitle">Jusqu'à 70% de réduction - Ne manquez pas ça !</p>
    <iframe
      src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
      width="100%"
      height="500"
      title="Compte à rebours des soldes"
    >
    </iframe>
  </div>
</section>

Générateurs de sites statiques

Jekyll

<!-- _includes/countdown-timer.html -->
<div class="countdown-timer-wrapper">
  {% if include.title %}
  <h2>{{ include.title }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ include.timer_id }}"
    width="{{ include.width | default: '100%' }}"
    height="{{ include.height | default: '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ include.title | default: 'Minuteur compte à rebours' }}"
  >
  </iframe>

  {% if include.caption %}
  <p class="timer-caption">{{ include.caption }}</p>
  {% endif %}
</div>

<!-- Utilisation dans les pages/articles -->
{% include countdown-timer.html timer_id="VOTRE-ID-MINUTEUR" title="Compte à
rebours d'événement" height="500" caption="Ne manquez pas ça !" %}

Hugo

<!-- layouts/shortcodes/timer.html -->
{{ $timerId := .Get "id" }} {{ $width := .Get "width" | default "100%" }} {{
$height := .Get "height" | default "400" }} {{ $title := .Get "title" | default
"Minuteur compte à rebours" }}

<div class="hugo-timer-container">
  {{ if .Get "heading" }}
  <h2>{{ .Get "heading" }}</h2>
  {{ end }}

  <iframe
    src="https://gettickr.app/r/#{{ $timerId }}"
    width="{{ $width }}"
    height="{{ $height }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ $title }}"
  >
  </iframe>
</div>

<!-- Utilisation dans les fichiers de contenu -->
{{< timer id="VOTRE-ID-MINUTEUR" height="500" heading="Les soldes se terminent
bientôt !" >}}

Gatsby (React)

// src/components/CountdownTimer.js
import React from 'react';

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Minuteur compte à rebours',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: la prop timerId est requise');
    return null;
  }

  const iframeStyle = {
    border: 'none',
    maxWidth: '100%',
    ...style
  };

  return (
    <iframe
      src={`https://gettickr.app/r/#${timerId}`}
      width={width}
      height={height}
      title={title}
      className={className}
      style={iframeStyle}
      frameBorder="0"
      allowFullScreen
    />
  );
};

export default CountdownTimer;

// Utilisation dans les pages
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Lancement de produit</h1>
    <CountdownTimer
      timerId="VOTRE-ID-MINUTEUR"
      height="500"
      title="Compte à rebours de lancement"
    />
  </div>
);

Eleventy (11ty)

// _includes/timer.njk
<div class="eleventy-timer">
  {% if heading %}
  <h2>{{ heading }}</h2>
  {% endif %}

  <iframe
    src="https://gettickr.app/r/#{{ timerId }}"
    width="{{ width or '100%' }}"
    height="{{ height or '400' }}"
    frameborder="0"
    style="border: none; max-width: 100%;"
    title="{{ title or 'Minuteur compte à rebours' }}"
  >
  </iframe>
</div>

<!-- Utilisation dans les templates -->
{% include "timer.njk", { timerId: "VOTRE-ID-MINUTEUR", heading: "Compte à
rebours d'événement", height: "500" } %}

Tip

Créez des composants/inclusions de minuteur réutilisables dans votre générateur de sites statiques pour maintenir la cohérence et simplifier la gestion des minuteurs sur votre site !

Intégration de frameworks

Composant React

import React, { useEffect, useRef, useState } from 'react';

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Minuteur compte à rebours',
  className = '',
  loading = 'lazy',
  onLoad,
  onError
}) => {
  const iframeRef = useRef(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;

    const handleLoad = () => {
      setIsLoaded(true);
      onLoad?.();
    };

    const handleError = () => {
      setHasError(true);
      onError?.();
    };

    iframe.addEventListener('load', handleLoad);
    iframe.addEventListener('error', handleError);

    return () => {
      iframe.removeEventListener('load', handleLoad);
      iframe.removeEventListener('error', handleError);
    };
  }, [onLoad, onError]);

  if (!timerId) {
    console.error('TickrTimer: la prop timerId est requise');
    return <div>Erreur : ID de minuteur non fourni</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Chargement du minuteur...</div>
      )}
      {hasError && (
        <div className="timer-error">Échec du chargement du minuteur</div>
      )}
      <iframe
        ref={iframeRef}
        src={`https://gettickr.app/r/#${timerId}`}
        width={width}
        height={height}
        title={title}
        loading={loading}
        style={{ border: 'none', maxWidth: '100%' }}
        frameBorder="0"
        allowFullScreen
      />
    </div>
  );
};

export default TickrTimer;

// Utilisation
import TickrTimer from './components/TickrTimer';

function App() {
  return (
    <div>
      <h1>Lancement de produit</h1>
      <TickrTimer
        timerId="VOTRE-ID-MINUTEUR"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Minuteur chargé')}
      />
    </div>
  );
}

Composant Vue 3

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Chargement du minuteur...
    </div>
    <div v-if="error" class="timer-error">
      Échec du chargement du minuteur
    </div>
    <iframe
      ref="iframeRef"
      :src="`https://gettickr.app/r/#${timerId}`"
      :width="width"
      :height="height"
      :title="title"
      :loading="loadingAttr"
      frameborder="0"
      allowfullscreen
      style="border: none; max-width: 100%;"
      @load="handleLoad"
      @error="handleError"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  timerId: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '400'
  },
  title: {
    type: String,
    default: 'Minuteur compte à rebours'
  },
  className: {
    type: String,
    default: ''
  },
  loadingAttr: {
    type: String,
    default: 'lazy'
  }
});

const emit = defineEmits(['load', 'error']);

const iframeRef = ref(null);
const loaded = ref(false);
const error = ref(false);
const loading = ref(true);

const handleLoad = () => {
  loaded.value = true;
  loading.value = false;
  emit('load');
};

const handleError = () => {
  error.value = true;
  loading.value = false;
  emit('error');
};
</script>

<style scoped>
.countdown-timer-wrapper {
  position: relative;
}

.timer-loading,
.timer-error {
  padding: 20px;
  text-align: center;
  background: #f0f0f0;
  border-radius: 8px;
}

.timer-error {
  color: #e74c3c;
}
</style>

<!-- Utilisation -->
<template>
  <div>
    <h1>Compte à rebours d'événement</h1>
    <CountdownTimer
      timer-id="VOTRE-ID-MINUTEUR"
      height="500"
      @load="onTimerLoad"
    />
  </div>
</template>

<script setup>
import CountdownTimer from './components/CountdownTimer.vue';

const onTimerLoad = () => {
  console.log('Minuteur chargé avec succès');
};
</script>

Composant Angular

// countdown-timer.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-countdown-timer',
  template: `
    <div class="countdown-timer-wrapper" [ngClass]="className">
      <div *ngIf="loading" class="timer-loading">Chargement du minuteur...</div>
      <div *ngIf="error" class="timer-error">Échec du chargement du minuteur</div>
      <iframe
        [src]="safeUrl"
        [width]="width"
        [height]="height"
        [title]="title"
        [attr.loading]="loadingAttr"
        frameborder="0"
        allowfullscreen
        (load)="onLoad()"
        (error)="onError()"
        style="border: none; max-width: 100%;">
      </iframe>
    </div>
  `,
  styles: [`
    .countdown-timer-wrapper {
      position: relative;
    }
    .timer-loading, .timer-error {
      padding: 20px;
      text-align: center;
      background: #f0f0f0;
      border-radius: 8px;
    }
    .timer-error {
      color: #e74c3c;
    }
  `]
})
export class CountdownTimerComponent implements OnInit {
  @Input() timerId!: string;
  @Input() width: string = '100%';
  @Input() height: string = '400';
  @Input() title: string = 'Minuteur compte à rebours';
  @Input() className: string = '';
  @Input() loadingAttr: string = 'lazy';

  safeUrl!: SafeResourceUrl;
  loading: boolean = true;
  error: boolean = false;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    if (!this.timerId) {
      console.error('CountdownTimer: timerId est requis');
      this.error = true;
      this.loading = false;
      return;
    }

    const url = `https://gettickr.app/r/#${this.timerId}`;
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  onLoad() {
    this.loading = false;
  }

  onError() {
    this.loading = false;
    this.error = true;
  }
}

// Utilisation dans les templates
<app-countdown-timer
  timerId="VOTRE-ID-MINUTEUR"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Les composants de framework offrent une meilleure intégration avec le cycle de vie de votre application, la gestion d'état et peuvent inclure des états de chargement et une gestion des erreurs.

Optimisation des performances

Chargement différé

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="100%"
  height="400"
  loading="lazy"
  style="border: none;"
  title="Minuteur compte à rebours"
>
</iframe>

Préchargement des minuteurs critiques

<!-- Dans la section <head> -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Script de chargement asynchrone

<div id="timer-placeholder" data-timer-id="VOTRE-ID-MINUTEUR"></div>

<script>
  (function () {
    function loadTimer() {
      const placeholder = document.getElementById('timer-placeholder');
      const timerId = placeholder.dataset.timerId;

      if (!placeholder || !timerId) return;

      const iframe = document.createElement('iframe');
      iframe.src = `https://gettickr.app/r/#${timerId}`;
      iframe.width = '100%';
      iframe.height = '400';
      iframe.style.border = 'none';
      iframe.title = 'Minuteur compte à rebours';

      placeholder.appendChild(iframe);
    }

    // Charger après le chargement complet de la page
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Bonnes pratiques de performance

Pratique	Implémentation	Avantage
Chargement différé	Ajouter l'attribut `loading="lazy"`	Chargement initial de page plus rapide
Prérésolution DNS	`<link rel="dns-prefetch">`	Connexion plus rapide
Préconnexion	`<link rel="preconnect">`	Chargement de ressource plus rapide
JavaScript asynchrone	Charger après l'événement de chargement de page	Chargement non bloquant
Intersection Observer	Charger lors du défilement dans la vue	Chargement différé
Minimiser le nombre de minuteurs	1-3 minuteurs par page max	Meilleures performances
Dimensions appropriées	Correspondre à la taille du design	Réduire le rendu inutile
Supprimer les attributs inutilisés	Enlever le HTML non nécessaire	DOM plus petit

Bonnes pratiques de sécurité

Politique de sécurité du contenu (CSP)

<!-- Ajouter à <head> ou définir comme en-tête HTTP -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Attribut Sandbox (si nécessaire)

<iframe
  src="https://gettickr.app/r/#VOTRE-ID-MINUTEUR"
  width="100%"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  title="Minuteur compte à rebours"
>
</iframe>

Warning

N'utilisez l'attribut sandbox que s'il est spécifiquement requis par votre politique de sécurité. Une configuration incorrecte peut casser la fonctionnalité du minuteur.

HTTPS uniquement

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

Information

Utilisez toujours HTTPS (https://) dans les URL de minuteur, jamais HTTP. Les navigateurs modernes bloquent le contenu mixte (iFrames HTTP sur des pages HTTPS).

Dépannage

Problèmes courants

Problème	Cause possible	Solution
Le minuteur n'apparaît pas	URL incorrecte	Vérifier l'ID et l'URL du minuteur
iFrame noir/vide	Problème réseau	Vérifier la console du navigateur pour les erreurs
Politique de sécurité du contenu	CSP bloquant l'iframe	Ajouter gettickr.app à frame-src
Avertissement de contenu mixte	HTTP sur page HTTPS	Utiliser https:// dans l'URL du minuteur
Minuteur trop petit	Taille du conteneur trop petite	Ajuster la largeur/hauteur du conteneur
Contenu qui se chevauche	Conflits CSS	Utiliser l'isolation ou z-index
Chargement lent	Pas de chargement différé	Ajouter l'attribut `loading="lazy"`
Erreurs JavaScript	Erreur de syntaxe dans le code	Vérifier la console du navigateur, valider JS

Étapes suivantes

Intégration iFrame - Documentation de base sur les iFrames
Intégration WordPress - Si vous utilisez également WordPress
Intégration Shopify - Pour les sites e-commerce
Tip
L'intégration HTML personnalisée offre une flexibilité maximale. Commencez simplement et améliorez progressivement en fonction de vos besoins !