Embedding Surveys

Embed your survey directly into your website so visitors can answer without leaving your site. One snippet supports five launcher styles.

Getting the Embed Code

1. Open your published survey’s Details page (or the page you land on right after publishing)
2. Click Embed
3. Pick a launcher style and adjust the options
4. Click Copy code and paste the snippet into your site

Only published surveys can be embedded. A draft survey will not load in the frame.

Launcher Styles

Style	What visitors see	Good for
Inline	The survey sits in the page, in the flow of your content	Feedback pages, landing pages, help articles
Popup	A button that opens a centred modal over a dimmed page	Deliberate, focused feedback moments
Slider	A button that slides a drawer in from the side	Long surveys that need room without taking over the page
Side tab	A tab welded to the edge of the screen that opens a drawer	Always-available feedback on every page
Popover	A round bubble in a corner that opens a small card	Lightweight, chat-style prompts

Inline

<script src="https://surveyreflex.com/embed.js"
        data-survey="your-survey-slug"></script>

The survey appears exactly where you paste the snippet. It reports its height to the page as the respondent moves through it, so the frame grows and shrinks with the content instead of sitting in a scrollbox.

To place it somewhere else on the page, point at a container you have already created:

<div id="survey-here"></div>

<script src="https://surveyreflex.com/embed.js"
        data-survey="your-survey-slug"
        data-target="#survey-here"></script>

Popup

<script src="https://surveyreflex.com/embed.js"
        data-survey="your-survey-slug"
        data-mode="popup"
        data-button-text="Give feedback"
        data-button-color="#0d9488"></script>

The launch button is rendered where you paste the snippet.

Slider

<script src="https://surveyreflex.com/embed.js"
        data-survey="your-survey-slug"
        data-mode="slider"
        data-button-text="Give feedback"
        data-position="right"
        data-panel-width="480px"></script>

Side tab

<script src="https://surveyreflex.com/embed.js"
        data-survey="your-survey-slug"
        data-mode="side-tab"
        data-tab-text="Feedback"
        data-position="right"></script>

The tab is fixed to the viewport, so this snippet can live anywhere on the page — just before </body> is the usual spot.

Popover

<script src="https://surveyreflex.com/embed.js"
        data-survey="your-survey-slug"
        data-mode="popover"
        data-button-color="#0d9488"
        data-position="right"></script>

All Options

Every option is an attribute on the <script> tag.

Attribute	Applies to	Default	Description
data-survey	all	—	Required. Your survey’s slug (the last part of its public link)
data-mode	all	inline	inline, popup, slider, side-tab, or popover
data-target	inline, popup, slider	—	CSS selector for where to place the survey or its button
data-height	inline	600px	Frame height when auto-resize is off
data-auto-resize	inline	true	Follow the survey’s own height instead of a fixed one
data-button-text	popup, slider	Open survey	Launch button label
data-tab-text	side-tab	Feedback	Tab label
data-button-color	launchers	#0d9488	Launcher background colour
data-button-text-color	launchers	#ffffff	Launcher text colour
data-position	slider, side-tab, popover	right	left or right
data-panel-width	slider, side-tab	480px	Drawer width
data-panel-height	popup, popover	640px	Panel height
data-auto-open	launchers	—	Milliseconds to wait before opening on its own
data-open-on-scroll	launchers	—	Open once the visitor has scrolled this percentage of the page
data-open-on-exit	launchers	false	Open when the pointer leaves the top of the window (desktop only)
data-once	launchers	false	Hide the launcher for good once someone completes the survey on that device
data-close-on-complete	launchers	4000	Milliseconds to wait after submission before closing. 0 keeps it open
data-hide-close-button	launchers	false	Hide the built-in close button
data-params	all	—	Extra query string passed to the survey, e.g. utm_source=blog
data-id	all	auto	A name you can use with the JavaScript API

Example: ask after someone has read the page

<script src="https://surveyreflex.com/embed.js"
        data-survey="your-survey-slug"
        data-mode="popover"
        data-open-on-scroll="70"
        data-once="true"></script>

Controlling the Widget with JavaScript

The script exposes a small API on window.SurveyReflex:

SurveyReflex.open("feedback");    // open a widget by its data-id
SurveyReflex.close("feedback");
SurveyReflex.toggle("feedback");
SurveyReflex.destroy("feedback"); // remove it from the page

You can also create a widget entirely from code:

SurveyReflex.load({
  survey: "your-survey-slug",
  mode: "popup",
  id: "feedback",
  buttonText: "Tell us what you think",
});

Reacting to a completed response

The page fires a surveyreflex:completed event when someone submits:

window.addEventListener("surveyreflex:completed", function (event) {
  console.log("Survey completed:", event.detail.survey);
  // e.g. record a conversion, show a thank-you banner, unlock a discount
});

Adding to Popular Platforms

WordPress

Option 1: HTML Block

1. Edit your page/post
2. Add a Custom HTML block
3. Paste the snippet

Option 2: Site-wide

1. Use a plugin that injects code into the footer (or edit your theme’s footer.php)
2. Paste the snippet just before </body>
3. Use a side-tab or popover launcher so it works on every page

Squarespace

1. Edit your page
2. Add a Code block
3. Paste the snippet and save

For site-wide launchers, use Settings → Advanced → Code Injection → Footer.

Wix

1. Add an Embed element → Embed a widget
2. Paste the snippet
3. Adjust the element size for inline embeds

Shopify

1. Edit your theme’s theme.liquid
2. Paste the snippet just before </body>
3. Save

For a single page, add a Custom Liquid or Custom HTML section instead.

Webflow

1. Add an Embed component where you want the survey
2. Paste the snippet

For site-wide launchers, use Project Settings → Custom Code → Footer Code.

Manual Iframe Embed

If your platform blocks <script> tags, you can still embed the survey with a plain iframe. You lose auto-resizing, the launcher styles, and the completion event.

<iframe
  src="https://surveyreflex.com/embed/survey/your-survey-slug"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none;"
></iframe>

Recommended heights for a fixed frame:

Survey Length	Recommended Height
Short (1–5 questions)	500px
Medium (6–15 questions)	700px
Long (16+ questions)	900px

Security & Privacy

• The survey runs in an iframe on surveyreflex.com, so none of its CSS or JavaScript can collide with your site
• Embeds work on any domain over HTTPS, with no allow-listing needed
• Response data never passes through your page — only the survey’s height and a “completed” signal do

Troubleshooting

Nothing appears

• Check the survey is published — drafts do not load
• Check the slug in data-survey matches your survey’s public link
• Check your platform is not stripping <script> tags; if it is, use the manual iframe above

The launcher is in the wrong place

• Popup and slider buttons render where the snippet sits. Move the snippet, or use data-target to point at a container
• Side tab and popover launchers are fixed to the viewport and ignore where the snippet sits

The inline embed is the wrong height

• Leave data-auto-resize on and remove any data-height you set
• If your page hides overflow on a parent container, the frame cannot grow — check the container’s CSS

It opens more than I want it to

• Add data-once="true" so it stays hidden for anyone who has already answered
• Remove data-auto-open, data-open-on-scroll, or data-open-on-exit to make it click-only

What’s Next?

• Sharing options
• Manage published surveys
• View responses