t/m ).
3. Publiceer of bekijk voorbeeld. In de editor zie je een sandbox-preview,
op de live pagina werkt de interactie volledig.
Alle CSS is afgeschermd met .wzkh zodat het je thema niet raakt.
Plaats het blok bovenaan de pagina voor een 16:9 hero-keuzehulp.
–>
.wzkh{–roze:#eb5297;–roze-dark:#d83f83;–blauw:#008bd2;–blauw-licht:#e5f2fa;–groen:#afca0b;–tekst:#333;–grijs:#787878;–witgrijs:#f8f8f8;–lichtgrijs:#f1f1f1;–wit:#fff;–border:#e6e6e6;max-width:1120px;margin:0 auto;font-family:’Noto Sans’,’Segoe UI’,Arial,sans-serif;}
.wzkh *{box-sizing:border-box;margin:0;padding:0;}
.wzkh-outer{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;box-shadow:0 10px 34px rgba(0,0,0,.12);background:var(–wit);}
.wzkh-stage{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:top left;color:var(–tekst);}
.wzkh-hdr{height:74px;padding:0 44px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(–border);}
.wzkh-logo{height:38px;width:auto;}
.wzkh-titel{font-size:17px;font-weight:700;color:var(–grijs);}
.wzkh-slogan{margin-left:auto;font-size:16px;font-weight:700;color:var(–roze);font-style:italic;}
.wzkh-progress{height:7px;background:var(–lichtgrijs);}
.wzkh-pbar{height:100%;background:var(–roze);width:0;transition:width .35s ease;}
.wzkh-screen{position:absolute;left:0;right:0;top:81px;height:639px;padding:38px 60px 40px;display:none;flex-direction:column;}
.wzkh-screen.wzkh-active{display:flex;}
.wzkh-stepcount{font-size:14px;font-weight:700;color:var(–blauw);letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;}
.wzkh-q{font-size:38px;font-weight:800;line-height:1.15;margin-bottom:6px;}
.wzkh-qsub{font-size:19px;color:var(–grijs);margin-bottom:26px;}
.wzkh-opts2{display:grid;grid-template-columns:1fr 1fr;gap:26px;flex:1;min-height:0;}
.wzkh-imgopt{border:3px solid var(–border);border-radius:18px;overflow:hidden;cursor:pointer;background:var(–wit);text-align:left;font-family:inherit;transition:border-color .15s,transform .15s;display:flex;flex-direction:column;}
.wzkh-imgopt:hover{border-color:var(–roze);transform:translateY(-4px);}
.wzkh-ph{flex:1;min-height:0;background-size:cover;background-position:center;display:block;}
.wzkh-lbl{padding:18px 22px;display:block;}
.wzkh-lbl strong{display:block;font-size:24px;font-weight:800;}
.wzkh-lbl span{font-size:16px;color:var(–grijs);}
.wzkh-prodopt{border:3px solid var(–border);border-radius:18px;overflow:hidden;cursor:pointer;background:var(–wit);font-family:inherit;text-align:center;transition:border-color .15s,transform .15s;display:flex;flex-direction:column;}
.wzkh-prodopt:hover{border-color:var(–roze);transform:translateY(-4px);}
.wzkh-pimg{flex:1;min-height:0;background:var(–witgrijs);display:flex;align-items:center;justify-content:center;padding:20px;}
.wzkh-pimg img{max-width:100%;max-height:100%;object-fit:contain;}
.wzkh-pbody{padding:16px 18px 22px;}
.wzkh-pname{font-size:26px;font-weight:800;}
.wzkh-pclaim{font-size:16px;color:var(–grijs);margin:4px 0 10px;}
.wzkh-pprice{font-size:16px;font-weight:700;color:var(–blauw);}
.wzkh-nav{margin-top:22px;display:flex;justify-content:space-between;align-items:center;}
.wzkh-back{background:none;border:none;color:var(–grijs);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;}
.wzkh-back:hover{color:var(–tekst);}
.wzkh-back[disabled]{visibility:hidden;}
.wzkh-skip{font-size:15px;color:var(–grijs);text-decoration:none;}
.wzkh-skip:hover{color:var(–roze);}
.wzkh-resgrid{display:grid;grid-template-columns:430px 1fr;gap:44px;flex:1;min-height:0;}
.wzkh-recimg{background:var(–blauw-licht);border-radius:18px;display:flex;align-items:center;justify-content:center;padding:26px;}
.wzkh-recimg img{max-width:100%;max-height:100%;object-fit:contain;}
.wzkh-right{display:flex;flex-direction:column;min-height:0;}
.wzkh-reshead{font-size:14px;font-weight:700;color:var(–blauw);text-transform:uppercase;letter-spacing:.5px;}
.wzkh-recname{font-size:40px;font-weight:800;line-height:1;margin:4px 0 6px;}
.wzkh-badge{display:inline-block;background:var(–roze);color:#fff;font-size:13px;font-weight:700;padding:4px 14px;border-radius:20px;margin-bottom:12px;}
.wzkh-feats{list-style:none;margin-bottom:16px;}
.wzkh-feats li{font-size:16px;padding-left:28px;position:relative;margin-bottom:6px;}
.wzkh-feats li:before{content:””;position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(–groen);background-image:url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24′ fill=’none’ stroke=’white’ stroke-width=’4’%3E%3Cpath d=’M5 13l4 4L19 7’/%3E%3C/svg%3E”);background-size:12px;background-repeat:no-repeat;background-position:center;}
.wzkh-kleurlbl{font-size:15px;font-weight:700;margin-bottom:8px;}
.wzkh-kleurlbl span{color:var(–grijs);font-weight:400;}
.wzkh-swatches{display:flex;gap:12px;margin-bottom:18px;}
.wzkh-sw{width:38px;height:38px;border-radius:50%;cursor:pointer;border:3px solid var(–wit);box-shadow:0 0 0 2px var(–border);transition:box-shadow .15s,transform .12s;padding:0;}
.wzkh-sw:hover{transform:scale(1.08);}
.wzkh-sw.wzkh-sel{box-shadow:0 0 0 3px var(–roze);}
.wzkh-priceline{font-size:17px;margin-bottom:4px;}
.wzkh-priceline strong{font-size:22px;font-weight:800;}
.wzkh-priceline .wzkh-sub{color:var(–grijs);font-size:15px;}
.wzkh-aboline{font-size:14px;color:var(–grijs);margin-bottom:16px;}
.wzkh-aboline a{color:var(–blauw);font-weight:700;text-decoration:none;}
.wzkh-ctas{display:flex;gap:14px;margin-top:auto;}
.wzkh-btn{padding:16px 26px;border-radius:32px;font-weight:800;font-size:17px;text-decoration:none;cursor:pointer;border:none;font-family:inherit;text-align:center;}
.wzkh-btn-primary{background:var(–roze);color:#fff;}
.wzkh-btn-primary:hover{background:var(–roze-dark);}
.wzkh-btn-ghost{background:var(–wit);color:var(–tekst);border:2px solid var(–border);}
.wzkh-btn-ghost:hover{border-color:var(–blauw);}
.wzkh-resfoot{display:flex;align-items:center;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(–border);}
.wzkh-alt{display:flex;align-items:center;gap:10px;font-size:14px;color:var(–grijs);}
.wzkh-alt img{width:40px;height:40px;object-fit:contain;background:var(–witgrijs);border-radius:8px;padding:4px;border:1px solid var(–border);}
.wzkh-alt a{color:var(–roze);font-weight:700;text-decoration:none;}
.wzkh-phone{margin-left:auto;font-size:14px;color:var(–grijs);}
.wzkh-phone a{color:var(–blauw);font-weight:800;text-decoration:none;}
.wzkh-restart{background:none;border:none;color:var(–grijs);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.wzkh-restart:hover{color:var(–tekst);}
(function(){
var root=document.getElementById(‘wzkh’);
if(!root||root.dataset.init)return; root.dataset.init=”1″;
var AANSLUIT=25;
var products={
pebbles:{naam:”Pebbles”,prijs:130,badge:”Populairste keuze”,vorm:”hals”,claim:”Zo eenvoudig mogelijk, een grote knop”,
feats:[“Een grote, duidelijke SOS-knop”,”Licht (40 gram), aan een koord of kleding”,”Straalwaterdicht, kan mee onder de douche”],
varianten:[
{kleur:”Zwart”,hex:”#1e1e1e”,img:”https://wuzzialert.com/wp-content/uploads/2023/06/WuzziAlert-Pebbles-zwart-alarmapparaatje.jpg”,url:”https://wuzzialert.com/product/alarm/pebbles-zwart/”,bestel:”https://order.wuzzialert.com/bestellen/pebbles/zwart/koop”},
{kleur:”Blauw”,hex:”#008bd2″,img:”https://wuzzialert.com/wp-content/uploads/2023/06/Wuzzi-Alert-Pebbles-blauw-alarmapparaatje-alarmknop-SOS.jpg”,url:”https://wuzzialert.com/product/alarm/pebbles-blauw/”,bestel:”https://order.wuzzialert.com/bestellen/pebbles/blauw/koop”},
{kleur:”Groen”,hex:”#afca0b”,img:”https://wuzzialert.com/wp-content/uploads/2023/06/WuzziAlert-Pebbles-groen-alarmapparaatje.jpg”,url:”https://wuzzialert.com/product/alarm/pebbles-groen/”,bestel:”https://order.wuzzialert.com/bestellen/pebbles/groen/koop”},
{kleur:”Roze”,hex:”#eb5297″,img:”https://wuzzialert.com/wp-content/uploads/2023/06/WuzziAlert-Pebbles-roze-alarmapparaatje.jpg”,url:”https://wuzzialert.com/product/alarm/pebbles-roze/”,bestel:”https://order.wuzzialert.com/bestellen/pebbles/roze/koop”}
]},
navi:{naam:”Navi”,prijs:110,badge:”Modern & handzaam”,vorm:”hals”,claim:”Modern vormgegeven, met GPS”,
feats:[“Eigentijdse vorm, ligt prettig in de hand”,”Aan een koord of aan de kleding”,”Met GPS-locatiebepaling voor snelle hulp”],
varianten:[
{kleur:”Wit”,hex:”#eeeeee”,img:”https://wuzzialert.com/wp-content/uploads/2023/07/Wuzzi-Alert-persoonsalarm-Navi-wit-alarmknop.jpg”,url:”https://wuzzialert.com/product/alarm/navi-wit/”,bestel:”https://order.wuzzialert.com/bestellen/navi/wit/koop”},
{kleur:”Zwart”,hex:”#1e1e1e”,img:”https://wuzzialert.com/wp-content/uploads/2023/07/Wuzzi-Alert-persoonsalarm-Navi-zwart-alarmknop16.jpg”,url:”https://wuzzialert.com/product/alarm/navi-zwart/”,bestel:”https://order.wuzzialert.com/bestellen/navi/zwart/koop”}
]},
indi:{naam:”Indi”,prijs:100,badge:”Meest discreet”,vorm:”horloge”,claim:”Oogt als een gewoon horloge”,
feats:[“Ziet eruit als een regulier horloge”,”Touchscreen met knop aan de zijkant”,”Onopvallend, ideaal voor elke dag”],
varianten:[
{kleur:”Zwart”,hex:”#1e1e1e”,img:”https://wuzzialert.com/wp-content/uploads/2023/06/WuzziAlert-Indi-zwart-alarmhorloge.jpg”,url:”https://wuzzialert.com/product/alarm/indi/”,bestel:”https://order.wuzzialert.com/bestellen/indi/zwart/koop”},
{kleur:”Platina”,hex:”#b9bcc0″,img:”https://wuzzialert.com/wp-content/uploads/2023/08/Wuzzi-Alert-Indi-Platina.jpg”,url:”https://wuzzialert.com/product/alarm/indi-platina/”,bestel:”https://order.wuzzialert.com/bestellen/indi/platina-grijs/koop”}
]},
orion:{naam:”Orion”,prijs:150,badge:”Meeste functies”,vorm:”horloge”,claim:”Met hartslag en stappenteller”,
feats:[“Stoer alarmhorloge met touchscreen”,”Hartslagmeting (niet medisch) en stappen”,”Voor de actieve drager die meer wil”],
varianten:[
{kleur:”Zwart”,hex:”#1e1e1e”,img:”https://wuzzialert.com/wp-content/uploads/2023/06/WuzziAlert-Orion-zwart-alarmhorloge.jpg”,url:”https://wuzzialert.com/product/alarm/orion-zwart/”,bestel:”https://order.wuzzialert.com/bestellen/orion/zwart/koop”},
{kleur:”Bruin”,hex:”#7a5230″,img:”https://wuzzialert.com/wp-content/uploads/2023/08/Wuzzi-Alert-Orion-Bruin-90.jpg”,url:”https://wuzzialert.com/product/alarm/orion-bruin/”,bestel:”https://order.wuzzialert.com/bestellen/orion/zwart-bruin/koop”}
]}
};
var outer=root.querySelector(‘.wzkh-outer’);
var stage=root.querySelector(‘.wzkh-stage’);
var pbar=root.querySelector(‘.wzkh-pbar’);
var vorm=null,curKey=null;
function fit(){stage.style.transform=’scale(‘+(outer.clientWidth/1280)+’)’;}
if(window.ResizeObserver){new ResizeObserver(fit).observe(outer);}else{window.addEventListener(‘resize’,fit);}
fit();
function euro(n){return ‘€ ‘+n+’,-‘;}
function screen(n,pct){
root.querySelectorAll(‘.wzkh-screen’).forEach(function(s){s.classList.toggle(‘wzkh-active’,s.getAttribute(‘data-screen’)===n);});
pbar.style.width=pct+’%’;
}
function step1(){vorm=null;screen(‘1′,0);}
function buildStep2(){
var paar = vorm===’hals’?[‘pebbles’,’navi’]:[‘indi’,’orion’];
root.querySelector(‘[data-el=”q2sub”]’).textContent = vorm===’hals’?’Twee manieren om aan de hals te dragen.’:’Twee alarmhorloges. Kies wat bij u past.’;
var h=”;
paar.forEach(function(k){var p=products[k];
h+=’‘;
});
root.querySelector(‘[data-el=”pair”]’).innerHTML=h;
screen(‘2′,50);
}
function buildResult(key){
curKey=key;
var p=products[key];
var paar=p.vorm===’hals’?[‘pebbles’,’navi’]:[‘indi’,’orion’];
var alt=products[paar.filter(function(k){return k!==key;})[0]];
var eenmalig=p.prijs+AANSLUIT;
var sw=”;
p.varianten.forEach(function(v,i){sw+=’‘;});
var html=’
Keuzehulp
Altijd bij je
Stap 1 van 2
Hoe draagt u het alarm het liefst?
Zo tonen we alleen de apparaten die bij u passen.
‘
+’
‘
+’
‘;
root.querySelector(‘[data-el=”result”]’).innerHTML=html;
screen(‘R’,100);
}
function setColor(i){
var v=products[curKey].varianten[i];
root.querySelector(‘[data-el=”recimg”]’).src=v.img;
root.querySelector(‘[data-el=”kleur”]’).textContent=v.kleur;
root.querySelector(‘[data-el=”bestel”]’).href=v.bestel;
root.querySelector(‘[data-el=”info”]’).href=v.url;
root.querySelectorAll(‘.wzkh-sw’).forEach(function(el,idx){el.classList.toggle(‘wzkh-sel’,idx===i);});
}
root.addEventListener(‘click’,function(e){
var t=e.target.closest(‘[data-act]’);
if(!t)return;
var act=t.getAttribute(‘data-act’);
if(act===’vorm’){vorm=t.getAttribute(‘data-vorm’);buildStep2();}
else if(act===’pick’){buildResult(t.getAttribute(‘data-key’));}
else if(act===’color’){e.preventDefault();setColor(parseInt(t.getAttribute(‘data-i’),10));}
else if(act===’step1′){step1();}
});
})();
‘
+’
Onze aanrader voor u
‘
+’‘+p.naam+’
‘
+(p.badge?’‘+p.badge+’
‘:”)
+’- ‘+p.feats.map(function(f){return ‘
- ‘+f+’ ‘;}).join(”)+’
Kies je kleur: ‘+p.varianten[0].kleur+’
‘
+’‘+sw+’
‘
+’‘+euro(eenmalig)+’ eenmalig (apparaat ‘+euro(p.prijs)+’ + ‘+euro(AANSLUIT)+’ aansluitkosten)
‘
+’Werkt met een abonnement vanaf € 9,95 per maand, maandelijks opzegbaar. Bekijk abonnementen
‘
+’‘
+’Bestel de ‘+p.naam+’‘
+’Meer info‘
+’
‘
+’‘
+’
Ook goed: ‘+alt.naam+’ →‘
+’‘
+’
‘
+’Advies of telefonisch bestellen? 088 800 77 88
‘
+’Onze helden
- Eenvoudig alarmeren
- Verstuurd meteen je hulplocatie!
- Direct met elkaar praten
-
TEST
“Aangepaste HTML” (Custom HTML). 2. Plak ALLE onderstaande code (vanaf t/m ). 3. Publiceer of bekijk voorbeeld. In de editor zie je een sandbox-preview, op de live pagina werkt de interactie volledig. Alle CSS is afgeschermd met .wzkh zodat het je thema niet raakt. Plaats het blok bovenaan de pagina voor een 16:9 hero-keuzehulp. –>… Bekijk dit alarmapparaatje