How to embed a survey?

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

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

Embedding a survey on a site or e-mail

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

<iframe src="https://surveyanyplace.com/s/your-survey-url"></iframe>

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

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="https://surveyanyplace.com/s/your-survey-url" width="100%" height="100%"></iframe>

Dynamically change embedded survey size (responsive design)

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="https://surveyanyplace.com/s/your-survey-url" 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.

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="//app.surveyanyplace.com/s/js/rev2/prod/embed.js" defer async></script>

Add a div element with “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.

Using an anchor link

Opening in a new tab or 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="//app.surveyanyplace.com/s/your-survey-url " target="_blank">showme</a>

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 “onclick” attribute. Some environments will automatically remove this attribute. In that case, it will work as the above anchor link example.

<a href="//app.surveyanyplace.com/s/your-survey-url " target="_blank" onclick="window.open('//app.surveyanyplace.com/s/your-survey-url ', 'newwindow', 'width=640,height=360,menubar=no,toolbar=no', true); return false;">showme</a>

Embedding on Facebook

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: https://www.facebook.com/pages/create/

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

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:https://apps.facebook.com/static_html_plus/

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.

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

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”.

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:

Embedding on WordPress

To embed the survey on a page on WordPress, you generally need to either disable the automatic tag removal or install an iframe plugin. You can use the iframe plugin by webvitaly.

You can find information on how to install and use the plugin on the plugin page itself.

Iframe plugin: https://wordpress.org/plugins/iframe/

The src attribute should contain the “Link” value found on the Share tab of the editor.

Easy to copy code blocks

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

Campaign script

Survey script
<script type="text/javascript" src="//app.surveyanyplace.com/s/js/rev2/prod/embed.js" defer async></script>
<div class="embed-survey" data-url=" SURVEY_URL"></div>

iFrame
<iframe src="//app.surveyanyplace.com/s/SURVEY_URL"></iframe>

iFrame at 100%
<iframe src="//app.surveyanyplace.com/s/SURVEY_URL" width="100%" height="100%"></iframe>

iFrame with custom dimensions (in %)
<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="//app.surveyanyplace.com/s/SURVEY_URL" 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="//app.surveyanyplace.com/s/js/rev2/prod/embed.js" defer async></script>
<a href="//app.surveyanyplace.com/s/SURVEY_URL" target="_blank">show me</a>

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

How can we help you today?