Eigene HTML-Websites

Information

Eigene (custom-coded) Websites bieten volle Kontrolle über die Timer-Integration. Egal ob du mit reinem HTML, einem Static Site Generator oder einem Framework arbeitest – dieser Leitfaden deckt alle Methoden ab!

Eigene Websites bieten maximale Flexibilität für die Einbindung von gettickr.app Timern. Diese Anleitung richtet sich an Entwickler:innen und zeigt Integrationsmöglichkeiten von einfachem HTML bis hin zu fortgeschrittenen Framework-Lösungen.

Schnellstart-Überblick

Integration	Schwierigkeit	Am besten geeignet für	Zeitaufwand
Basis-HTML	Einfach	Statische Seiten	2 Minuten
Responsives CSS	Einfach	Mobile-optimierte Seiten	5 Minuten
JavaScript	Mittel	Dynamisches Nachladen	10 Minuten
Static Builder	Mittel	JAMstack-Seiten	5 Minuten
React/Vue	Mittel	SPAs, moderne Apps	10 Minuten
Fortgeschritten	Schwer	Komplexe Integrationen	30+ Minuten

Tip

Starte mit der Basis-HTML-Integration und erweitere schrittweise je nach Bedarf und Architektur deiner Seite!

Basis-HTML-Integration

Die einfachste Methode nutzt ein Standard-HTML-iFrame-Element.

Minimale Implementierung

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event Countdown</title>
  </head>
  <body>
    <h1>Produkt-Launch Countdown</h1>

    <iframe
      src="https://gettickr.app/r/#DEIN-TIMER-ID"
      width="800"
      height="400"
      frameborder="0"
      title="Launch Countdown Timer"
    >
    </iframe>

    <p>Verpasse nicht unseren größten Launch des Jahres!</p>
  </body>
</html>

HTML-Attribut-Referenz

Attribut	Erforderlich	Beispielwert	Zweck
`src`	✅ Ja	`https://gettickr.app/r/#abc123`	Timer-URL
`width`	✅ Ja	`800` oder `100%`	iFrame-Breite
`height`	✅ Ja	`400`	iFrame-Höhe
`frameborder`	⬜ Nein	`0`	Rahmen entfernen (Legacy)
`style`	⬜ Nein	`border: none;`	CSS-Styling
`title`	⬜ Ja	`"Countdown Timer"`	Barrierefreiheit
`aria-label`	⬜ Nein	`"Verbleibende Zeit: 3 Stunden"`	Screenreader-Beschreibung
`loading`	⬜ Nein	`lazy`	Lazy Loading
`allow`	⬜ Nein	`fullscreen`	Feature-Berechtigungen
`sandbox`	⬜ Nein	`allow-scripts allow-same-origin`	Sicherheitsbeschränkungen
`referrerpolicy`	⬜ Nein	`no-referrer-when-downgrade`	Referrer-Header-Policy

CSS-Styling und Layout

Zentrierter Timer

<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>Event Countdown</h2>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="400"
    title="Event Timer"
  >
  </iframe>
</div>

Grid-Layout mit mehreren Timern

<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>Event 1: Produkt-Launch</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-1"
      height="300"
      title="Event 1 Timer"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Event 2: Blitzangebot</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-2"
      height="300"
      title="Event 2 Timer"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Event 3: Webinar</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-3"
      height="300"
      title="Event 3 Timer"
    ></iframe>
  </div>
</div>

Hero-Section-Timer

<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>🎉 Grand Opening Sale</h1>
    <p class="subtitle">Bis zu 70% Rabatt – Nicht verpassen!</p>
    <iframe
      src="https://gettickr.app/r/#DEIN-TIMER-ID"
      width="100%"
      height="500"
      title="Sale Countdown"
    >
    </iframe>
  </div>
</section>

Static Site Generators

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: 'Countdown Timer' }}"
  >
  </iframe>

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

