Embed a survey on your website

A Votense survey can live on your own site instead of behind a link. The survey runs inside an iframe, so your CSS cannot break it and it cannot break your page — the approach most embeddable survey tools use.

The script: a survey that resizes itself

This is the snippet to use unless something stops you. The loader injects the iframe and then listens for height messages from it, so the frame grows as fields expand, validation messages appear, and the confirmation replaces the survey. There is never an inner scrollbar and never a height for you to guess at.

The script is dependency-free and under 4 KB. It adds one global, SeagitForms, touches nothing else on your page, and is wrapped so that a failure means the survey does not appear rather than your page breaking. It is cached for ten minutes, so a fix reaches every site that embeds a survey within minutes.

<div data-seagit-form="demo-poll"></div>
<script src="https://votense.com/embed.js" async></script>

The iframe: works where scripts do not

Some hosts strip <script> tags — Notion, and the cheaper tiers of several website builders. A plain iframe still works there, and needs nothing from us at all.

The trade is height. Without the script there is no way for the survey to tell your page how tall it has become, so you set a fixed height. Pick one that fits the longest state of your survey, which is usually the survey with every validation message showing. Too small and respondents get a scrollbar inside the frame; too large and you get white space under it.

<iframe
  src="https://votense.com/embed/demo-poll"
  width="100%"
  height="600"
  style="border:0"
  title="Form"
></iframe>

Embedding a password-protected survey

A private survey embeds with the same snippet — nothing extra to configure. What respondents meet inside the frame is the password gate, and the survey appears in its place once they enter the password. The demo below is a real private form, so this is the actual gate rather than a picture of one.

The questions are not sent to the browser until the password is accepted. They are not in the page source, and they are not in the embed's server-rendered data — a private survey embedded on a public page gives away nothing but its existence. That is the point of the gate: knowing where the survey is must not be enough to read it.

Which one should I use?

Options you can set on the placeholder

All four are optional. data-seagit-height only sets the height before the first measurement arrives — after that the survey sizes itself — so it is worth setting only if you want to avoid a visible jump on a slow connection.

<div
  data-seagit-form="demo-poll"
  data-seagit-theme="light"
  data-seagit-height="480"
  data-seagit-title="Team poll"
></div>
<script src="https://votense.com/embed.js" async></script>

Why is my embedded survey an empty box?

Nine times in ten it is the allowed-sites list in Settings → Embed. When that list is not empty and does not include the site doing the embedding, the browser refuses to load the frame before any of our code runs. Nothing can be rendered in its place, so the visitor sees a blank rectangle and no error appears anywhere — not in your console, not in ours.

An empty list means every site may embed the survey, which is why a freshly pasted snippet works with no configuration. The list is an opt-in restriction: the moment you add one entry, everywhere else is blocked.

Reacting to a submission on your own page

With the script embed, the survey tells your page when someone completes it, so you can fire your own analytics or move the visitor on. Two messages are sent: seagit:resize as the height changes, and seagit:submitted once. Both carry v: 1 so a future change to the format is recognisable rather than guessed at.

No answers ever cross that boundary — the messages carry a height and nothing else. Always check event.origin before acting on any message, as below, or another frame on your page could impersonate the survey.

window.addEventListener('message', function (event) {
  if (event.origin !== 'https://votense.com') return;

  if (event.data && event.data.type === 'seagit:submitted') {
    // The visitor completed the form. Fire your own analytics, or redirect.
    console.log('survey submitted');
  }
});

What respondents see

The embedded survey has no Votense navigation, header or footer — only your survey on a transparent background, plus a small “Powered by Votense” link that opens in a new tab so nobody loses a half-completed survey by clicking it. Submissions are stored, exported and forwarded to your webhooks and Slack channels exactly as they are from the hosted link. An embedded survey is the same survey, in a different place.