This is the whole integration: one script tag, pasted where you want the vane. No framework, no dependencies, no build step, no npm package. If you can edit an HTML file, you can add a vane in under a minute.
<script async src="https://vaneit.com/embed.js"
data-vane="your-vane-id"></script> Step 0: get your snippet
In your VANE it dashboard, open your vane, find Embed on your site, pick a placement, and click Copy code. The vane must be set live; a paused vane renders nothing. No vane yet? Start free, build one, then come back.
Every attribute the tag accepts
| Attribute | What it does |
|---|---|
src | Always https://vaneit.com/embed.js. One small async loader, cached for four hours. |
data-vane | Your vane id, from the Vane ID box on the vane page in your dashboard. Required. |
data-place | Optional. Omit for inline. Otherwise float-br, float-bl, over-tl, over-tr, over-bl, over-br, over-c, or section. |
async | Recommended. Keeps the loader off your critical path so the page paints first. |
Everything else (the question, the format, the colours, the button style) lives in your dashboard and updates on every embed automatically. The tag never changes once pasted.
Inline, where the tag sits
no placement attribute
The simplest case. Put the tag where you want the vane and it renders in the flow at that exact point.
- Open the HTML file or template for the page.
- Paste the snippet exactly where the vane should appear, between your other markup.
- Save and reload. There is no build step and nothing to register.
The tag renders where it sits, so treat it like an <img>. Putting it in the head will not error, but the vane will render at the very bottom of the page rather than where you meant.
Did it work? Reload the page and the hex is inline at that point in the document, sized to your content width.
Pinned to an image corner
data-place="over-br"
The trigger positions itself over its parent element, so the only requirement is that the image and the script share a wrapper.
- Wrap your image in a
<div>if it is not already in one. - Put the snippet inside that same wrapper, directly after the image.
- Save and reload.
You do not need to write any CSS. The loader sets the wrapper to position: relative itself if it is currently static. What matters is that the script tag is a child of the same element as the image, not a sibling of the wrapper.
Did it work? The hex sits over the chosen corner of the image. If it appears below the image instead, the script tag is outside the wrapper. If you use a <figure> with a <figcaption>, the corners pin to the whole figure, caption included; use a <div> around just the image to pin to the picture itself.
Floating on every page
data-place="float-br"
Pinned to the browser corner, following the scroll. Put it in your shared layout or footer include and it appears everywhere.
- Open the shared template, layout, or footer include that every page uses.
- Paste the snippet immediately before the closing
</body>tag. - Save and reload any page.
Position in the document genuinely does not matter for floating placements, but before </body> is the tidiest place for it and keeps it out of the way of your own markup.
Did it work? The hex is pinned to the window corner on every page and stays put while scrolling.
Open section
data-place="section"
The full card, already open, in the flow of the page. No button to press. Treat it like a signup box.
- Pick a spot between two blocks of content, with room above and below.
- Paste the snippet there, on its own line, not inside a paragraph.
- Save and reload.
The card is up to 360px wide and centers itself in its container. It appears after the page loads, so give its wrapper a min-height if you watch layout shift closely.
Did it work? The open card sits between your content with the question and answers showing. Tapping an answer shows the tally in place.
Places that cannot run scripts
Some tools strip script tags but allow iframes: Notion, some CMSs, intranets and wikis. For those, use the iframe instead. On your vane page, under Embed anywhere (iframe), click Copy iframe code and paste it where the vane should go:
<iframe src="https://vaneit.com/v/?id=your-vane-id" width="100%" height="560"
style="border:0;max-width:460px" loading="lazy" title="VANE it"></iframe> The card shows already open in its own box, so floating and on-image placements do not apply there. If the tool asks for a link rather than code, click Copy link instead.
Common questions
Does the script have to go in the head?
No, and it is better if it does not. Put it exactly where you want the vane to appear for inline placements, or just before the closing body tag for floating ones. A tag in the head still works, but the vane then renders at the very bottom of the page. It is async, so it never blocks rendering wherever it sits.
Can I put several vanes on one page?
Yes. Add one script tag per vane, each with its own data-vane id. They do not interfere with each other and the loader is fetched once regardless of how many you add.
Does it need jQuery or any framework?
No. It is vanilla JavaScript with no dependencies and no build step. It works in any page that can run a script tag.
What about Content Security Policy?
If your site sends a Content-Security-Policy header, add these sources: script-src https://vaneit.com; connect-src https://vzccllblesgmopqapmja.supabase.co; style-src 'unsafe-inline'; font-src data:; img-src https://vaneit.com https://vzccllblesgmopqapmja.supabase.co; frame-src https://vaneit.com (the last only if you use the iframe). If you are unsure whether you have a CSP, you almost certainly do not.
My site or tool will not run scripts. Is there another way?
Yes: the iframe. On your vane page, under Embed anywhere (iframe), click Copy iframe code and paste it into any box that accepts HTML (Notion, some CMSs and intranets strip scripts but allow iframes). The card shows already open in its own box, so floating and on-image placements do not apply there.
Will it work offline or on localhost?
On localhost yes, as long as the machine has internet access, because the script and tallies come from vaneit.com. Fully offline it will not render.
How do I remove it?
Delete the script tag. The tally and every reaction stay safe in your VANE it dashboard.
One tag. That is the integration.
Build a vane, copy the line, paste it in. Reactions land in your dashboard live.
Start free React, Next.js and headless