iFrame-Integration

Information

iFrames sind die universelle Methode, um gettickr.app Timer auf jeder Website einzubetten. In diesem Leitfaden erfährst du alles, was du zur Integration per iFrame wissen musst.

iFrames sind die grundlegende Technologie hinter der Einbettung von gettickr.app Timern auf Webseiten. Wer versteht, wie iFrames funktionieren, kann Timer flexibel in jede Website oder individuell programmierte Seite integrieren.

Was ist ein iFrame?

Ein iFrame (inline frame) ist ein HTML-Element, das eine andere HTML-Seite innerhalb deiner aktuellen Seite einbettet. Wenn du einen Timer per iFrame einbindest, entsteht ein Fenster auf deiner Webseite, das deinen Timer von gettickr.app anzeigt.

Aspekt	Beschreibung
Technologie	Standard-HTML-Element (`<iframe>`)
Browser-Support	Alle modernen Browser (Chrome, Firefox, Safari, Edge)
Kompatibilität	Funktioniert auf allen Website-Plattformen
Komplexität	Einfach – HTML-Code einfügen reicht
Flexibilität	Volle Kontrolle über Größe, Position und Styling

Tip

iFrames sind die gleiche Technologie, die auch für YouTube-Videos, Google Maps und andere externe Inhalte genutzt wird. Wenn deine Plattform solche Inhalte unterstützt, funktionieren auch gettickr.app Timer!

Grundstruktur des iFrame-Codes

Der Basis-Code für die Einbettung eines Timers per iFrame ist sehr einfach:

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

Erklärung der iFrame-Attribute

Attribut	Zweck	Beispielwert	Erforderlich
`src`	Timer-URL	`https://gettickr.app/r/#abc123`	✅ Ja
`width`	iFrame-Breite	`800` (Pixel) oder `100%` (responsive)	✅ Ja
`height`	iFrame-Höhe	`400` (Pixel)	✅ Ja
`frameborder`	Rahmen um iFrame	`0` (kein Rahmen)	⬜ Optional
`allowfullscreen`	Vollbildmodus erlauben	Kein Wert nötig	⬜ Optional
`loading`	Wann iFrame geladen wird	`lazy` (erst bei Sichtbarkeit)	⬜ Optional
`title`	Barrierefreiheit	`"Countdown Timer"`	⬜ Empfohlen

Tip

Füge immer ein title-Attribut für Barrierefreiheit hinzu – so können Screenreader den Inhalt für sehbehinderte Nutzer:innen beschreiben.

So erstellst du deinen iFrame-Code

Folge diesen Schritten, um den iFrame-Code für deinen Timer zu erstellen:

Schritt 1: Timer-URL holen

