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.
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:
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.
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.
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.
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.
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.
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.
<div class="embed-survey" data-url="https://surveyanyplace.com/p/SURVEY_URL"></div>
<div class="embed-survey" data-url=" SURVEY_URL"></div>
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
<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>