Add your quote form to a React or Next.js site

On a site built with JavaScript, render a spot for the form where it goes, and load LeadVault's script once. The form appears whenever the spot is on the page, also after client-side navigation.

React

// Where the form goes:
<div data-leadvault-form="your-form" />

Load the script once, for example in index.html:

<script src="https://leadvault.com/embed.js" async></script>

Next.js

import Script from "next/script";

export default function QuotePage() {
  return (
    <main>
      <h1>Get your free quote</h1>
      <div data-leadvault-form="your-form" />
      <Script src="https://leadvault.com/embed.js" strategy="afterInteractive" />
    </main>
  );
}

Vue, Svelte and others

Render <div data-leadvault-form="your-form"></div> in the component and add the script tag once to the site's main HTML.

Don't

• Don't rebuild the form's questions in your own components: the form loads from LeadVault and saves each answer as it's given.
• Don't give the spot a fixed height or hidden overflow.

Content-Security-Policy

If your site sends one, add https://leadvault.com to script-src and frame-src.

Check it

The line isn't in the page's HTML, so open the page once in a browser first. Then in LeadVault, under On your website, type its address and press Check a page, and fill the form once on the live page.

Built with an AI? Copy What to tell your website's AI under Install with AI on the form's page. It has all of this, with your own form's name filled in.

Didn't answer it? Ask us.