Übersicht: Website-Integration

Free Feature

Die Website-Integration steht sowohl Free- als auch Premium-Nutzern zur Verfügung! Du kannst Timer auf jeder Website einbetten – auch ohne Account.

Mit gettickr.app kannst du Timer direkt auf deiner Website einbinden – ideal für Eventseiten, Produkt-Launches, Verkaufsaktionen oder überall dort, wo du einen Countdown oder CountTo-Timer präsentieren möchtest. Die Integration ist unkompliziert und funktioniert mit nahezu jedem Website-Baukasten oder Content-Management-System.

Wie funktioniert die Website-Integration?

Die Integration nutzt Standard-Webtechnologien, die auf allen modernen Plattformen funktionieren. Beim Einbetten eines Timers wird dieser in einem kleinen Fenster (iFrame) auf deiner Seite angezeigt. Der Timer läuft unabhängig und aktualisiert sich in Echtzeit – ganz ohne komplexes JavaScript oder Seiten-Reloads.

Der Timer fügt sich nahtlos in dein Seitenlayout ein und wirkt wie ein nativer Bestandteil deiner Website. Besucher:innen sehen einen professionellen Countdown oder CountTo-Timer, der zu deinem Design passt und deine Botschaft unterstützt.

Information

Eingebettete Timer funktionieren ähnlich wie YouTube-Videos oder Google Maps auf deiner Website – sie werden extern gehostet, erscheinen aber direkt im Seiteninhalt.

Integrationsmethoden

Die gängigste Methode ist das Einbetten per iFrame, das von nahezu allen Website-Plattformen unterstützt wird. Ein iFrame erzeugt einen abgegrenzten Bereich auf deiner Seite, in dem der gettickr.app Timer angezeigt wird.

Integrationsmethode	Unterstützte Plattformen	Komplexität	Anpassbarkeit
iFrame-Einbettung	Alle gängigen Plattformen	Einfach	Hoch
Direkter URL-Link	Jede Plattform	Sehr einfach	Eingeschränkt
Custom HTML	Entwickler-Websites	Mittel	Maximal
Plattform-Widgets	WordPress, Shopify, etc.	Einfach	Mittel

Je nach Plattform gibt es verschiedene Wege, iFrames einzubinden:

Visuelle Baukästen (Wix, Squarespace, Webflow): Drag-and-drop Embed-Block
CMS (WordPress, Joomla, Drupal): HTML-/Embed-Block oder Plugins
E-Commerce (Shopify, WooCommerce): Custom HTML-Abschnitte
Eigener Code: Direktes HTML-iFrame

Tip

Die meisten Plattformen bieten spezielle „Embed“- oder „Custom HTML“-Blöcke, mit denen du Timer einfach per Copy & Paste einfügen kannst!

Plattform-Kompatibilität

gettickr.app Timer funktionieren mit allen gängigen Website-Plattformen und CMS:

Plattform-Kategorie	Beispiele	Integrationsanleitung
Content Management	WordPress, Joomla, Drupal	WordPress Guide
E-Commerce	Shopify, WooCommerce, BigCommerce	Shopify Guide
Website-Baukästen	Wix, Squarespace, Weebly, Webflow	Wix & Squarespace Guide
Custom HTML	Handgecodete Seiten, Static Generator	Custom HTML Guide

Eigene Websites bieten die größte Flexibilität, da du Timer exakt platzieren kannst. Baukästen und CMS machen das Einfügen besonders einfach – meist ohne Programmierkenntnisse.

Responsive Design beachten

Moderne Websites müssen auf allen Geräten funktionieren – vom Desktop bis zum Smartphone. Achte beim Einbetten darauf, wie der Timer auf verschiedenen Bildschirmgrößen aussieht.

Best Practices für Responsive Timer:

Aspekt	Empfehlung	Warum
Breite	Prozentwerte (z.B. 100%) oder max-width	Passt sich Containern an
Höhe	Festes Seitenverhältnis	Hält Design-Proportionen
Schriftgrößen	Relative Einheiten im Design	Skaliert mit Container
Mobile-Test	Auf echten Geräten prüfen	Lesbarkeit sicherstellen
Breakpoints	Unterschiedliche Timer-Designs erwägen	Für jede Größe optimieren