<!-- Verwendung in Seiten/Posts -->
{% include countdown-timer.html timer_id="DEIN-TIMER-ID" title="Event Countdown"
height="500" caption="Nicht verpassen!" %}

Hugo

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

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

<!-- Verwendung in Content-Dateien -->
{{< timer id="DEIN-TIMER-ID" height="500" heading="Aktion endet bald!" >}}

Gatsby (React)

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

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Countdown Timer',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: timerId prop is required');
    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;

// Verwendung in Seiten
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Produkt-Launch</h1>
    <CountdownTimer
      timerId="DEIN-TIMER-ID"
      height="500"
      title="Launch Countdown"
    />
  </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 'Countdown Timer' }}"
  >
  </iframe>
</div>

<!-- Verwendung in Templates -->
{% include "timer.njk", { timerId: "DEIN-TIMER-ID", heading: "Event Countdown",
height: "500" } %}

Tip

Erstelle wiederverwendbare Timer-Komponenten/Includes in deinem Static Site Generator, um Konsistenz zu gewährleisten und die Verwaltung der Timer auf deiner Seite zu vereinfachen!

Framework-Integration

React-Komponente

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

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Countdown Timer',
  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: timerId prop is required');
    return <div>Fehler: Timer-ID nicht angegeben</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Timer wird geladen...</div>
      )}
      {hasError && (
        <div className="timer-error">Timer konnte nicht geladen werden</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;

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

function App() {
  return (
    <div>
      <h1>Produkt-Launch</h1>
      <TickrTimer
        timerId="DEIN-TIMER-ID"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Timer geladen')}
      />
    </div>
  );
}

Vue 3-Komponente

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Timer wird geladen...
    </div>
    <div v-if="error" class="timer-error">
      Timer konnte nicht geladen werden
    </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: 'Countdown Timer'
  },
  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>

<!-- Verwendung -->
<template>
  <div>
    <h1>Event Countdown</h1>
    <CountdownTimer
      timer-id="DEIN-TIMER-ID"
      height="500"
      @load="onTimerLoad"
    />
  </div>
</template>

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

const onTimerLoad = () => {
  console.log('Timer erfolgreich geladen');
};
</script>

Angular-Komponente

// 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">Timer wird geladen...</div>
      <div *ngIf="error" class="timer-error">Timer konnte nicht geladen werden</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 = 'Countdown Timer';
  @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 is required');
      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;
  }
}

// Verwendung im Template
<app-countdown-timer
  timerId="DEIN-TIMER-ID"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Framework-Komponenten bieten eine bessere Integration in den Lebenszyklus deiner App, State-Management und können Lade- sowie Fehlerzustände abbilden.

Performance-Optimierung

Lazy Loading

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  loading="lazy"
  style="border: none;"
  title="Countdown Timer"
>
</iframe>

Kritische Timer vorladen

<!-- Im <head>-Bereich -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Asynchrones Laden per Script

<div id="timer-placeholder" data-timer-id="DEIN-TIMER-ID"></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 = 'Countdown Timer';

      placeholder.appendChild(iframe);
    }

    // Laden nach vollständigem Seitenaufbau
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Performance Best Practices

Maßnahme	Umsetzung	Vorteil
Lazy Loading	`loading="lazy"` Attribut	Schnellere Ladezeit
DNS Prefetch	`<link rel="dns-prefetch">`	Schnellere Verbindung
Preconnect	`<link rel="preconnect">`	Schnellere Ressourcenlade
Async JavaScript	Nach Seitenaufbau laden	Blockierfreies Laden
Intersection Observer	Laden beim Scrollen in Sicht	Verzögertes Laden
Timer-Anzahl minimieren	Max. 1-3 Timer pro Seite	Bessere Performance
Passende Dimensionen	Designgröße anpassen	Weniger unnötiges Rendern
Unnötige Attribute weg	HTML aufräumen	Kleinere DOM-Struktur

Sicherheits-Best Practices

Content Security Policy (CSP)

