Home · Install guides · Sites built with AI

Add VANE it to a site an AI built

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.

  1. Build a vane and copy its Vane ID from Embed on your site.
  2. Paste the ID into the prompt builder below, pick where the vane should show, and copy the prompt.
  3. 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 needsA poll your AI writesVANE it
Saving the answersNeeds 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 answerNeeds a shared back end that every visitor reads from.Every visitor sees the live result the moment they answer.
Spam and ballot-stuffingRarely 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 safeAI-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 lawIf 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 questionAsk the AI again, check its work, republish.Edit it in your dashboard. Every page showing it updates at once.
More than yes or noUsually 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 resultsNumbers 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 redesignCustom 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 askYou 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 shows
Your prompt
Please 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

A script inside a React component lands in the wrong place

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.

Previews often block outside scripts

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 Code

Claude 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.

  1. If Claude built your site with Claude Code, skip to Claude Code below.
  2. 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.
  3. Paste the prompt from above into the same chat. Claude adds the embed code to the file.
  4. 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 site

Most 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.

  1. If ChatGPT gave you HTML code, paste the prompt from above into the same chat and ask for the full updated file back.
  2. Save it as index.html (or replace your existing file) and upload it to your host.
  3. 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 Canvas

Gemini'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.

  1. In Canvas, paste the prompt from above and let Gemini update the code.
  2. Open the Code view and copy all of it, or ask Gemini: "Give me this as one complete HTML file."
  3. 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.

  1. Open your project and paste the prompt from above into the Lovable chat.
  2. Check that it loaded embed.js once (in the root route or index.html) and added the text/plain placeholder where the vane goes.
  3. 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 frameworks

Bolt usually builds a React site with Vite, so the loader belongs in index.html and the vane goes in as a placeholder.

  1. Paste the prompt from above into the Bolt chat.
  2. In Code view, check that index.html now loads embed.js just before </body>, and that the placeholder sits in the right component.
  3. 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.js

v0 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.

  1. Paste the prompt from above into the v0 chat.
  2. Check app/layout.tsx has <Script src="https://vaneit.com/embed.js" /> and the page has the text/plain placeholder.
  3. 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 HTML

Replit Agent builds the app and hosts it. Its preview is a real web address, so what you see there is what visitors get.

  1. Paste the prompt from above into the Agent chat.
  2. Check the preview. The vane should appear there.
  3. 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 project

Claude 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.

  1. Open Claude Code in your site's folder and paste the prompt from above.
  2. Review the change it proposes: one loader and one placeholder on a framework site, or one tag on a plain HTML site.
  3. Deploy the way you normally do (for example git push to 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 project

These editors change the files in your project, so there are no platform limits. The vane works wherever the site is hosted.

  1. Open the chat or agent panel in your site's project and paste the prompt from above.
  2. Accept the change after checking it only touched the layout and the page where the vane goes.
  3. 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 site

Framer AI drafts the site, then you add code the Framer way.

  1. For a vane on the page: Insert → Embed, choose HTML, and paste the embed code from your dashboard.
  2. 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.
  3. 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 site

Wix'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.

  1. Follow the Wix guide. It covers each placement with pictures.
  2. Remember that Wix puts embed elements in their own frame, so size the box to fit the card.

Site-wide Custom Code in Wix needs a published site with a connected domain.

Did it work? See the Wix guide for what each placement looks like.

Squarespace Blueprint

Squarespace site

Blueprint AI makes a normal Squarespace site. Add the vane with a Code Block, or with Code Injection for floating.

  1. Follow the Squarespace guide.
  2. 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 site

Hostinger's builder has an embed element for the page and a custom code box for the whole site.

  1. For a vane on the page: add an Embed code element where it should go and paste the embed code.
  2. For a floating vane: open ⋯ → Integrations → Custom code and paste the embed code with data-place="float-br".
  3. 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 site

GoDaddy's AI builds a Websites + Marketing site. Add an HTML section and paste the embed code into its Custom Code box.

  1. Add a section, search for HTML, and add it where the vane should go.
  2. Paste the embed code with data-place="section" so the card shows open.
  3. 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 Elementor

10Web builds a WordPress site with an Elementor-based editor, so the WordPress route works.

  1. Drag an HTML widget to where the vane should go and paste the embed code.
  2. Or install the VANE it plugin as in the WordPress guide.
  3. 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?