De vragen die opkomen zodra de code geplakt is: hoogte, breedte, transparantie, platforms.
Hoe pas ik de grootte van de iframe aan?
Een iframe neemt niet vanzelf de hoogte van zijn inhoud aan: die stel jij in. De meegeleverde code gebruikt width="100%" en height="500": de breedte volgt je kolom, de hoogte is vast. Reken op 300 tot 380 px als titel, beschrijving en datum verborgen zijn, 450 tot 500 px met alles, en iets meer op mobiel, waar tekst omloopt. De aftelklok centreert zich in de beschikbare hoogte: te hoog laat de iframe lege ruimte, te laag snijdt hij de beschrijving af.
Voor een andere hoogte op mobiel geef je de iframe een class:
<style>
.wiu-countdown { width: 100%; height: 480px; border: 0; }
@media (max-width: 600px) { .wiu-countdown { height: 560px; } }
</style>
<iframe class="wiu-countdown" src="https://nl.watchisup.com/evenement/je-aftelklok/embed" title="Countdown" loading="lazy"></iframe>
Automatische hoogte van de iframe (Pro)
Met Pro-embed voegt de code uit het venster Insluiten een scriptregel toe onder de iframe. De widget geeft dan de hoogte van zijn inhoud door en de iframe past zich vanzelf aan: geen lege ruimte of afgesneden beschrijving, op de computer en op mobiel, en de hoogte volgt als de live-balk verschijnt. Plak de regel één keer per pagina, ook bij meerdere widgets.
Dit werkt overal waar je een script kunt plakken: WordPress (blok ‘Aangepaste HTML’), Squarespace, Webflow, Shopify, een zelfgebouwde site. Notion en Google Sites verwijderen scripts, en Wix zet geplakte code in een eigen kader: daar houdt de iframe de hoogte van zijn height-attribuut.
<iframe src="https://nl.watchisup.com/evenement/je-aftelklok/embed?live=1" width="100%" height="500" frameborder="0"
title="Countdown" loading="lazy"></iframe>
<script src="https://nl.watchisup.com/embed.js" async></script>
Hoe centreer ik de widget en beperk ik de breedte?
Op een brede pagina leest een aftelklok over de volle breedte minder goed. Beperk de breedte en centreer hem:
<iframe src="https://nl.watchisup.com/evenement/je-aftelklok/embed" width="100%" height="420"
style="display:block; max-width:720px; margin:0 auto; border:0;"
title="Countdown" loading="lazy"></iframe>
Hoe maak ik de achtergrond transparant?
Met Pro-embed voeg je bg=transparent toe aan het adres: de achtergrond van je site verschijnt achter de cijfers. Op de iframe voorkomen allowtransparency en background:transparent een witte achtergrond in sommige browsers. Kies dan een tekstkleur die goed leesbaar is op je achtergrond (parameter text).
<iframe src="https://nl.watchisup.com/evenement/je-aftelklok/embed?bg=transparent&live=1&hide=description"
width="100%" height="420" frameborder="0" allowtransparency="true"
style="background:transparent; border:0;" title="Countdown" loading="lazy"></iframe>
Hoe sluit ik hem in zonder de pagina te vertragen?
Voeg loading="lazy" toe: de browser laadt de widget pas als hij het scherm nadert, ideaal voor een aftelklok onderaan de pagina. Voeg ook een title-attribuut toe dat de aftelklok beschrijft: dat lezen schermlezers voor.
<iframe src="https://nl.watchisup.com/evenement/je-aftelklok/embed" width="100%" height="480" frameborder="0"
loading="lazy" title="Countdown to …"></iframe>
Op welk platform plak ik de code?
Overal waar je HTML of een in te sluiten adres kunt plakken. De volledige code (de iframe) gaat in een HTML-blok; tools die alleen een URL vragen, nemen de insluitlink, die eindigt op /embed.
- WordPress
- Blok ‘Aangepaste HTML’ in de editor, of een HTML-widget in de zijbalk.
- Notion
- Typ /embed en plak de insluitlink, die eindigt op /embed.
- Wix
- Toevoegen > Code insluiten > HTML insluiten, en plak de iframe.
- Squarespace
- Voeg een codeblok toe en plak de iframe.
- Webflow
- Voeg een Embed-element toe en plak de iframe.
- Shopify
- Sectie ‘Aangepaste Liquid’ in het thema, plak de iframe.
- Google Sites
- Invoegen > Insluiten > Via URL, plak de insluitlink.
- Framer, Carrd, Jimdo…
- HTML- of Embed-blok: plak de iframe.
Hoe wijzig ik de datum zonder de code opnieuw te plakken?
Open je bewerkingslink en wijzig de datum of titel: de widget is bijgewerkt op alle sites die hem tonen. De iframe-code zelf verandert niet.
Klopt de aftelklok in elke tijdzone?
Ja. De aftelklok mikt op een exact moment: hij bereikt nul op hetzelfde moment voor alle bezoekers, waar ze ook zijn, zomertijd inbegrepen. De datum onder de titel wordt getoond in de tijdzone van het evenement.