Gratis tool

Pop-up generator
voor verlof & sluitingsdagen

Wil je bezoekers laten weten dat je gesloten bent tijdens de zomervakantie of feestdagen? Stel je periodes in, kopieer de code en plak hem op je website. Volledig gratis, geen account nodig.

Stap 1 — Jouw sluitingsperiodes

Voeg één of meerdere periodes toe. De pop-up verschijnt automatisch op de juiste datum.

Toon pop-up vanaf
Gesloten van
Gesloten tot

Pop-up zichtbaar van 15/6 t/m 15/7 — meldt sluiting van 1/7 tot 15/7

Stap 2 — Jouw bericht

Gebruik {label} voor de naam van de periode.

Stap 3 — Kopieer de code

Plak deze code vóór de sluitende </body> tag van je website.

<script>
(function() {
  var periods = [{"label":"Zomervakantie","showFromMonth":6,"showFromDay":15,"startMonth":7,"startDay":1,"endMonth":7,"endDay":15,"color":"#A58C4E"}];
  var msg = `Opgelet: wij zijn gesloten tijdens {label} (van {startDay}/{startMonth} tot {endDay}/{endMonth}).`;
  var today = new Date();
  var m = today.getMonth() + 1;
  var d = today.getDate();
  var active = periods.find(function(p) {
    var afterShowFrom = m > p.showFromMonth || (m === p.showFromMonth && d >= p.showFromDay);
    var beforeEnd = m < p.endMonth || (m === p.endMonth && d <= p.endDay);
    return afterShowFrom && beforeEnd;
  });
  if (!active) return;
  var label = msg.replace('{label}', active.label);
  var div = document.createElement('div');
  div.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:9999;padding:12px 20px;text-align:center;font-family:sans-serif;font-size:14px;color:#fff;background:' + active.color + ';';
  div.innerHTML = label + ' <button onclick="this.parentNode.remove()" style="margin-left:12px;background:rgba(255,255,255,0.25);border:none;color:#fff;border-radius:4px;padding:2px 8px;cursor:pointer;">✕</button>';
  document.body.prepend(div);
})();
</script>

Hoe werkt het?

01

Stel je periodes in

Voer de naam en datums in van elke sluitingsperiode. Je kan meerdere periodes toevoegen.

02

Kopieer de code

Klik op 'Kopieer code' en plak de code op je website, net voor de sluitende </body> tag.

03

Automatisch actief

De pop-up verschijnt automatisch wanneer de datum overeenkomt. Geen verdere aanpassingen nodig.

Veelgestelde vragen

Veelgestelde vragen