How to embed a survey?

Embedding your survey allows you to display it in the easiest way and lets your respondents take it without ever leaving the web page. Embed your survey on a site, e-mail, anchor link, Facebook, and so on...

Professional ✓
Enterprise ✓
ReportR ✓

There are multiple ways to embed your survey. We've listed them all below, taking you through the process, step by step:

  1. Embedding a survey on a site or e-mail
  2. Using an anchor link
  3. Embedding on Facebook
  4. Easy to copy code blocks

If you need any help, don't hesitate to get in touch.

1 Embedding a survey on a site or e-mail

1.1 Using an iframe element

You can embed a survey using the iframe code found on the Share tab of the survey editor.

embed survey

<iframe src=""></iframe>

Your survey will be visible anywhere you put that line of code on your website.

1.2 Changing embedded survey size

You can change the size of your embedded survey. To accomplish this, you add width & height to the code. Either with pixel values or percentages.

The following example will take up all width & height:

<iframe src="" width="100%" height="100%"></iframe>

1.3 Dynamically change embedded survey size

Place this code if you want to have the embedded survey change size dynamically when the container and/or the browser window changes size. The container is the parent element where you placed the code.

<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="" width="100%" height="auto" style="position:absolute;width100%;height:100%;left:0"></iframe></div><span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>

This will preserve the size ratio. The default ratio is 16:9. If you wish to use a different ratio, alter the percentage values. It is recommended to not go above 100% for each percentage.

1.4 Using embed script

This method uses two parts:

  • A script element with the URL to the embed script
  • A div element indicating where to embed the survey

Place the script element between the head tags or at the bottom of your site just before the closing body tag.

<script type="text/javascript" src="" defer async></script>

Add a div element with the “embed-survey” CSS class and a URL data attribute containing your survey URL. Place this element at the position where the survey should be.

<div class="embed-survey" data-url="Your survey url"></div>

The embed script will add all necessary styling & elements to display a responsive survey.

2 Using an anchor link

2.1 Opening a new tab or a window

When an iframe or script element is not an option, you can still add the survey as a simple link. The survey will be opened in a new tab or window depending on the browser settings.

<a href=" " target="_blank">showme</a>

2.2 Opening in a new window (pop-up)

If you want to open the survey as a pop-up with a certain window size, you can add a small piece of code using an “on-click” attribute. Some environments will automatically remove this attribute. In that case, it will work as the above anchor link example.

<a href=" " target="_blank" onclick="' ', 'newwindow', 'width=640,height=360,menubar=no,toolbar=no', true); return false;">showme</a>

3 Embedding on Facebook

3.1 Creating a page

Before you can embed a survey on Facebook, you first need to have a page. After you are logged in on Facebook, you can create a page by going here:

Embed survey on facebook

Choose a Page type and fill in any other necessary information. Once you hit the “Get Started” button, your page will be created.

3.2 Adding the survey to your page

After you have created your page, we can begin adding the survey. To achieve this, we require the “Static HTML” Facebook app. You can get it here:

Embedding survey static facebook html

Press the big green button to get started. You should now see a page that asks you to select a Facebook page to add a page tab to it.

Embed survey static facebook html

After that, you should be seeing your page with a big green button to set up your new page tab.

Facebook set up tab for embedding survey

Once you have clicked on the “Set up tab” button, you should be seeing a page with multiple buttons. There should be a “Static HTML” next to the “Change app” button. If this is not the case, click on the “Change app” button and select “Static HTML” underneath “Free apps”.

choose an app static HTML

Finally, place your embed code inside the text area of index.html and click on “Save & Publish” to update the content on your page.

The result should look like this:

Static html facebook page

4 Easy to copy code blocks


If you're looking to embed a campaign, instead of the SURVEY_URL you have to use the entire URL.

Campaign script
<script type="text/javascript" src="" defer async></script>
<div class="embed-survey" data-url=""></div>

Survey script
<script type="text/javascript" src="" defer async></script>
<div class="embed-survey" data-url=" SURVEY_URL"></div>

<iframe src=""></iframe>

iFrame at 100%
<iframe src="" width="100%" height="100%"></iframe>

iFrame with custom dimensions (in %)
<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="" width="100%" height="auto" style="position:absolute;width:100%;height:100%;left:0;"></iframe></div>

Embed script with survey hidden behind anchor text
<script type="text/javascript" src="" defer async></script>
<a href="" target="_blank">show me</a>

Embed script with survey behind anchor text which opens in new tab
<a href="" target="_blank" onclick="'', 'newwindow', 'width=640,height=360,menubar=no,toolbar=no', true); return false;">show me</a>

Vincent is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.