Erstelle und konfiguriere deinen Timer im Editor
Im Renderer-Bereich findest du die Anzeige-URL deines Timers
Kopiere die vollständige URL (z.B. https://gettickr.app/r/#DEIN-TIMER-ID)

Schritt 2: Dimensionen wählen

Lege Breite und Höhe passend zum Design und Einsatzort deines Timers fest:

Platzierung	Empfohlene Breite	Empfohlene Höhe	Seitenverhältnis
Vollbreite	`100%`	`400-600px`	~16:9 oder 16:6
Hero-Bereich	`1200px`/`100%`	`600px`	2:1
Sidebar	`300-400px`	`200-300px`	~4:3
Content-Bereich	`800px`	`400px`	2:1
Kleines Widget	`400px`	`200px`	2:1

Information

Passe die iFrame-Dimensionen an die Design-Einstellungen deines Timers im Editor an, um das beste Ergebnis zu erzielen.

Schritt 3: Code bauen

Ersetze DEIN-TIMER-ID durch die tatsächliche Timer-ID aus deiner URL:

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

Schritt 4: In die Website einfügen

Kopiere den vollständigen iFrame-Code und füge ihn in deine Website ein:

HTML-/Code-Editor: Direkt in den HTML-Code einfügen
Website-Builder: „Custom HTML“ oder „Embed Code“-Block verwenden
CMS: In HTML-Block, Custom-HTML-Widget oder Texteditor (HTML-Modus) einfügen

Warning

Achte darauf, den Code im HTML-Modus einzufügen, nicht im visuellen Editor. Im visuellen Modus wird der Code als Text angezeigt und der Timer nicht gerendert.

Sicherheitshinweise

Moderne Browser setzen Sicherheitsmechanismen für iFrames ein, um Nutzer:innen zu schützen:

Sicherheitsfeature	Funktion	gettickr.app Kompatibilität
HTTPS erforderlich	Viele Seiten erlauben nur HTTPS-iFrames	✅ gettickr.app nutzt HTTPS
X-Frame-Options	Steuert, wer Inhalte einbetten darf	✅ Einbettung erlaubt
CSP-Header	Content Security Policy Einschränkungen	✅ Whitelisted
Sandbox-Attribut	Beschränkt iFrame-Funktionen	⬜ Für Timer nicht nötig

Information

gettickr.app Timer sind so konzipiert, dass sie sicher in iFrames funktionieren – ohne spezielle Sicherheitskonfigurationen. Die Standard-Browser-Einstellungen reichen aus.

Optional: Sandbox-Attribut

Falls deine Website-Sicherheitsrichtlinie es verlangt, kannst du Sandbox-Einschränkungen setzen:

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

Warning

Das sandbox-Attribut nur verwenden, wenn es explizit von deiner Sicherheitsrichtlinie gefordert wird. Falsche Einstellungen können die Timer-Funktion einschränken.

Performance-Optimierung

Lazy Loading

Lade iFrames erst, wenn sie in den sichtbaren Bereich scrollen:

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

Vorteile:

Schnellere initiale Seitenladezeit
Weniger Bandbreite für Nutzer:innen, die nicht bis zum Timer scrollen
Bessere Performance auf Mobilgeräten

Tip

Nutze loading="lazy" für Timer, die nicht direkt beim Laden der Seite sichtbar sind.

Performance Best Practices

Maßnahme	Warum	Umsetzung
Nur ein Timer pro Seite	Ressourcenverbrauch minimieren	Einen Timer pro Seite nutzen
Passende Größe	Keine unnötig großen iFrames laden	Design-Dimensionen anpassen
Lazy Loading	Nur laden, wenn nötig	`loading="lazy"` hinzufügen
Keine verschachtelten iFrames	Komplexität und Performance	Nur eine Ebene verwenden

Fehlerbehebung

Timer wird nicht angezeigt

Problem	Lösung
Leerer Bereich, wo Timer sein soll	Timer-URL prüfen
Kein iFrame sichtbar	HTML-Modus prüfen (nicht visueller Editor)
Fehlermeldung im iFrame	Timer evtl. gelöscht oder URL falsch
Schwarzer Bildschirm	iFrame-Dimensionen prüfen

Tip

Öffne die Timer-URL direkt im Browser, um zu prüfen, ob sie funktioniert, bevor du die iFrame-Einbindung debugst.

Größenprobleme

Problem	Lösung
Timer zu klein	width- und height-Werte erhöhen
Timer abgeschnitten	iFrame-Dimensionen anpassen
Timer läuft über Container	`max-width: 100%` zum iFrame hinzufügen
Unerwünschte Scrollbalken	`scrolling="no"` oder `overflow: hidden`
Falsches Seitenverhältnis auf Mobilgeräten	Responsives Container-Layout verwenden

Plattform-spezifische Probleme

Plattform	Häufiges Problem	Lösung
WordPress	Visueller Editor entfernt Code	Code- oder HTML-Block verwenden
Wix	iFrame nicht im Text erlaubt	HTML-iFrame-Element aus Menü nutzen
Squarespace	Eingeschränkter iFrame-Support	Code Block statt Text Block verwenden
Shopify	iFrame in Liquid-Templates	Richtiges HTML/Liquid-Snippet nutzen
Webflow	Embed-Element nötig	Embed-Element statt HTML-Embed nutzen

Warning

Manche Website-Plattformen filtern oder beschränken iFrame-Code aus Sicherheitsgründen. Prüfe die Dokumentation deiner Plattform, falls die Einbettung nicht funktioniert.

Browser-Konsole prüfen

Öffne die Entwicklerkonsole (F12) und prüfe auf Fehlermeldungen:

X-Frame-Options denied

Lösung: Wende dich an deinen Hosting-Anbieter – evtl. blockiert deine Seite iFrames.

Mixed Content: blocked loading insecure content

Lösung: Stelle sicher, dass die Timer-URL mit https:// beginnt, nicht mit http://.

CSP: frame-src violation

Lösung: Passe deine Content Security Policy an und erlaube gettickr.app.

Nächste Schritte

WordPress Integration – Plattform-spezifische Anleitung für WordPress
Shopify Integration – Timer für E-Commerce
Custom HTML Integration – Fortgeschrittene Einbindungsmöglichkeiten
Timer-Design anpassen – Timer optisch an deine Website anpassen

Tip

Für plattformspezifische Anleitungen über den Basis-iFrame-Code hinaus findest du eigene Integrations-Guides für jede Website-Plattform!

iFrame-Integration

Information

iFrames sind die universelle Methode, um gettickr.app Timer auf jeder Website einzubetten. In diesem Leitfaden erfährst du alles, was du zur Integration per iFrame wissen musst.

Was ist ein iFrame?

Aspekt	Beschreibung
Technologie	Standard-HTML-Element (`<iframe>`)
Browser-Support	Alle modernen Browser (Chrome, Firefox, Safari, Edge)
Kompatibilität	Funktioniert auf allen Website-Plattformen
Komplexität	Einfach – HTML-Code einfügen reicht
Flexibilität	Volle Kontrolle über Größe, Position und Styling

Tip

Grundstruktur des iFrame-Codes

Der Basis-Code für die Einbettung eines Timers per iFrame ist sehr einfach:

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

Erklärung der iFrame-Attribute

Attribut	Zweck	Beispielwert	Erforderlich
`src`	Timer-URL	`https://gettickr.app/r/#abc123`	✅ Ja
`width`	iFrame-Breite	`800` (Pixel) oder `100%` (responsive)	✅ Ja
`height`	iFrame-Höhe	`400` (Pixel)	✅ Ja
`frameborder`	Rahmen um iFrame	`0` (kein Rahmen)	⬜ Optional
`allowfullscreen`	Vollbildmodus erlauben	Kein Wert nötig	⬜ Optional
`loading`	Wann iFrame geladen wird	`lazy` (erst bei Sichtbarkeit)	⬜ Optional
`title`	Barrierefreiheit	`"Countdown Timer"`	⬜ Empfohlen

Tip

Füge immer ein title-Attribut für Barrierefreiheit hinzu – so können Screenreader den Inhalt für sehbehinderte Nutzer:innen beschreiben.

So erstellst du deinen iFrame-Code

Folge diesen Schritten, um den iFrame-Code für deinen Timer zu erstellen:

Schritt 1: Timer-URL holen

Erstelle und konfiguriere deinen Timer im Editor
Im Renderer-Bereich findest du die Anzeige-URL deines Timers
Kopiere die vollständige URL (z.B. https://gettickr.app/r/#DEIN-TIMER-ID)

Schritt 2: Dimensionen wählen

Lege Breite und Höhe passend zum Design und Einsatzort deines Timers fest:

Platzierung	Empfohlene Breite	Empfohlene Höhe	Seitenverhältnis
Vollbreite	`100%`	`400-600px`	~16:9 oder 16:6
Hero-Bereich	`1200px`/`100%`	`600px`	2:1
Sidebar	`300-400px`	`200-300px`	~4:3
Content-Bereich	`800px`	`400px`	2:1
Kleines Widget	`400px`	`200px`	2:1

Information

Passe die iFrame-Dimensionen an die Design-Einstellungen deines Timers im Editor an, um das beste Ergebnis zu erzielen.

Schritt 3: Code bauen

Ersetze DEIN-TIMER-ID durch die tatsächliche Timer-ID aus deiner URL:

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

Schritt 4: In die Website einfügen

Kopiere den vollständigen iFrame-Code und füge ihn in deine Website ein:

HTML-/Code-Editor: Direkt in den HTML-Code einfügen
Website-Builder: „Custom HTML“ oder „Embed Code“-Block verwenden
CMS: In HTML-Block, Custom-HTML-Widget oder Texteditor (HTML-Modus) einfügen

Warning

Achte darauf, den Code im HTML-Modus einzufügen, nicht im visuellen Editor. Im visuellen Modus wird der Code als Text angezeigt und der Timer nicht gerendert.

Sicherheitshinweise

Moderne Browser setzen Sicherheitsmechanismen für iFrames ein, um Nutzer:innen zu schützen:

Sicherheitsfeature	Funktion	gettickr.app Kompatibilität
HTTPS erforderlich	Viele Seiten erlauben nur HTTPS-iFrames	✅ gettickr.app nutzt HTTPS
X-Frame-Options	Steuert, wer Inhalte einbetten darf	✅ Einbettung erlaubt
CSP-Header	Content Security Policy Einschränkungen	✅ Whitelisted
Sandbox-Attribut	Beschränkt iFrame-Funktionen	⬜ Für Timer nicht nötig

Information

gettickr.app Timer sind so konzipiert, dass sie sicher in iFrames funktionieren – ohne spezielle Sicherheitskonfigurationen. Die Standard-Browser-Einstellungen reichen aus.

Optional: Sandbox-Attribut

Falls deine Website-Sicherheitsrichtlinie es verlangt, kannst du Sandbox-Einschränkungen setzen:

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

Warning

Das sandbox-Attribut nur verwenden, wenn es explizit von deiner Sicherheitsrichtlinie gefordert wird. Falsche Einstellungen können die Timer-Funktion einschränken.

Performance-Optimierung

Lazy Loading

Lade iFrames erst, wenn sie in den sichtbaren Bereich scrollen:

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

Vorteile:

Schnellere initiale Seitenladezeit
Weniger Bandbreite für Nutzer:innen, die nicht bis zum Timer scrollen
Bessere Performance auf Mobilgeräten

Tip

Nutze loading="lazy" für Timer, die nicht direkt beim Laden der Seite sichtbar sind.

Performance Best Practices

Maßnahme	Warum	Umsetzung
Nur ein Timer pro Seite	Ressourcenverbrauch minimieren	Einen Timer pro Seite nutzen
Passende Größe	Keine unnötig großen iFrames laden	Design-Dimensionen anpassen
Lazy Loading	Nur laden, wenn nötig	`loading="lazy"` hinzufügen
Keine verschachtelten iFrames	Komplexität und Performance	Nur eine Ebene verwenden

Fehlerbehebung

Timer wird nicht angezeigt

Problem	Lösung
Leerer Bereich, wo Timer sein soll	Timer-URL prüfen
Kein iFrame sichtbar	HTML-Modus prüfen (nicht visueller Editor)
Fehlermeldung im iFrame	Timer evtl. gelöscht oder URL falsch
Schwarzer Bildschirm	iFrame-Dimensionen prüfen

Tip

Öffne die Timer-URL direkt im Browser, um zu prüfen, ob sie funktioniert, bevor du die iFrame-Einbindung debugst.

Größenprobleme

Problem	Lösung
Timer zu klein	width- und height-Werte erhöhen
Timer abgeschnitten	iFrame-Dimensionen anpassen
Timer läuft über Container	`max-width: 100%` zum iFrame hinzufügen
Unerwünschte Scrollbalken	`scrolling="no"` oder `overflow: hidden`
Falsches Seitenverhältnis auf Mobilgeräten	Responsives Container-Layout verwenden

Plattform-spezifische Probleme

Plattform	Häufiges Problem	Lösung
WordPress	Visueller Editor entfernt Code	Code- oder HTML-Block verwenden
Wix	iFrame nicht im Text erlaubt	HTML-iFrame-Element aus Menü nutzen
Squarespace	Eingeschränkter iFrame-Support	Code Block statt Text Block verwenden
Shopify	iFrame in Liquid-Templates	Richtiges HTML/Liquid-Snippet nutzen
Webflow	Embed-Element nötig	Embed-Element statt HTML-Embed nutzen

Warning

Manche Website-Plattformen filtern oder beschränken iFrame-Code aus Sicherheitsgründen. Prüfe die Dokumentation deiner Plattform, falls die Einbettung nicht funktioniert.

Browser-Konsole prüfen

Öffne die Entwicklerkonsole (F12) und prüfe auf Fehlermeldungen:

X-Frame-Options denied

Lösung: Wende dich an deinen Hosting-Anbieter – evtl. blockiert deine Seite iFrames.

Mixed Content: blocked loading insecure content

Lösung: Stelle sicher, dass die Timer-URL mit https:// beginnt, nicht mit http://.

CSP: frame-src violation

Lösung: Passe deine Content Security Policy an und erlaube gettickr.app.

Nächste Schritte

WordPress Integration – Plattform-spezifische Anleitung für WordPress
Shopify Integration – Timer für E-Commerce
Custom HTML Integration – Fortgeschrittene Einbindungsmöglichkeiten
Timer-Design anpassen – Timer optisch an deine Website anpassen

Tip

Für plattformspezifische Anleitungen über den Basis-iFrame-Code hinaus findest du eigene Integrations-Guides für jede Website-Plattform!