So betten Sie einen Countdown in Ihre Website ein
Wenn Sie Content-Management- oder Blog-Software wie Blogger, WordPress, Drupal oder ähnliche verwenden, müssen Sie sicherstellen, dass Sie Ihren Inhalt im HTML-Modus bearbeiten, wenn Sie den Einbettungscode einfügen.
Das Einbetten eines Countdowns von CountingDownTo.com funktioniert sehr ähnlich wie das Einbetten eines Videos von einer Website wie YouTube.com.
- Öffnen Sie Ihren Countdown. Um einen neuen zu erstellen, klicken Sie im Menü oben auf der Seite auf Website-Countdowns. Um einen früher erstellten Countdown zu finden, klicken Sie oben rechts auf das Kontosymbol (das Personensymbol) und dann auf Meine Countdowns.
- Klicken Sie unter dem Countdown auf Einbetten.
- Kopieren Sie den Code, der unter der Schaltfläche erscheint. Wenn neben dem Code eine Schaltfläche Copy angezeigt wird, können Sie stattdessen darauf klicken.
- Fügen Sie den Code an der Stelle in Ihre Website oder Ihren Blog ein, an der der Countdown erscheinen soll.
Notion und Google Sites benötigen statt des Codes einen Link. Der Editor zeigt diesen Link unter dem Code an. Canva benötigt den Freigabelink Ihres Countdowns: Klicken Sie im ursprünglichen Editor zuerst auf Teilen, um ihn zu erhalten. Der neue Editor zeigt ihn unter dem Link für Notion und Google Sites an.
Wenn Sie die Anweisungen auf dieser Seite befolgt haben, Ihren Countdown aber dennoch nicht einbetten können, bitte kontaktieren Sie uns für Unterstützung.
Welche Plattformen können einen Live-Countdown einbetten?
Die meisten Websites, auf denen Sie benutzerdefiniertes HTML oder eine iframe-URL einfügen können, zeigen Ihren Countdown live und tickend an. Einige Page-Builder- und Design-Tools blockieren iframes vollständig. Das haben wir selbst überprüft. Die Zeilen zu Canvas und Schoology beruhen auf unseren Logs, die Countdowns auf vielen Kursseiten dieser Plattformen zeigen, und bei Canvas auf dessen eigener Anleitung:
| Plattform | Live-Countdown? | Hinweise |
|---|---|---|
| WordPress (selbst gehostet) | Ja | Fügen Sie im Block-Editor einen Benutzerdefiniertes HTML-Block hinzu und fügen Sie den Einbettungscode ein. |
| WordPress.com | Planabhängig | Kostenlose Pläne entfernen iframes. Bei kostenpflichtigen Plänen müssen „Hosting-Funktionen“ aktiviert werden, bevor benutzerdefiniertes HTML funktioniert. Weitere Infos. |
| Squarespace | Ja (Core-Plan oder höher) | Fügen Sie einen Code-Block hinzu und fügen Sie den Einbettungscode ein. Erfordert einen Core-Plan oder höher oder einen älteren Business- oder Commerce-Plan. |
| Wix | Ja | Nutzen Sie Elemente hinzufügen → Embed Code → Popular Embeds → Embed HTML. Stellen Sie Breite und Höhe des iframes passend zu Ihrem Countdown ein, damit er nicht abgeschnitten wird und keine Scrollbalken zeigt. |
| Google Sites | Ja |
Verwenden Sie Einfügen → Einbetten. Fügen Sie den Einbettungscode auf dem Tab
Einbettungscode
ein oder die Adresse aus src="..."
Ihres Einbettungscodes auf dem Tab Nach URL. Wenn die Adresse auf
.js
endet, lassen Sie .js
weg.
|
| Shopify | Ja (mit Einschränkung) | Verwenden Sie einen Custom Liquid-Abschnitt im Theme. Der Editor für Produktbeschreibungen behält den Einbettungscode nicht bei jedem Theme, nutzen Sie also auch auf Produktseiten einen Custom-Liquid-Abschnitt. |
| Notion | Ja |
Geben Sie /embed
ein und fügen Sie die Adresse aus src="..."
Ihres Einbettungscodes ein, nicht den Freigabelink. Wenn die Adresse auf
.js
endet, lassen Sie .js
weg.
|
| Canva | Ja, bei Online-Ansicht | Fügen Sie die App Embed hinzu und fügen Sie den Freigabelink Ihres Countdowns ein. Heruntergeladene Bilder, PDFs und Videos können keinen tickenden Countdown zeigen. |
| Canvas | Ja | Wählen Sie im Rich Content Editor Insert → Embed, fügen Sie den Einbettungscode ein, klicken Sie auf Submit und speichern Sie dann die Seite. Diese Schritte stammen aus der Canvas-Anleitung für Lehrkräfte. |
| Schoology | Ja (Schritte nicht getestet) | Countdowns werden auf Schoology-Seiten angezeigt, aber wir haben die Schritte nicht selbst getestet. Fügen Sie den Einbettungscode in der HTML-Ansicht des Editors ein. |
| Blogger, Drupal, Weebly, Joomla! | Ja | Fügen Sie den Einbettungscode als benutzerdefiniertes/rohes HTML ein — siehe die plattformspezifischen Anweisungen unten. |
| Facebook, WhatsApp, YouTube | Nein | Diese Plattformen erlauben keine iframe-Einbettungen von Drittanbietern. Teilen Sie stattdessen einen Link zu Ihrer veröffentlichten Countdown-Seite. |
| E-Mail-Clients | Nein (GIF verwenden) | E-Mail-Clients blockieren iframes. Verwenden Sie stattdessen unseren E-Mail-GIF-Countdown. |
Countdown in WordPress einbetten
Selbst gehostetes WordPress: Fügen Sie im Block-Editor einen Benutzerdefiniertes HTML-Block hinzu (+ → „Benutzerdefiniertes HTML“ suchen) und fügen Sie den Einbettungscode ein, den wir Ihnen gegeben haben. Wenn der Countdown in der Vorschau des Blocks nicht erscheint, prüfen Sie die veröffentlichte Seite.
WordPress.com: Kostenlose WordPress.com-Websites unterstützen keine iframes (weitere Infos). Bei kostenpflichtigen Plänen müssen Sie Hosting-Funktionen aktivieren, bevor der Block „Benutzerdefiniertes HTML“ iframes rendert.
Benutzer des klassischen Editors: Wenn Sie noch den alten Visuell/Text-Editor verwenden, wählen Sie Text (nicht Visuell), bevor Sie einfügen.
Countdown in Squarespace einbetten
Squarespace erfordert einen Core-Plan oder höher oder einen älteren Business- oder Commerce-Plan, um benutzerdefinierten Code einzubetten. Bearbeiten Sie Ihre Seite, klicken Sie auf +, um einen Block hinzuzufügen, suchen Sie nach Code und fügen Sie den Einbettungscode in den Code-Block ein. Speichern Sie und sehen Sie sich die Vorschau an. Der Countdown sollte auf Ihrer veröffentlichten Seite live ticken.
Countdown in Wix einbetten
Klicken Sie im Wix-Editor auf Elemente hinzufügen → Embed Code → Popular Embeds → Embed HTML. Klicken Sie auf Enter Code, fügen Sie den Einbettungscode ein und klicken Sie auf Apply.
Wichtig — iframe-Größe:
Wenn der Countdown abgeschnitten wird oder Scrollleisten anzeigt, öffnen Sie die Einstellungen des Einbettungselements und stellen Sie Breite und Höhe so ein, dass sie den Abmessungen in Ihrem Einbettungscode entsprechen (typischerweise dieselbe Breite und Höhe wie das <iframe>-Tag). Wix passt eingebettete iframes nicht immer automatisch an.
Sehen Sie sich ein kurzes Video an, das zeigt, wie Sie einen Countdown zu Wix hinzufügen.
Countdown in Google Sites einbetten
Klicken Sie beim Bearbeiten Ihrer Website auf Einfügen
→ Einbetten. Fügen Sie auf dem Tab
Einbettungscode
den Einbettungscode ein, den wir bereitgestellt haben. Oder fügen Sie auf dem Tab
Nach URL
den Einbettungslink Ihres Countdowns ein: die Adresse aus src="..."
Ihres Einbettungscodes. Wenn die Adresse auf .js
endet, lassen Sie .js
weg.
Passen Sie dann die Größe des Einbettungsfelds auf der Seite an, damit der gesamte Countdown sichtbar ist.
Countdown in Shopify einbetten
Fügen Sie den Einbettungscode in einen Custom Liquid-Abschnitt Ihres Themes ein (Onlineshop → Themes → Anpassen → Abschnitt hinzufügen). Der Countdown wird live auf den Seiten angezeigt, auf denen Sie ihn platzieren.
Produktbeschreibungen: Der Editor für Produktbeschreibungen behält den Einbettungscode nicht bei jedem Theme. Fügen Sie stattdessen der Produktseiten-Vorlage einen Custom-Liquid-Abschnitt hinzu.
Countdown in Notion einbetten
Geben Sie auf einer beliebigen Notion-Seite /embed
ein und drücken Sie Enter. Fügen Sie den Einbettungslink Ihres Countdowns ein und bestätigen Sie. Notion zeigt nur den Countdown, und er läuft live.
Ihr Einbettungslink ist die Adresse aus src="..."
Ihres Einbettungscodes, zum Beispiel
https://countingdownto.com/w4/abc123
oder https://w2.countingdownto.com/1234567. Wenn Ihr Code ein Script-Tag ist, lassen Sie das
.js
am Ende weg. Fügen Sie nicht den Freigabelink oder den ganzen Einbettungscode ein. Ziehen Sie an den Rändern des Blocks, um seine Größe zu ändern.
Countdown in Canva einbetten
Canva kann einen Live-Countdown in Designs und Canva-Websites anzeigen, die online angesehen werden. Öffnen Sie im Canva-Editor Apps, wählen Sie Embed und fügen Sie den Freigabelink Ihres Countdowns ein.
Wenn Canva bei einem Countdown aus dem neuen Editor ein unbewegtes Vorschaubild statt des Countdowns zeigt, fügen Sie stattdessen seinen Einbettungslink ein: die Adresse in
src="..."
in Ihrem Einbettungscode. Für Countdowns aus dem älteren Editor verwenden Sie den Freigabelink; deren Einbettungslinks (w2.countingdownto.com) funktionieren in Canva nicht. Ein heruntergeladenes Bild, PDF oder Video kann keinen tickenden Countdown zeigen.
Countdown in Blogger einbetten
Wechseln Sie im Post-Editor von der Ansicht „Verfassen“ zur HTML-Ansicht, bevor Sie den Einbettungscode einfügen. Der Countdown wird nicht angezeigt, während Sie Ihren Beitrag bearbeiten. Er erscheint erst, wenn Sie Ihren Beitrag veröffentlichen oder in der Vorschau anzeigen.
Countdown in Drupal einbetten
Wählen Sie in der Liste Textformat unter dem Textfeld Full HTML aus und fügen Sie dann den Einbettungscode ein. Der Countdown wird nicht angezeigt, während Sie Ihre Seite bearbeiten. Er erscheint erst, wenn Sie Ihre Seite speichern oder in der Vorschau anzeigen.
Countdown in Weebly einbetten
Ziehen Sie das Element Code einbetten auf Ihre Seite, klicken Sie darauf und fügen Sie den Einbettungscode ein. Veröffentlichen Sie Ihre Website, um den Countdown zu sehen.
Countdown in Joomla! einbetten
Klicken Sie unter dem Beitragseditor auf Editor an/aus, damit Sie reines HTML bearbeiten. Fügen Sie dann den Einbettungscode ein und speichern Sie.
Der standardmäßige TinyMCE-Editor von Joomla kann iframe-Tags beim Speichern entfernen. Wenn der Countdown nicht erscheint, fügen Sie den Einbettungscode bei ausgeschaltetem Editor in ein Modul vom Typ Benutzerdefiniert ein, oder bitten Sie Ihren Website-Administrator, iframes in den Einstellungen des TinyMCE-Plugins zu erlauben.
Plattformen, die keine iframe-Einbettungen unterstützen
Die folgenden Plattformen können nicht einen live iframe-Countdown anzeigen, unabhängig davon, welchen Einbettungscode Sie verwenden:
- Facebook — teilen Sie stattdessen einen Link zu Ihrer veröffentlichten Countdown-Seite.
- WhatsApp — teilen Sie einen Link; WhatsApp rendert kein eingebettetes HTML.
- YouTube — YouTube-Kanal-Seiten und Videobeschreibungen unterstützen keine iframes von Drittanbietern.
- E-Mail-Clients: Gmail, Outlook, Mailchimp und andere E-Mail-Apps blockieren iframes aus Sicherheitsgründen. Verwenden Sie stattdessen unseren E-Mail-Countdown. Er erzeugt ein animiertes Bild, das die meisten E-Mail-Apps anzeigen.
E-Mail-Countdowns einbetten
E-Mail-Programme blockieren iframes, deshalb sind E-Mail-Countdowns animierte GIF-Bilder. Erstellen Sie einen auf der E-Mail-Countdown-Seite und klicken Sie auf Zu meiner E-Mail hinzufügen, um den Code zu erhalten. In E-Mail-Marketing-Tools wie Mailchimp, Constant Contact, AWeber und Kit (ConvertKit) fügen Sie den Code in einen HTML- oder Code-Block ein. Um den Countdown aus Gmail oder einem anderen persönlichen E-Mail-Konto zu senden, verwenden Sie auf derselben Seite Senden Sie mir diesen Countdown per E-Mail und leiten Sie die E-Mail weiter, die Sie erhalten.
Sie nutzen Kajabi? Folgen Sie unserer Anleitung für den Kajabi-Countdown-Timer.
Das Bild zeigt die verbleibende Zeit beim Laden. Manche E-Mail-Apps laden Bilder im Voraus, daher kann es eine frühere Zeit zeigen. Schreiben Sie das Datum auch in den Text Ihrer E-Mail.