<!-- Im <head> oder als HTTP-Header -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Sandbox-Attribut (falls benötigt)

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  title="Countdown Timer"
>
</iframe>

Warning

Verwende das sandbox-Attribut nur, wenn es deine Sicherheitsrichtlinie explizit verlangt. Falsche Konfiguration kann die Timer-Funktionalität beeinträchtigen.

Nur HTTPS verwenden

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  title="Countdown Timer"
>
</iframe>

Information

Verwende immer HTTPS (https://) in Timer-URLs, niemals HTTP. Moderne Browser blockieren gemischte Inhalte (HTTP-iFrames auf HTTPS-Seiten).

Fehlerbehebung

Häufige Probleme

Problem	Mögliche Ursache	Lösung
Timer erscheint nicht	Falsche URL	Timer-ID und URL prüfen
Schwarzes/leeres iFrame	Netzwerkproblem	Browser-Konsole auf Fehler prüfen
Content Security Policy	CSP blockiert iFrame	gettickr.app zu frame-src hinzufügen
Mixed Content Warnung	HTTP auf HTTPS-Seite	`https://` in Timer-URL verwenden
Timer zu klein	Container zu klein	Container-Breite/Höhe anpassen
Überlappende Inhalte	CSS-Konflikte	Isolation oder z-index nutzen
Langsames Laden	Kein Lazy Loading	`loading="lazy"` Attribut ergänzen
JavaScript-Fehler	Syntaxfehler im Code	Konsole prüfen, JS validieren

Nächste Schritte

Weitere Integrationsmöglichkeiten findest du in den anderen Hilfeseiten.
Bei Fragen oder Problemen: Support kontaktieren

Eigene HTML-Websites

Information

Schnellstart-Überblick

Integration	Schwierigkeit	Am besten geeignet für	Zeitaufwand
Basis-HTML	Einfach	Statische Seiten	2 Minuten
Responsives CSS	Einfach	Mobile-optimierte Seiten	5 Minuten
JavaScript	Mittel	Dynamisches Nachladen	10 Minuten
Static Builder	Mittel	JAMstack-Seiten	5 Minuten
React/Vue	Mittel	SPAs, moderne Apps	10 Minuten
Fortgeschritten	Schwer	Komplexe Integrationen	30+ Minuten

Tip

Starte mit der Basis-HTML-Integration und erweitere schrittweise je nach Bedarf und Architektur deiner Seite!

Basis-HTML-Integration

Die einfachste Methode nutzt ein Standard-HTML-iFrame-Element.

Minimale Implementierung

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event Countdown</title>
  </head>
  <body>
    <h1>Produkt-Launch Countdown</h1>

    <iframe
      src="https://gettickr.app/r/#DEIN-TIMER-ID"
      width="800"
      height="400"
      frameborder="0"
      title="Launch Countdown Timer"
    >
    </iframe>

    <p>Verpasse nicht unseren größten Launch des Jahres!</p>
  </body>
</html>

HTML-Attribut-Referenz

Attribut	Erforderlich	Beispielwert	Zweck
`src`	✅ Ja	`https://gettickr.app/r/#abc123`	Timer-URL
`width`	✅ Ja	`800` oder `100%`	iFrame-Breite
`height`	✅ Ja	`400`	iFrame-Höhe
`frameborder`	⬜ Nein	`0`	Rahmen entfernen (Legacy)
`style`	⬜ Nein	`border: none;`	CSS-Styling
`title`	⬜ Ja	`"Countdown Timer"`	Barrierefreiheit
`aria-label`	⬜ Nein	`"Verbleibende Zeit: 3 Stunden"`	Screenreader-Beschreibung
`loading`	⬜ Nein	`lazy`	Lazy Loading
`allow`	⬜ Nein	`fullscreen`	Feature-Berechtigungen
`sandbox`	⬜ Nein	`allow-scripts allow-same-origin`	Sicherheitsbeschränkungen
`referrerpolicy`	⬜ Nein	`no-referrer-when-downgrade`	Referrer-Header-Policy

CSS-Styling und Layout

Zentrierter Timer

<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>Event Countdown</h2>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="400"
    title="Event Timer"
  >
  </iframe>
</div>

Grid-Layout mit mehreren Timern

<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>Event 1: Produkt-Launch</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-1"
      height="300"
      title="Event 1 Timer"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Event 2: Blitzangebot</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-2"
      height="300"
      title="Event 2 Timer"
    ></iframe>
  </div>

  <div class="timer-card">
    <h3>Event 3: Webinar</h3>
    <iframe
      src="https://gettickr.app/r/#TIMER-3"
      height="300"
      title="Event 3 Timer"
    ></iframe>
  </div>
</div>

Hero-Section-Timer

<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>🎉 Grand Opening Sale</h1>
    <p class="subtitle">Bis zu 70% Rabatt – Nicht verpassen!</p>
    <iframe
      src="https://gettickr.app/r/#DEIN-TIMER-ID"
      width="100%"
      height="500"
      title="Sale Countdown"
    >
    </iframe>
  </div>
</section>

Static Site Generators

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: 'Countdown Timer' }}"
  >
  </iframe>

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