Tip

Gestalte Timer mit responsiven Maßen oder erstelle verschiedene Versionen für Desktop, Tablet und Mobil!

Die meisten Plattformen skalieren eingebettete Inhalte automatisch, wenn du Prozentwerte statt fixer Pixel verwendest. So passt sich dein Timer flexibel an.

Timer-Design für Websites

Timer wirken am besten, wenn sie zum Stil deiner Website passen. Nutze Farben, Schriften und Layouts, die sich harmonisch einfügen.

Design-Tipps:

Farben: An deine Marke anpassen
Schriften: Web-sichere oder selbst gehostete Fonts nutzen
Hintergrund: Transparent für nahtlose Integration, Farbe für Widgets
Größe: Passend zum Seitenlayout (Hero, Sidebar, Footer)
Kontrast: Gute Lesbarkeit sicherstellen

Information

Ein Timer, der wie ein natürlicher Teil deiner Seite wirkt, sorgt für einen professionellen Eindruck und bessere Nutzererfahrung.

Hintergrund-Tipps:

Hintergrundtyp	Am besten für	Beispiel-Einsatz
Transparent	Nahtlose Integration	Hero-Sektionen, Overlays
Vollfarbe	Abgesetzte Elemente	Karten, Widgets, Sidebar
Verlauf	Moderne Designs	Landingpages, Aktionen
Bild	Gebrandete Timer	Eventseiten, Kampagnen

Performance und Ladezeiten

Eingebettete Timer sind leichtgewichtig und beeinflussen die Ladezeit deiner Website kaum.

Performance-Metrik	Einfluss	Details
Initiales Laden	Minimal	~50KB komprimiert
Speicherbedarf	Gering	Effiziente Updates
CPU-Last	Kaum messbar	Optimiertes Rendering
Netzwerk-Requests	Einmalig	Kein Polling nötig
PageSpeed Score	Kein Einfluss	Asynchrones Laden

Information

Der Timer läuft in seinem eigenen Bereich – auch bei hoher Last oder langsamer Hauptseite bleibt der Timer funktionsfähig.

Timer aktualisieren sich clientseitig und verursachen keine zusätzlichen Serveranfragen. Nach dem Laden läuft alles im Browser der Besucher:innen.

Free vs. Premium für Websites

Sowohl Free- als auch Premium-Nutzer:innen können Timer einbetten, es gibt aber Unterschiede:

Feature	Free Timer	Premium Timer
Website-Einbettung	✅ Ja	✅ Ja
Design-Anpassung	✅ Vollständig	✅ Vollständig
Stabile URL	❌ Ändert sich bei Edit	✅ Permanent
Fernsteuerung	❌ Nein	✅ Ja
Mehrere gespeicherte Timer	❌ Nein	✅ Unbegrenzt
Update ohne Neueinbettung	❌ Neu einbetten nötig	✅ Automatisch

Premium Feature

Premium-Nutzer:innen können Timer-Designs und Einstellungen ändern, ohne den Embed-Code auf der Website anpassen zu müssen – ideal für wiederkehrende Aktionen!

Schnellstart

So bindest du einen Timer auf deiner Website ein:

Timer erstellen
- Im Editor Countdown- oder CountTo-Timer wählen
- Dauer oder Zielzeitpunkt festlegen
- Design anpassen
Embed-Code holen
- Timer-URL aus dem Editor kopieren
- iFrame-Code generieren (siehe iFrame-Integration)
- Oder plattformspezifische Methode nutzen
In Website einfügen
- Website-Editor öffnen
- HTML-/Embed-Block hinzufügen
- Embed-Code einfügen
- Position und Größe anpassen
Testen und veröffentlichen
- Vorschau auf Desktop und Mobil prüfen
- Timer-Anzeige kontrollieren
- Seite veröffentlichen

Tip

Die meisten Integrationen sind in wenigen Minuten erledigt – auch ohne technische Vorkenntnisse!

Beispiele für den Schnellstart

Basis-iFrame-Code:

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

Responsiver iFrame-Code:

<div
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  >
  </iframe>
</div>

Information

Für detaillierte Anleitungen zu bestimmten Plattformen siehe die Integrations-Guides unten!

