One line of HTML. No framework, no build step, no cookie. The widget draws itself inside a shadow root, so your stylesheet and ours cannot reach each other.
Paste this into the page, exactly where the widget should appear. That is the whole installation. The slug lives in the portal under Settings → Lead forms, next to the button that generates this line for you. Building in React, Next.js or Vue? Use placeholders — see further down.
<script src="https://app.zinevu.com/w.js" async
data-zv="YOUR_FORM_SLUG"
data-widget="size"
data-url="https://offerte.yourcompany.nl/q/YOUR_FORM_SLUG"></script>data-url is where the visitor goes. Keep it: it is also the safety net for the day the widget cannot read its settings — it shows a working button instead of a hole in your page.
Pick one with data-widget. They share the same card and the same attributes; they differ in what they ask and what they hand back.
sizeAsks for width and depth and hands the visitor to the form with those measurements already filled in.
The default choice. Works in a sidebar, between two paragraphs, or as a hero block on a product page.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="size"
data-url="https://offerte.yourcompany.nl/q/SLUG"></script>priceThe same size question, but it also shows what the standard build costs at that size.
On a page where visitors drop out because they have no idea of the order of magnitude.
Only works when the dealer has switched public prices on for this form. With that switch off the widget falls back to the button — it never shows an invented number.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="price"
data-url="https://offerte.yourcompany.nl/q/SLUG"></script>matchAsks for a measurement and says whether it can be built from stock panes or becomes made-to-measure.
Glass sliding walls. A visitor whose measurement is a stock size can go straight to your shop.
Only available on forms of the glass sliding wall type.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="match"
data-shop="https://yourcompany.nl/p/sliding-wall?w={width}&h={height}"
data-url="https://offerte.yourcompany.nl/q/SLUG"></script>questionShows a single question from the form — the roof material, say — and carries the answer into the funnel.
On a page about exactly that subject. The visitor starts with a choice they were making anyway.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="question" data-step="roof"
data-url="https://offerte.yourcompany.nl/q/SLUG"></script>ctaA button or bar that opens the funnel. Asks nothing.
Site-wide, in a footer or under every product page. This is the widget that may sit on every page.
With data-url this widget makes no network request at all — it paints immediately. With data-mode="floating" it becomes a button fixed bottom-right, which can sit in a footer on every page without moving anything.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="cta" data-open="drawer"
data-url="https://offerte.yourcompany.nl/q/SLUG"></script>formThe whole funnel in a frame on your own page. The visitor never leaves your site.
A landing page with a single purpose, or your own funnel page for data-open="page". Give it room — this is not a sidebar widget.
By default the frame grows with the funnel. data-height="fill" makes it a screen tall; a number or CSS length gives it a fixed height. With data-target="3d" the frame is a screen tall by default, and the funnel inside can ask for a screen-tall frame itself as long as you did not set a fixed height. If your site has a fixed header, pass its height in pixels as data-offset.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="form"
data-url="https://offerte.yourcompany.nl/q/SLUG"></script>With data-target="onepage" the frame holds the same form with every question on a single page. Each question is folded down to the answer it holds, with the alternatives beside it, so the frame stays short and the visitor sees the whole configuration at a glance. Give the frame at least 1000px of width and the drawing sits beside the questions instead of above them.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="form" data-target="onepage"
data-url="https://offerte.yourcompany.nl/q/SLUG/direct/veranda"></script>bookSends the visitor to the showroom calendar, where they pick a slot themselves.
On the contact or showroom page.
The only widget without data-zv — the booking page is not a lead form and has its own address (portal → Settings → Showroom). data-url is required here.
<script src="https://app.zinevu.com/w.js" async
data-widget="book"
data-url="https://offerte.yourcompany.nl/afspraak/SHOWROOM_SLUG"></script>appointmentThe booking calendar for a free measurement, a consultation at home, a callback or a showroom visit. The visitor picks a day and time; for a home visit they give their postcode first, so only days you are nearby appear. Every booking arrives in the portal as a lead.
On the how-it-works, contact or landing page — or with data-mode="floating" in the footer, so the button is on every page.
No data-zv. The link comes from portal → Settings → Appointments (switch on the public booking link per appointment type); portal → Marketing → Widgets builds the code. After a booking a dataLayer event zinevu_appointment_booked follows, carrying only the appointment type and its status (see Events).
<script src="https://app.zinevu.com/w.js" async
data-widget="appointment" data-mode="popup"
data-url="https://offerte.yourcompany.nl/afspraak/APPOINTMENT_SLUG"></script>chatA chat button in the corner of the page. The visitor asks their question, you answer from the portal or the app — and see which page they are on while they type.
Site-wide. This snippet belongs in your layout or your header once, like an analytics tag; it draws nothing where the code itself sits.
Switch the chat on first under portal → Settings → Live chat and tick “Your own website” there, or nothing appears. The greeting, the office hours and the languages live in those same settings rather than in the code: one change there applies to your whole site at once. Until the visitor presses the button, the widget stores nothing.
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="chat"></script>Everything is read from the script tag itself, or from the placeholder element. Unknown values are ignored rather than guessed — a typo in data-theme gives you the light theme, an unknown data-open plain navigate, not a broken widget.
| Attribute | Applies to | Value | Left out | What it does |
|---|---|---|---|---|
data-zinevu | placeholder element | no value needed | the element stays a plain element | Turns an element into a widget, once w.js is on the page. Placeholders that appear later are mounted automatically. |
data-zvRequired. Without it the widget draws nothing and says why in the console. | all but book and appointment | 16–40 letters and digits · auto | the widget draws nothing — except a form placeholder on your funnel page, which takes the slug from zv_form in the address | The lead form's slug. Found in the portal on the form itself. auto (or leaving it out) only on a form placeholder on your own funnel page. |
data-widget | all | size · price · match · question · cta · form · book · appointment · chat | size | Which widget is drawn. |
data-url | all · required for book and appointment | absolute URL | the widget asks for the address itself | Where the visitor goes. Also the safety net when settings cannot be read, and for cta and form it saves a network request entirely. |
data-mount | single script tag only | CSS selector | the script tag's own position | Puts the widget inside an existing element. If the selector matches nothing the widget does not draw and says so in the console. |
data-locale | all | auto · nl · en · de · fr · tr | single script tag: nl · placeholder: auto | The language of the widget, and of the funnel it hands over to. With auto the widget reads what language your page is in — a language switcher, WPML, Polylang, GTranslate, Google Translate — and changes with it the moment a visitor switches. Which languages actually exist is the dealer's setting (portal → settings → lead forms): ask for one that is switched off and the widget comes back in one that is on. |
data-target | all | 3d · onepage · quick | form · a placeholder on your funnel page follows zv_target | Hands over to the 3D configurator, with onepage to the same form with every question on one page, or with quick to the quick quote (size, budget, contact details — answered with packages within the budget), instead of the flat step form. If the form does not run the quick quote, quick goes to the ordinary form. |
data-ref | all | your own text, max 120 characters | none | Your own reference for this visit. It travels with the request and comes back on the zinevu:lead event, so your page knows which visit became a request — something we do not tell you, because we say nothing about the visitor. We never read it, we only carry it. If one is already on the address (a button earlier in the route set it), that first reference stays. |
data-step | all · required for question | step key | the funnel opens at step one | Opens the funnel at a given question. On the question widget it decides which question is shown. |
data-theme | all | dark | light | The dark variant, for a dark section on your site. |
data-accent | all | #rrggbb | the form's own accent colour | Overrides the accent colour. Six hex digits only; the text colour on the button is computed from it, so a pale brand colour gets black letters instead of unreadable white. |
data-layout | all | hero | card | Puts a second column beside the card for a heading, an explanation and a reassurance. Only appears if you also pass data-title, data-intro or data-note. |
data-title | all | free text | the built-in text | The heading above the widget. |
data-label | all | free text | the built-in text | The button's caption. |
data-intro | hero layout | free text | no second column | The sentence that makes somebody use the widget. |
data-note | hero layout | free text | — | The small line underneath: lead time, no obligation, warranty. |
data-open | all but form · on book and appointment only drawer and modal | navigate · page · drawer · modal | navigate | Where the funnel opens: the funnel's address in the same tab, your own funnel page (with data-page), a panel from the side, or a centred panel. A panel is deliberately never the default. See Where the funnel opens. |
data-page | data-open="page" | path or URL of your funnel page | data-open falls back to navigate, with a console message | Your own page with a form placeholder on it. The visitor goes there with their answers, zv_form and zv_target in the address. |
data-modal | same as data-open | 1 | off | The old spelling of data-open="modal". Still works; when data-open is also present, data-open wins. |
data-mode | appointment · cta | inline · popup · floating (cta: floating) | appointment: inline · cta: a card with a button | How the widget appears: in the page, as a button that opens a panel, or as a floating button bottom-right that can sit in a footer on every page. A floating booking button opens a panel; a floating cta follows data-open. |
data-position | chat | right · left | bottom right | Which corner the chat button sits in. data-side and data-bottom (pixels, 20 by default) move it clear of anything already there — a cookie bar, or a back-to-top button. |
data-height | form · book and appointment in the page | auto · fill · number (px) · CSS length | auto — a screen tall with data-target="3d" | auto grows with the funnel. fill makes the frame a screen tall, less data-offset. A fixed height stays put, even when the funnel asks for a screen-tall frame itself. |
data-offset | form · book and appointment in the page | number (px) | 0 | The height of your site's fixed header. A screen-tall frame is that much shorter, and when the funnel scrolls to its frame it stops that far below the top. |
data-name · data-email · data-postcode | appointment | free text | empty | Prefills the calendar with what your own page already knows, for example from a logged-in customer. Nothing is read off the visitor. |
data-ar | only with data-target="3d" | 1 | off | Opens the 3D configurator straight into AR, so the visitor sees the product at true size in their own garden. Ignored on the flat form. |
data-shop | match | URL with {width} {height} {panels} {pane_width} {pane_height} | no shop link | Where a visitor with a stock measurement may go. Only appears when the measurement really can be built from stock. |
data-shop-label | match | free text | the built-in text | That link's caption. |
data-cart | match | URL on your own domain | no cart button | Your own endpoint that receives the measurement and answers with where to send the visitor. Everything that decides whether the item may exist and what it costs happens there — server-side, on your domain. |
data-product | match | product id | no cart button | Which article your endpoint adds. Without both data-cart and data-product the button does not appear. |
data-origin | all | origin, e.g. https://app.zinevu.com | the address w.js was loaded from (else https://app.zinevu.com) | Advanced: reads settings, indicative prices and size checks from a different API origin. Normally you leave it out. |
By default the widget appears exactly where the script tag sits. That is what makes the install a single paste — you put the line where you want the block.
<!-- from a header field, with a target on the page -->
<div id="quote-block"></div>
<script src="https://app.zinevu.com/w.js" async
data-zv="SLUG" data-widget="size"
data-mount="#quote-block"
data-url="https://offerte.yourcompany.nl/q/SLUG"></script>On a site that renders its own markup and navigates without reloading, the script tag cannot be the widget itself. React de-duplicates identical async scripts, so a second tag on the same page never runs, and a client-side navigation never re-runs the first. Load the loader once there, and put a placeholder wherever a widget should appear.
<!-- once, for example in your root layout -->
<script src="https://app.zinevu.com/w.js" async></script>
<!-- wherever a widget should appear -->
<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>The same placeholders, by hand. Useful when you decide yourself when a component comes into view, or want to open the funnel from your own button. Options are the data-* attributes without the prefix: { zv, widget, target: "3d", open: "drawer" }. A camelCase name is written with dashes (shopLabel → data-shop-label) and true becomes "1".
// React: mount, and clean up again
useEffect(() => {
const el = ref.current;
window.Zinevu?.mount(el, { zv: "SLUG", widget: "size", target: "3d" });
return () => window.Zinevu?.unmount(el);
}, []);
// your own button opens the 3D configurator in a side panel
button.addEventListener("click", () => {
Zinevu.open({ zv: "SLUG", target: "3d", open: "drawer" });
});What happens once the visitor has answered a widget is chosen with data-open. It applies to every widget that hands off — size, price, match, question and cta. On book and appointment, drawer and modal turn the widget into a button that opens a panel.
<!-- product page: the size box hands off to your own funnel page -->
<div data-zinevu data-zv="SLUG" data-widget="size"
data-open="page" data-page="/quote"></div>
<!-- /quote: one placeholder for every form,
72px fixed header above the page -->
<div data-zinevu data-widget="form" data-zv="auto"
data-offset="72"></div>If somebody opens your funnel page directly, without zv_form in the address, an auto placeholder cannot know which form is meant and draws nothing. If your site has only one form, simply give it the slug.
The shadow root keeps your stylesheet out, with two declared exceptions. CSS custom properties do cross a shadow boundary: set them on the placeholder, on a section or on :root. For anything they cannot say there are ::part() names. Set nothing and the widget looks the way it always has.
.quote-section {
--zinevu-accent: #0f766e;
--zinevu-radius: 8px;
--zinevu-control-radius: 6px;
--zinevu-shadow: none;
--zinevu-heading-font: Georgia, serif;
}
/* ::part() hangs off the host element */
[data-zinevu]::part(button),
[data-zinevu-widget]::part(button) {
text-transform: uppercase;
letter-spacing: 0.04em;
}The host element is [data-zinevu] for a placeholder, [data-zinevu-widget] for a single script tag and [data-zinevu-open] for Zinevu.open(). Set the properties in your stylesheet rather than later from JavaScript: whether your accent colour wins is decided when the widget draws.
The widget measures nothing and sends nothing itself. What happens, it announces to your page — twice, for the two kinds of site: a dataLayer push for a Tag Manager container, and a DOM event on document with a detail for a site that wires its own analytics. Your tags, and the consent rules they run under, decide what happens next.
// Tag Manager: trigger on Custom Event "zinevu_lead"
// dataLayer.push({ event: "zinevu_lead", zv_form_type: "…", zv_surface: "…" })
// Or yourself, with gtag:
document.addEventListener("zinevu:lead", (e) => {
gtag("event", "generate_lead", { form_type: e.detail.form_type });
});Which product and which surface — never who, never an amount.
It is one script tag, so anywhere you can put HTML it works. These are the places that live in each system.
Watch out for optimisation plugins. Exclude the widget from "defer JS" and "combine scripts": the tag needs its own position in the page and loses it when it is moved or merged.
If you want the size check to write into your own cart, point data-cart at an endpoint on your own domain. Price and stock belong there, not in the browser.
If you want to decide yourself when a widget comes and goes, use Zinevu.mount and Zinevu.unmount — see window.Zinevu.
The widget knows nothing about the visitor. No cookie is set, no localStorage is touched, no identifier is minted and no beacon is sent. Its settings come from a public read that returns exactly the same answer for everyone; the price widget and the size check send only the measurement that was typed in.
This is a deliberate property, not an accident. The moment the widget stored or sent anything about the visitor, every site running it would need a consent gate in front of it.
A visitor who lands on your site from an ad and then clicks the widget would arrive in the funnel with no click id and your own site as the referrer. The lead from that paid click reads as direct traffic, and the sale it becomes weeks later can never be reported back to the campaign.
Under Settings → Lead forms there is a generator with a live preview: pick the type, the colour and the wording, and copy the line. It is the same line as above, with the slug already in it.