<!-- Verwendung in Seiten/Posts -->
{% include countdown-timer.html timer_id="DEIN-TIMER-ID" title="Event Countdown"
height="500" caption="Nicht verpassen!" %}

Hugo

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

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

<!-- Verwendung in Content-Dateien -->
{{< timer id="DEIN-TIMER-ID" height="500" heading="Aktion endet bald!" >}}

Gatsby (React)

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

const CountdownTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Countdown Timer',
  className = '',
  style = {}
}) => {
  if (!timerId) {
    console.error('CountdownTimer: timerId prop is required');
    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;

// Verwendung in Seiten
import CountdownTimer from '../components/CountdownTimer';

const EventPage = () => (
  <div>
    <h1>Produkt-Launch</h1>
    <CountdownTimer
      timerId="DEIN-TIMER-ID"
      height="500"
      title="Launch Countdown"
    />
  </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 'Countdown Timer' }}"
  >
  </iframe>
</div>

<!-- Verwendung in Templates -->
{% include "timer.njk", { timerId: "DEIN-TIMER-ID", heading: "Event Countdown",
height: "500" } %}

Tip

Erstelle wiederverwendbare Timer-Komponenten/Includes in deinem Static Site Generator, um Konsistenz zu gewährleisten und die Verwaltung der Timer auf deiner Seite zu vereinfachen!

Framework-Integration

React-Komponente

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

const TickrTimer = ({
  timerId,
  width = '100%',
  height = '400',
  title = 'Countdown Timer',
  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: timerId prop is required');
    return <div>Fehler: Timer-ID nicht angegeben</div>;
  }

  return (
    <div className={`tickr-timer-wrapper ${className}`}>
      {!isLoaded && !hasError && (
        <div className="timer-loading">Timer wird geladen...</div>
      )}
      {hasError && (
        <div className="timer-error">Timer konnte nicht geladen werden</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;

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

function App() {
  return (
    <div>
      <h1>Produkt-Launch</h1>
      <TickrTimer
        timerId="DEIN-TIMER-ID"
        height="500"
        className="launch-timer"
        onLoad={() => console.log('Timer geladen')}
      />
    </div>
  );
}

Vue 3-Komponente

<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-timer-wrapper" :class="className">
    <div v-if="loading && !loaded" class="timer-loading">
      Timer wird geladen...
    </div>
    <div v-if="error" class="timer-error">
      Timer konnte nicht geladen werden
    </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: 'Countdown Timer'
  },
  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>

<!-- Verwendung -->
<template>
  <div>
    <h1>Event Countdown</h1>
    <CountdownTimer
      timer-id="DEIN-TIMER-ID"
      height="500"
      @load="onTimerLoad"
    />
  </div>
</template>

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

const onTimerLoad = () => {
  console.log('Timer erfolgreich geladen');
};
</script>

Angular-Komponente

// 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">Timer wird geladen...</div>
      <div *ngIf="error" class="timer-error">Timer konnte nicht geladen werden</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 = 'Countdown Timer';
  @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 is required');
      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;
  }
}

// Verwendung im Template
<app-countdown-timer
  timerId="DEIN-TIMER-ID"
  height="500"
  className="launch-timer">
</app-countdown-timer>

Information

Framework-Komponenten bieten eine bessere Integration in den Lebenszyklus deiner App, State-Management und können Lade- sowie Fehlerzustände abbilden.

Performance-Optimierung

Lazy Loading

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  loading="lazy"
  style="border: none;"
  title="Countdown Timer"
>
</iframe>

Kritische Timer vorladen

<!-- Im <head>-Bereich -->
<link rel="preconnect" href="https://gettickr.app" />
<link rel="dns-prefetch" href="https://gettickr.app" />

Asynchrones Laden per Script

<div id="timer-placeholder" data-timer-id="DEIN-TIMER-ID"></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 = 'Countdown Timer';

      placeholder.appendChild(iframe);
    }

    // Laden nach vollständigem Seitenaufbau
    if (document.readyState === 'complete') {
      loadTimer();
    } else {
      window.addEventListener('load', loadTimer);
    }
  })();