Nächste Schritte

Wähle deine Website-Plattform aus den verfügbaren Guides, um spezifische Anleitungen zu erhalten:

iFrame-Integration – Universelle Methode für alle Plattformen
WordPress Integration – Schritt-für-Schritt für WordPress
Shopify Integration – E-Commerce Timer
Wix & Squarespace – Website-Baukasten-Guides
Custom HTML – Fortgeschrittene Möglichkeiten

Jeder Guide ist auf die Besonderheiten der jeweiligen Plattform zugeschnitten, damit du Timer unabhängig von deinem technischen Hintergrund erfolgreich einbinden kannst.

Übersicht: Website-Integration

Free Feature

Die Website-Integration steht sowohl Free- als auch Premium-Nutzern zur Verfügung! Du kannst Timer auf jeder Website einbetten – auch ohne Account.

Wie funktioniert die Website-Integration?

Information

Eingebettete Timer funktionieren ähnlich wie YouTube-Videos oder Google Maps auf deiner Website – sie werden extern gehostet, erscheinen aber direkt im Seiteninhalt.

Integrationsmethoden

Integrationsmethode	Unterstützte Plattformen	Komplexität	Anpassbarkeit
iFrame-Einbettung	Alle gängigen Plattformen	Einfach	Hoch
Direkter URL-Link	Jede Plattform	Sehr einfach	Eingeschränkt
Custom HTML	Entwickler-Websites	Mittel	Maximal
Plattform-Widgets	WordPress, Shopify, etc.	Einfach	Mittel

Je nach Plattform gibt es verschiedene Wege, iFrames einzubinden:

Visuelle Baukästen (Wix, Squarespace, Webflow): Drag-and-drop Embed-Block
CMS (WordPress, Joomla, Drupal): HTML-/Embed-Block oder Plugins
E-Commerce (Shopify, WooCommerce): Custom HTML-Abschnitte
Eigener Code: Direktes HTML-iFrame

Tip

Die meisten Plattformen bieten spezielle „Embed“- oder „Custom HTML“-Blöcke, mit denen du Timer einfach per Copy & Paste einfügen kannst!

Plattform-Kompatibilität

gettickr.app Timer funktionieren mit allen gängigen Website-Plattformen und CMS:

Plattform-Kategorie	Beispiele	Integrationsanleitung
Content Management	WordPress, Joomla, Drupal	WordPress Guide
E-Commerce	Shopify, WooCommerce, BigCommerce	Shopify Guide
Website-Baukästen	Wix, Squarespace, Weebly, Webflow	Wix & Squarespace Guide
Custom HTML	Handgecodete Seiten, Static Generator	Custom HTML Guide

Eigene Websites bieten die größte Flexibilität, da du Timer exakt platzieren kannst. Baukästen und CMS machen das Einfügen besonders einfach – meist ohne Programmierkenntnisse.

Responsive Design beachten

Moderne Websites müssen auf allen Geräten funktionieren – vom Desktop bis zum Smartphone. Achte beim Einbetten darauf, wie der Timer auf verschiedenen Bildschirmgrößen aussieht.

Best Practices für Responsive Timer:

Aspekt	Empfehlung	Warum
Breite	Prozentwerte (z.B. 100%) oder max-width	Passt sich Containern an
Höhe	Festes Seitenverhältnis	Hält Design-Proportionen
Schriftgrößen	Relative Einheiten im Design	Skaliert mit Container
Mobile-Test	Auf echten Geräten prüfen	Lesbarkeit sicherstellen
Breakpoints	Unterschiedliche Timer-Designs erwägen	Für jede Größe optimieren

Tip

Gestalte Timer mit responsiven Maßen oder erstelle verschiedene Versionen für Desktop, Tablet und Mobil!

Die meisten Plattformen skalieren eingebettete Inhalte automatisch, wenn du Prozentwerte statt fixer Pixel verwendest. So passt sich dein Timer flexibel an.

Timer-Design für Websites

Timer wirken am besten, wenn sie zum Stil deiner Website passen. Nutze Farben, Schriften und Layouts, die sich harmonisch einfügen.

Design-Tipps:

Farben: An deine Marke anpassen
Schriften: Web-sichere oder selbst gehostete Fonts nutzen
Hintergrund: Transparent für nahtlose Integration, Farbe für Widgets
Größe: Passend zum Seitenlayout (Hero, Sidebar, Footer)
Kontrast: Gute Lesbarkeit sicherstellen

Information

Ein Timer, der wie ein natürlicher Teil deiner Seite wirkt, sorgt für einen professionellen Eindruck und bessere Nutzererfahrung.

Hintergrund-Tipps:

Hintergrundtyp	Am besten für	Beispiel-Einsatz
Transparent	Nahtlose Integration	Hero-Sektionen, Overlays
Vollfarbe	Abgesetzte Elemente	Karten, Widgets, Sidebar
Verlauf	Moderne Designs	Landingpages, Aktionen
Bild	Gebrandete Timer	Eventseiten, Kampagnen

Performance und Ladezeiten

Eingebettete Timer sind leichtgewichtig und beeinflussen die Ladezeit deiner Website kaum.

Performance-Metrik	Einfluss	Details
Initiales Laden	Minimal	~50KB komprimiert
Speicherbedarf	Gering	Effiziente Updates
CPU-Last	Kaum messbar	Optimiertes Rendering
Netzwerk-Requests	Einmalig	Kein Polling nötig
PageSpeed Score	Kein Einfluss	Asynchrones Laden

Information

Der Timer läuft in seinem eigenen Bereich – auch bei hoher Last oder langsamer Hauptseite bleibt der Timer funktionsfähig.

Timer aktualisieren sich clientseitig und verursachen keine zusätzlichen Serveranfragen. Nach dem Laden läuft alles im Browser der Besucher:innen.

Free vs. Premium für Websites

Sowohl Free- als auch Premium-Nutzer:innen können Timer einbetten, es gibt aber Unterschiede:

Feature	Free Timer	Premium Timer
Website-Einbettung	✅ Ja	✅ Ja
Design-Anpassung	✅ Vollständig	✅ Vollständig
Stabile URL	❌ Ändert sich bei Edit	✅ Permanent
Fernsteuerung	❌ Nein	✅ Ja
Mehrere gespeicherte Timer	❌ Nein	✅ Unbegrenzt
Update ohne Neueinbettung	❌ Neu einbetten nötig	✅ Automatisch

Premium Feature

Premium-Nutzer:innen können Timer-Designs und Einstellungen ändern, ohne den Embed-Code auf der Website anpassen zu müssen – ideal für wiederkehrende Aktionen!

Schnellstart

So bindest du einen Timer auf deiner Website ein:

Timer erstellen
- Im Editor Countdown- oder CountTo-Timer wählen
- Dauer oder Zielzeitpunkt festlegen
- Design anpassen
Embed-Code holen
- Timer-URL aus dem Editor kopieren
- iFrame-Code generieren (siehe iFrame-Integration)
- Oder plattformspezifische Methode nutzen
In Website einfügen
- Website-Editor öffnen
- HTML-/Embed-Block hinzufügen
- Embed-Code einfügen
- Position und Größe anpassen
Testen und veröffentlichen
- Vorschau auf Desktop und Mobil prüfen
- Timer-Anzeige kontrollieren
- Seite veröffentlichen

Tip

Die meisten Integrationen sind in wenigen Minuten erledigt – auch ohne technische Vorkenntnisse!

Beispiele für den Schnellstart

Basis-iFrame-Code:

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

Responsiver iFrame-Code:

<div
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"
>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  >
  </iframe>
</div>

Information

Für detaillierte Anleitungen zu bestimmten Plattformen siehe die Integrations-Guides unten!

Nächste Schritte

Wähle deine Website-Plattform aus den verfügbaren Guides, um spezifische Anleitungen zu erhalten:

iFrame-Integration – Universelle Methode für alle Plattformen
WordPress Integration – Schritt-für-Schritt für WordPress
Shopify Integration – E-Commerce Timer
Wix & Squarespace – Website-Baukasten-Guides
Custom HTML – Fortgeschrittene Möglichkeiten

Jeder Guide ist auf die Besonderheiten der jeweiligen Plattform zugeschnitten, damit du Timer unabhängig von deinem technischen Hintergrund erfolgreich einbinden kannst.