If Claude, ChatGPT, Lovable or another AI built your site, the quickest way in is to ask that AI to add the vane. You don't need to read any code. The prompt below already tells the AI how to add it properly, including the one step AIs usually get wrong on React sites.
- Build a vane and copy its Vane ID from Embed on your site.
- Paste the ID into the prompt builder below, pick where the vane should show, and copy the prompt.
- Paste the prompt into the same AI chat or project that built your site, then publish and check your live site.
Your AI can build a poll. Here's what it leaves out.
Ask any AI for a poll and you'll have buttons in a minute. The buttons are the easy part. The hard part is everything behind them: saving the answers, stopping spam, keeping the data safe and legal, and making the results worth reading. That's what VANE it is.
| What the poll needs | A poll your AI writes | VANE it |
|---|---|---|
| Saving the answers | Needs a database and a server. Without them, votes vanish on refresh or stay in that one visitor's browser. | Stored for you from the first tap, with nothing to set up. |
| Showing the crowd's answer | Needs a shared back end that every visitor reads from. | Every visitor sees the live result the moment they answer. |
| Spam and ballot-stuffing | Rarely handled. One person with a script can vote a thousand times. | Every answer is checked on our servers and rate-limited, and returning visitors see the result, not the question. |
| Keeping the data safe | AI-written back ends often leave the database readable by anyone who looks at the page's code. | Each account's data is locked to it by database rules. Visitors can't read raw answers. |
| Privacy law | If it stores IP addresses or personal details, GDPR and California compliance is on you. | No cookies, no stored IP addresses, a ready data processing addendum and privacy wording to paste. |
| Changing the question | Ask the AI again, check its work, republish. | Edit it in your dashboard. Every page showing it updates at once. |
| More than yes or no | Usually yes/no or multiple choice. | 21 formats, including This or That, Slider Scale, Caption This, Pin the Spot and Build It, all tested on phones. |
| Reading the results | Numbers in a table, if you built one. | A dashboard with every vane's results, one-click export, and a check that tells you it's live on your site. |
| Surviving a redesign | Custom code gets rewritten or dropped the next time the AI regenerates the page. The answers can go with it. | One line of code. The vane and every answer live with us, so a rebuild can't lose them. |
| Knowing what to ask | You write every question from scratch. | Playbooks with ready questions for 150 kinds of business. |
If you want a quick yes/no poll that only you will look at, have your AI build it. When the answers matter, and you want them saved, protected and easy to read, use VANE it. It's free to start.
Your prompt, ready to paste
Fill in the two boxes and the prompt updates. It works in any AI that can edit your site's files.
In your dashboard, open the vane, then Embed on your site and Copy ID. The vane has to be set live.
Where it showsPlease add a VANE it poll to my website.
Vane ID: YOUR-VANE-ID
Where: in the main content of the home page, after the first section
The embed code is:
<script async src="https://vaneit.com/embed.js" data-vane="YOUR-VANE-ID"></script>
How to add it correctly:
1. If the page is plain HTML, paste the embed code exactly where the poll should appear, as a real script tag. Don't move it into the <head>.
2. If the site uses React, Next.js, Vue, Svelte or another JavaScript framework, don't put the embed code inside a component. The framework either skips it or moves it into the page's head, and the poll ends up at the bottom of the page or nowhere. Do this instead:
a. Load https://vaneit.com/embed.js once for the whole site, in the layout or HTML shell every page shares:
- Vite or plain React: add <script async src="https://vaneit.com/embed.js"></script> to index.html just before </body>.
- Next.js: add <Script src="https://vaneit.com/embed.js" /> from next/script to the root layout.
- TanStack Start: add { src: 'https://vaneit.com/embed.js', async: true } to scripts in the root route's head.
- Anything else: the root layout, once.
b. Where the poll should appear, render this placeholder. The loader finds it and turns it into the poll, including after page changes:
<script type="text/plain" data-vane="YOUR-VANE-ID"></script>
In JSX, write it as a self-closing tag.
3. Don't install an npm package, don't copy the script's contents into the project, and don't change anything else.
4. If the site sets a Content-Security-Policy, allow https://vaneit.com in script-src and img-src, https://vzccllblesgmopqapmja.supabase.co in connect-src and img-src, 'unsafe-inline' in style-src, and data: in font-src.
When you're done, tell me which file you changed and what you added. The poll may not show in your preview window, so I'll check it on the published site. The two things that go wrong
Lovable, Bolt, v0 and most AI app builders make React sites. If the AI pastes the embed code straight into a component, current React moves it into the page's head, so the vane shows up at the very bottom of the page instead of where you asked. Older setups skip it completely. The prompt above uses a placeholder instead, which stays exactly where it's put. If your vane is at the bottom of the page or missing, this is almost always why.
Chat previews such as Claude artifacts, ChatGPT canvas and Gemini canvas run in a locked-down frame, and some builder previews do too. A vane that doesn't show in the preview can still work perfectly on the published site. Always check the live address before you change anything.
Chat assistants
You asked a chatbot for a website and it gave you code, or it edits your files directly.
Claude
HTML files, or edits your project with Claude CodeClaude can make a page two ways. In a chat it shows the page as an artifact. With Claude Code it writes files straight into your project. Only the second one is a real website.
- If Claude built your site with Claude Code, skip to Claude Code below.
- If your site is an artifact in a chat, first ask Claude: "Give me this page as one complete HTML file I can host." Save it as
index.html. - Paste the prompt from above into the same chat. Claude adds the embed code to the file.
- Put the file on any host: your existing web host, Netlify Drop, GitHub Pages, or a Cloudflare Pages site.
The vane won't show inside the artifact itself. Claude artifacts only allow scripts from a few code libraries and block other sites' scripts and iframes, even once published. That's a rule of the artifact viewer, not a fault in your page. The vane appears once the same HTML is on a normal host.
Did it work? Open your hosted page, not the claude.ai link. The vane shows where you asked for it.
ChatGPT
HTML files, or a ChatGPT Sites siteMost people get their page from ChatGPT as HTML code in the chat. Some now publish with ChatGPT Sites, the new hosted site builder for paid plans.
- If ChatGPT gave you HTML code, paste the prompt from above into the same chat and ask for the full updated file back.
- Save it as
index.html(or replace your existing file) and upload it to your host. - If your site is on ChatGPT Sites, paste the prompt into the site's chat and publish.
ChatGPT Sites is brand new and we haven't confirmed it runs outside scripts yet. If the vane doesn't appear on the published site, ask ChatGPT to use the iframe code instead (in your dashboard under Embed anywhere (iframe)), and tell us so we can update this guide. The in-chat code preview is sandboxed, so don't judge by that.
Did it work? Open the address your visitors use. The vane shows where you asked for it.
Gemini
HTML or React apps in CanvasGemini's Canvas builds a page and gives you a share link. The share link is a preview on Google's servers, not your website, and it runs in a locked-down frame.
- In Canvas, paste the prompt from above and let Gemini update the code.
- Open the Code view and copy all of it, or ask Gemini: "Give me this as one complete HTML file."
- Put that file on your own host. If your site is a React project, paste the prompt into whichever tool holds the project.
Don't test on the g.co/gemini share link. Canvas previews are sandboxed and may block other sites' scripts. Check the copy on your own host.
Did it work? On your hosted page, the vane shows where you asked for it.
AI app builders
You describe the site, the tool builds it and hosts it. Most of these make React sites, so the placeholder step matters.
Lovable
React (TanStack Start on new projects)Lovable builds React sites and hosts them. Projects started since mid-2026 use TanStack Start, so there may be no index.html to paste into. The prompt already covers this, so let Lovable's chat do the work.
- Open your project and paste the prompt from above into the Lovable chat.
- Check that it loaded
embed.jsonce (in the root route orindex.html) and added thetext/plainplaceholder where the vane goes. - Click Publish (or Update if it's already live).
Editing code by hand in Lovable needs a paid plan. On the free plan the code view is read-only, so let the chat make the change. If Lovable pastes a normal <script src=…> inside a component, reply: "Use the text/plain placeholder from my first message instead. A script tag inside a React component ends up in the wrong place."
Did it work? Open your published lovable.app address or custom domain. The vane appears after the page loads, and it stays when you click between pages.
Bolt.new
React or other JavaScript frameworksBolt usually builds a React site with Vite, so the loader belongs in index.html and the vane goes in as a placeholder.
- Paste the prompt from above into the Bolt chat.
- In Code view, check that
index.htmlnow loadsembed.jsjust before</body>, and that the placeholder sits in the right component. - Click Deploy (Bolt hosting or Netlify). The script is kept.
Bolt's preview runs inside your browser and may not load other sites' scripts. Test on the deployed address. Code view is read-only in Safari; use Chrome or ask the chat to make edits.
Did it work? On the deployed site, the vane shows where you asked for it.
v0
Next.jsv0 builds Next.js apps and publishes them to Vercel. The loader goes in app/layout.tsx with next/script, which loads it once and keeps it across page changes.
- Paste the prompt from above into the v0 chat.
- Check
app/layout.tsxhas<Script src="https://vaneit.com/embed.js" />and the page has thetext/plainplaceholder. - Click Publish to deploy to Vercel.
v0 previews run the real app, so the vane usually shows in the preview too. If it doesn't, check the published site before changing anything.
Did it work? The vane shows on the page, and it's still there after clicking to another page and back.
Replit
Usually React, sometimes plain HTMLReplit Agent builds the app and hosts it. Its preview is a real web address, so what you see there is what visitors get.
- Paste the prompt from above into the Agent chat.
- Check the preview. The vane should appear there.
- Click Publish (or Republish) to update the live site.
Did it work? On your published replit.app address or custom domain, the vane shows where you asked for it.
AI code editors
The AI works inside your project folder. Paste the prompt and review the change it makes.
Claude Code
Any stack, in your own projectClaude Code reads your project, so it can see whether the site is plain HTML, React, Next.js or something else and add the vane the right way.
- Open Claude Code in your site's folder and paste the prompt from above.
- Review the change it proposes: one loader and one placeholder on a framework site, or one tag on a plain HTML site.
- Deploy the way you normally do (for example
git pushto your host).
Claude Code can also publish a page as a claude.ai artifact. That viewer blocks other sites' scripts, so the vane won't show there. It works on your real site.
Did it work? Run the site locally or open the deployed address. The vane shows where you asked for it.
Cursor, Windsurf and Copilot
Any stack, in your own projectThese editors change the files in your project, so there are no platform limits. The vane works wherever the site is hosted.
- Open the chat or agent panel in your site's project and paste the prompt from above.
- Accept the change after checking it only touched the layout and the page where the vane goes.
- Deploy as usual.
Did it work? On the deployed site (or localhost with an internet connection), the vane shows where you asked for it.
Website builders with AI
The AI drafted the site, but it lives in a normal website builder. Add the vane with that builder's own embed tools. There's no prompt to paste.
Framer
Framer siteFramer AI drafts the site, then you add code the Framer way.
- For a vane on the page: Insert → Embed, choose HTML, and paste the embed code from your dashboard.
- For a floating vane on every page: Site Settings → General → Custom Code, and paste the embed code (with
data-place="float-br") at the end of body. - Publish.
Custom code may need a paid Framer plan. The vane only runs in preview or on the published site, not on the editing canvas.
Did it work? On the published framer.website address or your domain, the vane shows where you placed it.
Wix AI
Wix siteWix's AI builder makes a normal Wix site, so follow the Wix guide. The short version: an Embed code element for a card on the page, or Custom Code in settings for floating.
Squarespace Blueprint
Squarespace siteBlueprint AI makes a normal Squarespace site. Add the vane with a Code Block, or with Code Injection for floating.
- Follow the Squarespace guide.
- Check it logged out or in a private window. Code may not run while you're signed in to the editor.
Scripts in Code Blocks need the Core plan or higher. On Basic, use the iframe code instead.
Did it work? See the Squarespace guide for what each placement looks like.
Hostinger AI Website Builder
Hostinger siteHostinger's builder has an embed element for the page and a custom code box for the whole site.
- For a vane on the page: add an Embed code element where it should go and paste the embed code.
- For a floating vane: open ⋯ → Integrations → Custom code and paste the embed code with
data-place="float-br". - Publish.
The vane only shows in preview or on the live site, not in the editor.
Did it work? On the live site, the vane shows where you placed it.
GoDaddy Airo
GoDaddy Websites + Marketing siteGoDaddy's AI builds a Websites + Marketing site. Add an HTML section and paste the embed code into its Custom Code box.
- Add a section, search for HTML, and add it where the vane should go.
- Paste the embed code with
data-place="section"so the card shows open. - Publish.
GoDaddy puts custom code in its own frame, so floating and on-photo placements stay inside that box. Use the open card.
Did it work? The open card shows in that section on the published site.
10Web
WordPress with Elementor10Web builds a WordPress site with an Elementor-based editor, so the WordPress route works.
- Drag an HTML widget to where the vane should go and paste the embed code.
- Or install the VANE it plugin as in the WordPress guide.
- Update the page.
Did it work? See the WordPress guide for what each placement looks like.
Common questions
Do I need to understand the code the AI writes?
No. Paste the prompt, publish, and look for the vane on your live site. The prompt asks the AI to tell you which file it changed, so if you ever need help you can pass that on.
The AI says it added the vane but I can't see it, or it's at the bottom of the page. What now?
Check three things in order. Open the published site, not the preview. Make sure the vane is set live in your dashboard. Then paste this into the same chat: "The VANE it poll isn't showing. If this is a React, Vue or Next.js site, move embed.js to index.html or the root layout and use the text/plain placeholder instead of a script tag in the component."
Will the AI break my site?
The prompt asks it to add one tag or placeholder and change nothing else. Most builders keep a version history, so you can roll back if something looks wrong. Look at what it changed before you publish.
Can I put more than one vane on the site?
Yes. Build the prompt again with the second vane's ID and paste it. On framework sites the loader only needs adding once; the AI will see it's already there.
Can I change the question later without asking the AI again?
Yes. The question, answers, colours and format all live in your VANE it dashboard and update everywhere automatically. The code on your site never needs to change.
Does it slow down my site?
No. The loader is under 1 KB and everything loads after your page, so it never holds up your content appearing.
Your AI built the site. Let it add the vane.
Build a vane, copy its ID, paste one prompt. Answers show up in your dashboard as they come in.
Start free Using a CMS like Sanity?