</script>

Performance Best Practices

Maßnahme	Umsetzung	Vorteil
Lazy Loading	`loading="lazy"` Attribut	Schnellere Ladezeit
DNS Prefetch	`<link rel="dns-prefetch">`	Schnellere Verbindung
Preconnect	`<link rel="preconnect">`	Schnellere Ressourcenlade
Async JavaScript	Nach Seitenaufbau laden	Blockierfreies Laden
Intersection Observer	Laden beim Scrollen in Sicht	Verzögertes Laden
Timer-Anzahl minimieren	Max. 1-3 Timer pro Seite	Bessere Performance
Passende Dimensionen	Designgröße anpassen	Weniger unnötiges Rendern
Unnötige Attribute weg	HTML aufräumen	Kleinere DOM-Struktur

Sicherheits-Best Practices

Content Security Policy (CSP)

<!-- Im <head> oder als HTTP-Header -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src https://gettickr.app; script-src 'self';"
/>

Sandbox-Attribut (falls benötigt)

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  sandbox="allow-scripts allow-same-origin"
  title="Countdown Timer"
>
</iframe>

Warning

Verwende das sandbox-Attribut nur, wenn es deine Sicherheitsrichtlinie explizit verlangt. Falsche Konfiguration kann die Timer-Funktionalität beeinträchtigen.

Nur HTTPS verwenden

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  title="Countdown Timer"
>
</iframe>

Information

Verwende immer HTTPS (https://) in Timer-URLs, niemals HTTP. Moderne Browser blockieren gemischte Inhalte (HTTP-iFrames auf HTTPS-Seiten).

Fehlerbehebung

Häufige Probleme

Problem	Mögliche Ursache	Lösung
Timer erscheint nicht	Falsche URL	Timer-ID und URL prüfen
Schwarzes/leeres iFrame	Netzwerkproblem	Browser-Konsole auf Fehler prüfen
Content Security Policy	CSP blockiert iFrame	gettickr.app zu frame-src hinzufügen
Mixed Content Warnung	HTTP auf HTTPS-Seite	`https://` in Timer-URL verwenden
Timer zu klein	Container zu klein	Container-Breite/Höhe anpassen
Überlappende Inhalte	CSS-Konflikte	Isolation oder z-index nutzen
Langsames Laden	Kein Lazy Loading	`loading="lazy"` Attribut ergänzen
JavaScript-Fehler	Syntaxfehler im Code	Konsole prüfen, JS validieren

Nächste Schritte

Weitere Integrationsmöglichkeiten findest du in den anderen Hilfeseiten.
Bei Fragen oder Problemen: Support kontaktieren