Embedding surveys

The script tag

Copy the snippet from your survey's Share screen, or write it yourself — the only survey-specific part is the id:

<script
  src="https://saveform.io/embed.js"
  data-survey="YOUR_SURVEY_ID"
  async
></script>

The survey renders right where the tag sits. No wrapper element, no stylesheet, no initialisation call — the script derives its origin from its own src and everything else from the attributes.

Embed attributes

How the embed works

Under the hood the script does three things:

React, Vue & Angular

SPA frameworks strip raw <script> tags from templates, so create the element in code after mount:

import { useEffect, useRef } from 'react';

export function SurveyEmbed() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const s = document.createElement('script');
    s.src = 'https://saveform.io/embed.js';
    s.async = true;
    s.dataset.survey = 'YOUR_SURVEY_ID';
    s.dataset.target = '#saveform-survey';
    el.appendChild(s);
    return () => { el.innerHTML = ''; }; // clean up on unmount
  }, []);

  return <div id="saveform-survey" ref={ref} />;
}

The identical pattern works in Vue's onMounted and Angular's ngAfterViewInit — create the script element, set src, async and the data-* attributes, append it once. If your framework serves a static index.html you control, dropping the plain one-liner into the body works too. The framework guides cover the surrounding integration patterns.

WordPress & site builders

Anywhere you can paste HTML, the one-liner works as-is:

Several embeds per page

Multiple script tags on one page are fine, including several different surveys. Each tag manages its own iframe, and resize messages carry the survey id, so two embeds never fight over each other's height.

Troubleshooting