Afteltimer-generator: gratis HTML- en React-code, zonder aanmelden | We.Inc
Maak een afteltimer voor uw website. Stel de datum en tijdzone in, kies een stijl en kopieer gewone HTML of een React-component. Geen account, geen trackingwidget, geen extern script.
Een afteltimer op een website vergelijkt elke seconde een vaste deadline met de klok van de bezoeker en toont de resterende dagen, uren, minuten en seconden. Stel hieronder uw datum, tijd en tijdzone in, kies een stijl en kopieer losstaande HTML of een React-component. De code draait op uw pagina zonder script van derden of account.
Twee soorten afteltimers
Soort
Deadline
Gebruik het voor
Vaste datum
Hetzelfde moment voor iedereen
Lanceringen, evenementen, acties die op een echt tijdstip eindigen
Per bezoeker
Een vast aantal uren na het eerste bezoek van elke bezoeker
Welkomstaanbiedingen die voor die persoon echt verlopen
Kies een datum en de tijdzone waar de deadline bij hoort, kies een van drie stijlen en een accentkleur, en bekijk hieronder het live resultaat. De uitvoer is één blok HTML, CSS en JavaScript, of een React-component met Tailwind-classes.
Kies de datum en tijd van de deadline, en dan de tijdzone waarin die valt. De code slaat het exacte moment op in UTC, zodat bezoekers in andere zones de juiste resterende tijd zien.
Of schakel over naar een afteltimer per bezoeker en vul in hoeveel uur elke bezoeker krijgt.
Kies een stijl en accentkleur en pas de kop aan en de melding die verschijnt als de tijd om is.
Kopieer de HTML-embed of de React-component en plak die waar de timer moet verschijnen.
Toon alleen een afteltimer voor een deadline die echt is. Timers die resetten of nooit aflopen misleiden bezoekers, en de Amerikaanse Federal Trade Commission rekent nep-afteltimers tot misleidende ontwerppraktijken.
Zeg in de eindmelding wat er bij nul gebeurt, bijvoorbeeld dat de actie voorbij is of dat het evenement begonnen is, met een link naar de volgende stap.
De timer gebruikt de klok van het apparaat van de bezoeker. Staat die klok verkeerd, dan klopt de afteltimer ook niet, dus gebruik hem nooit als enige controle voor een echte sluitingstijd; handhaaf deadlines ook op uw server.
Houd schermlezers buiten de updates per seconde. De code markeert de timer met role timer en aria-live off, zodat niet elke tik wordt aangekondigd.
Veelgestelde vragen
Hoe voeg ik een afteltimer toe aan mijn website?
Kopieer de HTML-embed en plak die in uw pagina waar de timer moet komen. De meeste sitebouwers hebben hiervoor een HTML- of embedblok. Is uw site gebouwd met React, kopieer dan de component en render die zoals elke andere component.
Klopt de timer voor bezoekers in andere tijdzones?
Ja. De tool zet uw datum en tijdzone om in één exact moment in UTC en schrijft dat getal in de code. De browser van elke bezoeker telt af naar hetzelfde moment, ongeacht de lokale tijd.
Wat doet de optie per bezoeker?
Die start de afteltimer van elke bezoeker bij het eerste bezoek en slaat dat moment op in de browser, zodat een refresh hem niet opnieuw start. Sitegegevens wissen of van apparaat wisselen start een nieuwe, dus gebruik het alleen voor aanbiedingen die u in dat geval graag nakomt.
Kan ik deze afteltimer in een e-mail zetten?
Nee. E-mailprogramma's voeren geen JavaScript uit. Afteltimers in e-mails zijn geanimeerde afbeeldingen die een server genereert op het moment dat de e-mail wordt geopend, en dat kan een statische pagina niet leveren.
Waarom de code UTC opslaat
Een datum als 1 december om 9:00 betekent in Toronto en in Karachi verschillende momenten. Door de deadline als UTC-timestamp op te slaan verdwijnt die dubbelzinnigheid, en ook de overgang naar zomer- of wintertijd wordt goed afgehandeld, omdat de omzetting de regels gebruikt van de zone die u voor die exacte datum koos.
Het script trekt daarna bij elke tik de huidige tijd af van de deadline en splitst het verschil in dagen, uren, minuten en seconden.
De timer nauwkeurig en licht houden
Browsers vertragen timers in tabbladen op de achtergrond, dus een afteltimer die per tik gewoon één seconde aftrekt, loopt uit de pas. Deze code rekent elke keer opnieuw vanaf de klok en plant de volgende update aan het begin van de volgende seconde, zodat hij klopt als het tabblad weer actief wordt.
Er is geen library en geen extern verzoek, wat de pagina snel houdt en voorkomt dat bezoekersgegevens naar een widgetaanbieder gaan.