Webflow runs your one-line snippet in a Code Embed element. Drag it in, paste the line, publish. Because you control the element tree directly, pinning a vane to an image corner is simple: you put the Code Embed in the same Div Block as the image.
Add panel (+, or press A) → Elements → Advanced → Code Embed → drag onto the canvas → paste the snippet → Save & Close → Publish.
Why the canvas shows a grey box
Webflow does not run custom code on the Designer canvas. Your Code Embed shows a grey placeholder while you build, no matter how correct the snippet is. That is expected.
Preview does not run custom code either, unless you switch on Enable custom code (bottom left in Preview). So either open Preview (the eye icon) and switch that on, or publish to your webflow.io address. If you judge it from the Designer you will chase a problem that is not there. Everything below assumes you check in Preview with custom code switched on, or on the published site.
Get your snippet from the VANE it dashboard: open the vane, find Embed on your site, pick a placement, hit Copy code. One line:
<script async src="https://vaneit.com/embed.js" data-vane="your-vane-id"></script>
One plan note: both the Code Embed element and the Custom code fields need a paid Site plan, or a Core, Growth, Agency or Freelancer Workspace. On a free Starter site neither is available.
Inline, in a section
no placement attribute
The hex sits exactly where the Code Embed sits in your layout. Start here. It behaves like any other element on the page.
- In the Designer, open the Add panel (+, or press A) → Elements → Advanced → Code Embed.
- Drag it onto the canvas where you want the vane.
- Paste your snippet into the code window and click Save & Close.
- To see it run, open Preview (the eye icon) and switch on Enable custom code (bottom left), or Publish to your webflow.io address.
The Designer canvas shows a grey placeholder, never the live widget. Preview also skips custom code until you switch on Enable custom code. Neither means the snippet is broken.
Did it work? In Preview (with Enable custom code on) or on the published site, the hex shows in the spot where the Code Embed sits, and tapping it opens the card.
On an image
data-place="over-br" (or any corner)
Webflow makes this one simple, because you control the element tree directly. Put the Code Embed inside the same Div Block as the image and the hex pins to that Div Block's corner.
- If your image is not already in its own Div Block: drag a Div Block onto the page, then use the Navigator to drag the Image into it.
- Add a Code Embed (Add panel → Elements → Advanced → Code Embed) and, in the Navigator, drag it inside that Div Block, directly after the Image.
- Paste the snippet with an
over-placement and click Save & Close. - To check the corner, open Preview and switch on Enable custom code (bottom left), or Publish to your webflow.io address.
The hex pins to the corner of the Div Block, not the image itself, so keep the Div Block the same size as the image: no padding, and not wider than the image. You do not need to set position styles; the snippet handles that. Use the Navigator, not the canvas, to confirm the Code Embed is indented inside the Div Block.
Did it work? On the published page the hex sits over the chosen corner of the image. If it appears below the image instead, the Code Embed is next to the Div Block rather than inside it. If it sits away from the image's corner, the Div Block is bigger than the image.
Floating on every page
data-place="float-br" or "float-bl"
The hex pins to the browser corner and follows the scroll across the whole site. This one goes in Site settings rather than on the canvas.
- Go to Site settings → Custom code.
- Paste the snippet into Footer code, the box labelled before
</body>. - Click Save changes, then Publish the site. Custom code never runs on the Designer canvas, so check it on your published site.
- For a single page instead: Page settings → Custom code → Before </body> tag.
If you cannot use the site-wide Custom code fields, put a Code Embed with the floating snippet inside your navbar or footer Component instead. It then appears on every page that uses that navbar or footer. This needs the same paid plan as Custom code.
Did it work? On the published site the hex is pinned to the window corner on every page and stays put while scrolling.
On every CMS item
any placement
Blog posts, case studies, products: add the Code Embed once to the Collection page template and it appears on every item in that collection.
- Open the Collection page template from the Pages panel, not an individual item.
- Drag a Code Embed to where you want it in the template.
- Paste the snippet and Save & Close, then Publish.
- Optional: to vary the question per item, add a plain text field to the collection holding each item’s vane id. In the Code Embed editor, select the id between the quotes in
data-vane="…", click + Add Field (top right) and pick your vane-id field.
With one hardcoded vane id every CMS item shares a single tally, which is usually what you want for a site-wide question. Use the CMS field route only if each post genuinely needs its own separate poll.
Did it work? Publish and open two different posts. Both show the vane; with a single shared id they show the same running tally.
The illustrations above are diagrams of the Webflow Designer, not screenshots. Webflow has no public sandbox we can capture from, so we drew them rather than pass off mockups as real captures. The panel names, the Navigator tree and the steps are accurate.
Common questions
The Code Embed shows a grey box in the Designer. Is it broken?
No. Webflow does not run custom code on the Designer canvas, so a Code Embed shows as a placeholder while you build. Preview does not run it either unless you switch on Enable custom code (bottom left in Preview). Switch that on, or publish to your webflow.io address, and the vane appears. Judging it from the canvas is the most common false alarm.
Do I need a paid plan?
Yes. Both the Code Embed element and the Custom code fields need a paid Site plan, or a Core, Growth, Agency or Freelancer Workspace. On a free Starter site neither is available.
Where should the Code Embed go so it lines up on an image?
Inside the same Div Block as the image, right after the image. The hex pins to the corner of that Div Block, so keep the Div Block the same size as the image: no padding, and not wider than the image. You do not need to touch position styles; the snippet handles that. If the hex lands below the image rather than on it, the Code Embed is next to the Div Block rather than inside it.
Will it slow the site down?
No. It is one small script loaded asynchronously, so the page renders first and the vane arrives after. Nothing render-blocking and no iframe.
Can I reuse the same vane across several pages?
Yes. Copy the Code Embed to each page, or make it a Component so one edit updates everywhere. One vane id means one shared tally across every placement.
How do I remove a vane?
Delete the Code Embed and republish. The tally and every reaction stay safe in your VANE it dashboard.
I edited the vane in my dashboard. Do I need to republish Webflow?
No. The snippet is permanent. Question, design, and trigger changes flow to every embed automatically, usually instantly.
Two minutes from your first reaction
Build a vane, copy one line, drop it in a Code Embed. Publish, and the reactions start landing.
Start free Other platforms