Eén regel HTML. Geen framework, geen build, geen cookie. De widget tekent zich in een shadow root, dus jouw stylesheet en de onze kunnen elkaar niet raken.
Plak dit in de pagina, precies op de plek waar de widget moet verschijnen. Meer is er niet. De slug staat in het portaal onder Instellingen → Aanvraagformulieren, naast de knop die deze regel voor je genereert. Bouw je in React, Next.js of Vue, gebruik dan placeholders — zie verderop.
<script src="https://app.zinevu.com/w.js" async
data-zv="JOUW_FORMULIER_SLUG"
data-widget="size"
data-url="https://offerte.jouwbedrijf.nl/q/JOUW_FORMULIER_SLUG"></script>data-url is het adres waar de bezoeker heen gaat. Laat het staan: het is ook het vangnet als de widget de instellingen even niet kan ophalen — dan toont hij een werkende knop in plaats van een gat in je pagina.
Kies met data-widget. Ze delen dezelfde kaart en dezelfde attributen; ze verschillen in wat ze vragen en wat ze teruggeven.
sizeVraagt breedte en diepte en stuurt de bezoeker naar het formulier met die maten al ingevuld.
De standaardkeuze. Werkt in een zijbalk, tussen twee alinea's of als hero-blok op een productpagina.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="size"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG"></script>priceZelfde maatvraag, maar toont ook een indicatieprijs voor de standaarduitvoering op die maat.
Op een pagina waar bezoekers afhaken omdat ze geen idee hebben van de orde van grootte.
Werkt alleen als de dealer publieke prijzen heeft aangezet voor dit formulier. Staat die schakelaar uit, dan valt de widget netjes terug op de knop — hij toont nooit een verzonnen getal.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="price"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG"></script>matchVraagt een maat en zegt of die uit voorraadpanelen te bouwen is of maatwerk wordt.
Glazen schuifwanden. Een bezoeker die een voorraadmaat heeft, kan direct door naar je webshop.
Alleen beschikbaar voor formulieren van het type glazen schuifwand.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="match"
data-shop="https://jouwbedrijf.nl/p/schuifwand?b={width}&h={height}"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG"></script>questionToont één vraag uit het formulier — bijvoorbeeld het dakmateriaal — en geeft het antwoord mee aan de funnel.
Op een pagina die over precies dat onderwerp gaat. De bezoeker begint met een keuze die hij toch al aan het maken was.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="question" data-step="roof"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG"></script>ctaEen knop of balk die naar de funnel gaat. Vraagt niets.
Site-breed, in een footer of onder elke productpagina. Dit is de widget die op elke pagina mag staan.
Met data-url doet deze widget geen enkele netwerkaanvraag — hij tekent meteen. Met data-mode="floating" wordt het een zwevende knop rechtsonder, die in een footer op elke pagina kan staan zonder iets te verschuiven.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="cta" data-open="drawer"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG"></script>formDe hele funnel in een kader op je eigen pagina. De bezoeker verlaat je site niet.
Een landingspagina die maar één doel heeft, of je eigen funnelpagina voor data-open="page". Geef hem ruimte — dit is geen zijbalk-widget.
Het kader groeit standaard mee met de funnel. Met data-height="fill" wordt het schermhoog, met een getal of CSS-lengte krijgt het een vaste hoogte. Met data-target="3d" is het kader standaard schermhoog, en de funnel kan zelf om schermhoog vragen zolang je geen vaste hoogte gaf. Heeft je site een vaste header, geef dan data-offset mee met de hoogte ervan in pixels.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="form"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG"></script>Met data-target="onepage" staat in het kader hetzelfde formulier met alle vragen onder elkaar. Elke vraag is ingeklapt tot het antwoord dat erin staat — met de andere opties ernaast — dus het kader blijft kort en de bezoeker ziet in één oogopslag wat er gekozen is. Geef het kader minstens 1000px breed, dan komt de tekening naast de vragen te staan in plaats van erboven.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="form" data-target="onepage"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG/direct/veranda"></script>bookStuurt naar de showroom-agenda, waar de bezoeker zelf een moment kiest.
Op de contact- of showroompagina.
De enige widget zonder data-zv — de afsprakenpagina is geen aanvraagformulier en heeft een eigen adres (portaal → Instellingen → Showroom). data-url is hier verplicht.
<script src="https://app.zinevu.com/w.js" async
data-widget="book"
data-url="https://offerte.jouwbedrijf.nl/afspraak/SHOWROOM_SLUG"></script>appointmentDe afsprakenagenda voor gratis inmeten, een adviesgesprek aan huis, een terugbelafspraak of een showroombezoek. De bezoeker kiest een dag en tijd; voor een huisbezoek eerst de postcode, zodat alleen dagen verschijnen waarop jullie in de buurt zijn. Elke boeking komt als lead in het portaal.
Op de werkwijze-, contact- of landingspagina — of met data-mode="floating" in de footer, zodat de knop op elke pagina staat.
Zonder data-zv. De link komt uit portaal → Instellingen → Afspraken (publieke boekingslink aanzetten per afspraaktype); portaal → Marketing → Widgets bouwt de code. Na een boeking volgt een dataLayer-event zinevu_appointment_booked met alleen het afspraaktype en de status (zie Events).
<script src="https://app.zinevu.com/w.js" async
data-widget="appointment" data-mode="popup"
data-url="https://offerte.jouwbedrijf.nl/afspraak/AFSPRAAK_SLUG"></script>chatEen chatknop in de hoek van de pagina. De bezoeker stelt zijn vraag, jullie antwoorden vanuit het portaal of de app — en zien meteen op welke pagina hij staat.
Site-breed. Deze snippet hoort één keer in je layout of je header, net als een analytics-tag; hij tekent niets op de plek van de code zelf.
Zet de chat eerst aan bij portaal → Instellingen → Live chat en vink daar „Eigen website” aan — anders verschijnt er niets. De begroeting, de openingstijden en de talen staan in diezelfde instellingen, niet in de code: één wijziging daar geldt meteen voor je hele site. Tot de bezoeker de knop indrukt, slaat de widget niets op.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="chat"></script>Alles wordt gelezen van de scripttag zelf, of van het placeholder-element. Onbekende waarden worden genegeerd in plaats van geraden — een typefout in data-theme geeft het lichte thema, een onbekende data-open gewoon navigate, geen kapotte widget.
| Attribuut | Geldt voor | Waarde | Weggelaten | Wat het doet |
|---|---|---|---|---|
data-zinevu | placeholder-element | geen waarde nodig | het element blijft een gewoon element | Maakt van een element een widget, zodra w.js één keer op de pagina staat. Placeholders die later verschijnen worden vanzelf gemount. |
data-zvVerplicht. Zonder dit tekent de widget niets en zegt waarom in de console. | alle behalve book en appointment | 16–40 letters en cijfers · auto | de widget tekent niets — behalve een form-placeholder op je funnelpagina, die de slug uit zv_form in het adres neemt | De slug van het aanvraagformulier. Te vinden in het portaal bij het formulier zelf. auto (of weglaten) alleen op een form-placeholder op je eigen funnelpagina. |
data-widget | alle | size · price · match · question · cta · form · book · appointment · chat | size | Welke widget getekend wordt. |
data-url | alle · verplicht bij book en appointment | volledige URL | de widget vraagt zelf het adres op | Waar de bezoeker heen gaat. Ook het vangnet als de instellingen niet opgehaald kunnen worden, en bij cta en form scheelt het een netwerkaanvraag. |
data-mount | alleen losse scripttag | CSS-selector | de plek van de scripttag zelf | Zet de widget in een bestaand element. Matcht de selector niets, dan tekent de widget niet en zegt waarom in de console. |
data-locale | alle | auto · nl · en · de · fr · tr | losse scripttag: nl · placeholder: auto | De taal van de widget én van de funnel waarnaar hij doorstuurt. Met auto leest de widget in welke taal je pagina staat — een taalwisselaar, WPML, Polylang, GTranslate, Google Translate — en verandert mee zodra de bezoeker wisselt. Welke talen er echt zijn, bepaalt de dealer (portaal → instellingen → aanvraagformulieren): vraagt je pagina om een taal die niet aanstaat, dan komt de widget terug in een taal die dat wel is. |
data-target | alle | 3d · onepage · quick | form · een placeholder op je funnelpagina volgt zv_target | Stuurt door naar de 3D-configurator, met onepage naar hetzelfde formulier met alle vragen op één pagina, of met quick naar de snelle offerte (maat, budget, gegevens — beantwoord met pakketten binnen het budget), in plaats van naar het vlakke stappenformulier. Draait het formulier geen snelle offerte, dan gaat quick naar het gewone formulier. |
data-ref | alle | eigen tekst, max 120 tekens | geen | Jouw eigen kenmerk voor dit bezoek. Het reist mee naar de aanvraag en komt terug op de zinevu:lead-gebeurtenis, zodat je pagina weet wélk bezoek een aanvraag werd — iets wat wij je niet vertellen, omdat wij over de bezoeker niets zeggen. Wij lezen het nooit, we dragen het alleen. Staat het er al op (een knop eerder in de route gaf het mee), dan blijft dat eerste kenmerk staan. |
data-step | alle · vereist bij question | stapsleutel | de funnel opent op stap één | Opent de funnel bij een bepaalde vraag. Bij question bepaalt het welke vraag de widget toont. |
data-theme | alle | dark | licht | Donkere variant, voor een donkere sectie op je site. |
data-accent | alle | #rrggbb | de accentkleur van het formulier | Overschrijft de accentkleur. Alleen zes hexcijfers; de tekstkleur op de knop wordt zelf berekend, dus een lichte huisstijlkleur krijgt zwarte letters in plaats van onleesbaar wit. |
data-layout | alle | hero | card | Zet naast de kaart een tweede kolom voor een kop, een uitleg en een geruststelling. Alleen zichtbaar als je ook data-title, data-intro of data-note meegeeft. |
data-title | alle | vrije tekst | de standaardtekst | De kop boven de widget. |
data-label | alle | vrije tekst | de standaardtekst | Het opschrift van de knop. |
data-intro | layout hero | vrije tekst | geen tweede kolom | De zin die de bezoeker overhaalt om de widget te gebruiken. |
data-note | layout hero | vrije tekst | — | De kleine regel eronder: levertijd, vrijblijvend, garantie. |
data-open | alle behalve form · bij book en appointment alleen drawer en modal | navigate · page · drawer · modal | navigate | Waar de funnel opent: het funnel-adres in hetzelfde tabblad, je eigen funnelpagina (met data-page), een paneel van de zijkant of een gecentreerd paneel. Een paneel is bewust nooit de standaard. Zie Waar de funnel opent. |
data-page | data-open="page" | pad of URL van je funnelpagina | data-open valt terug op navigate, met een melding in de console | Je eigen pagina met een form-placeholder erop. De bezoeker gaat erheen met zijn antwoorden, zv_form en zv_target in het adres. |
data-modal | zoals data-open | 1 | uit | De oude schrijfwijze van data-open="modal". Werkt nog steeds; staat data-open er ook, dan gaat dat voor. |
data-mode | appointment · cta | inline · popup · floating (cta: floating) | appointment: inline · cta: een kaart met knop | Hoe de widget verschijnt: in de pagina, als knop die een paneel opent, of als zwevende knop rechtsonder die in een footer op elke pagina kan staan. Een zwevende afsprakenknop opent een paneel; een zwevende cta volgt data-open. |
data-position | chat | right · left | rechtsonder | In welke hoek de chatknop staat. Met data-side en data-bottom (pixels, standaard 20) schuif je hem weg van iets anders dat al in die hoek staat — een cookiebalk of een terug-naar-boven-knop. |
data-height | form · book en appointment in de pagina | auto · fill · getal (px) · CSS-lengte | auto — schermhoog bij data-target="3d" | auto groeit mee met de funnel. fill maakt het kader schermhoog, min data-offset. Een vaste hoogte blijft staan, ook als de funnel zelf om schermhoog vraagt. |
data-offset | form · book en appointment in de pagina | getal (px) | 0 | De hoogte van de vaste header van je site. Een schermhoog kader wordt zoveel korter, en als de funnel naar zijn kader scrolt, stopt dat zoveel onder de bovenrand. |
data-name · data-email · data-postcode | appointment | vrije tekst | leeg | Vult de agenda alvast in met wat je eigen pagina al weet, bijvoorbeeld van een ingelogde klant. Er wordt niets van de bezoeker uitgelezen. |
data-ar | alleen met data-target="3d" | 1 | uit | Opent de 3D-configurator meteen in AR, zodat de bezoeker het product op ware grootte in zijn eigen tuin ziet. Bij het vlakke formulier genegeerd. |
data-shop | match | URL met {width} {height} {panels} {pane_width} {pane_height} | geen webshoplink | Waar een bezoeker met een voorraadmaat naartoe mag. Verschijnt alleen als de maat écht uit voorraad te bouwen is. |
data-shop-label | match | vrije tekst | de standaardtekst | Het opschrift van die link. |
data-cart | match | URL op je eigen domein | geen winkelwagenknop | Je eigen eindpunt dat de maat ontvangt en antwoordt waar de bezoeker heen moet. Alles wat bepaalt of het artikel mag bestaan en wat het kost, gebeurt daar — server-side, op jouw domein. |
data-product | match | product-id | geen winkelwagenknop | Welk artikel je eindpunt in de wagen legt. Zonder data-cart én data-product verschijnt de knop niet. |
data-origin | alle | origin, zoals https://app.zinevu.com | het adres waar w.js vandaan komt (anders https://app.zinevu.com) | Geavanceerd: haalt instellingen, richtprijs en maatcheck op bij een andere API-origin. Normaal laat je dit weg. |
Standaard verschijnt de widget precies waar de scripttag staat. Dat is wat de installatie één plakactie maakt — je zet de regel waar je het blok wilt zien.
<!-- vanuit een headerveld, met een doel op de pagina -->
<div id="offerte-blok"></div>
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="size"
data-mount="#offerte-blok"
data-url="https://offerte.jouwbedrijf.nl/q/SLUG"></script>Op een site die zijn eigen markup rendert en navigeert zonder te herladen, kan de scripttag niet zelf de widget zijn. React ontdubbelt identieke async-scripts, dus een tweede tag op dezelfde pagina draait nooit, en een navigatie aan de clientkant draait de eerste niet opnieuw. Laad de loader daar één keer, en zet een placeholder waar een widget moet komen.
<!-- één keer, bijvoorbeeld in je root-layout -->
<script src="https://app.zinevu.com/w.js" async></script>
<!-- overal waar een widget moet verschijnen -->
<div data-zinevu data-zv="SLUG" data-widget="price"></div>
<div data-zinevu data-zv="SLUG" data-widget="question"
data-step="roof" data-open="drawer"></div>Dezelfde placeholders, met de hand. Handig als je zelf bepaalt wanneer een component in beeld komt, of de funnel wilt openen vanuit je eigen knop. De opties zijn de data-attributen zonder het voorvoegsel: { zv, widget, target: "3d", open: "drawer" }. Een naam in camelCase wordt met streepjes geschreven (shopLabel → data-shop-label) en true wordt "1".
// React: mounten en weer opruimen
useEffect(() => {
const el = ref.current;
window.Zinevu?.mount(el, { zv: "SLUG", widget: "size", target: "3d" });
return () => window.Zinevu?.unmount(el);
}, []);
// je eigen knop opent de 3D-configurator in een zijpaneel
button.addEventListener("click", () => {
Zinevu.open({ zv: "SLUG", target: "3d", open: "drawer" });
});Wat er gebeurt als de bezoeker een widget heeft ingevuld, kies je met data-open. Het geldt voor elke widget die doorstuurt — size, price, match, question en cta. Bij book en appointment maken drawer en modal er een knop van die een paneel opent.
<!-- productpagina: de maatbox stuurt naar je eigen funnelpagina -->
<div data-zinevu data-zv="SLUG" data-widget="size"
data-open="page" data-page="/offerte"></div>
<!-- /offerte: één placeholder voor elk formulier,
72px vaste header boven de pagina -->
<div data-zinevu data-widget="form" data-zv="auto"
data-offset="72"></div>Opent iemand je funnelpagina rechtstreeks, zonder zv_form in het adres, dan weet een auto-placeholder niet welk formulier bedoeld is en tekent hij niets. Staat er maar één formulier op je site, geef dan gewoon de slug mee.
De shadow root houdt je stylesheet buiten, op twee gedeclareerde deuren na. CSS custom properties gaan wél door een shadow-grens heen: zet ze op de placeholder, op een sectie of op :root. Voor wat die niet kunnen zeggen zijn er ::part()-namen. Zet je niets, dan ziet de widget eruit zoals altijd.
.offerte-sectie {
--zinevu-accent: #0f766e;
--zinevu-radius: 8px;
--zinevu-control-radius: 6px;
--zinevu-shadow: none;
--zinevu-heading-font: Georgia, serif;
}
/* ::part() hangt aan het host-element */
[data-zinevu]::part(button),
[data-zinevu-widget]::part(button) {
text-transform: uppercase;
letter-spacing: 0.04em;
}Het host-element is [data-zinevu] bij een placeholder, [data-zinevu-widget] bij een losse scripttag en [data-zinevu-open] bij Zinevu.open(). Zet de variabelen in je stylesheet, niet pas later met JavaScript: of jouw accentkleur voorgaat, wordt bepaald op het moment dat de widget tekent.
De widget meet zelf niets en verstuurt niets. Wat er gebeurt, meldt hij aan jouw pagina — twee keer, voor de twee soorten sites: een dataLayer-push voor een Tag Manager-container, en een DOM-event op document met een detail voor een site die zijn eigen analytics bedraadt. Jouw tags, en de consentregels waaronder die draaien, bepalen wat er daarna gebeurt.
// Tag Manager: trigger op Custom Event "zinevu_lead"
// dataLayer.push({ event: "zinevu_lead", zv_form_type: "…", zv_surface: "…" })
// Of zelf, met gtag:
document.addEventListener("zinevu:lead", (e) => {
gtag("event", "generate_lead", { form_type: e.detail.form_type });
});Welk product en welke plek — nooit wie, nooit een bedrag.
Het is één scripttag, dus overal waar je HTML kwijt kunt werkt het. Dit zijn de plekken waar dat per systeem zit.
Let op bij optimalisatie-plug-ins. Zet de widget uit in "defer JS" of "combine scripts": de tag heeft zijn eigen plek in de pagina nodig en verliest die als hij verplaatst of samengevoegd wordt.
Wil je de maatcheck naar je eigen wagen laten schrijven, laat data-cart dan naar een eindpunt op je eigen domein wijzen. De prijs en de voorraad horen daar bepaald te worden, niet in de browser.
Wil je zelf bepalen wanneer een widget komt en gaat, gebruik dan Zinevu.mount en Zinevu.unmount — zie window.Zinevu.
De widget weet niets over de bezoeker. Er wordt geen cookie gezet, geen localStorage aangeraakt, geen identifier aangemaakt en geen beacon verstuurd. Zijn instellingen komen uit een publieke leesactie die voor iedereen exact hetzelfde antwoord geeft; de richtprijs en de maatcheck sturen alleen de ingevulde maat mee.
Dit is een bewuste eigenschap, geen toevallige. Zodra de widget iets over de bezoeker zou opslaan of versturen, heeft elke site die hem draait een consentpoort ervoor nodig.
Een bezoeker die op jouw site landt via een advertentie en dan op de widget klikt, zou in de funnel aankomen zonder klik-id en met jouw eigen site als herkomst. De lead uit die betaalde klik leest dan als direct verkeer, en de verkoop die er weken later uit komt is nooit meer aan de campagne toe te rekenen.
Onder Instellingen → Aanvraagformulieren zit een generator met live voorbeeld: kies het type, de kleur en de teksten, en kopieer de regel. Dit is dezelfde regel als hierboven, met de slug er al in.