How to embed a survey?

Embed a survey and display it on your website, Facebook page, or anchor link. This is the easiest way to allow your respondents to complete your questionnaire without ever leaving the web page. 

---

---

This guide will teach you:

1. Embed a questionnaire on a webpage
2. Use an anchor link
3. Embed a questionnaire on Facebook
4. Easy to copy code blocks

1. Embed a questionnaire on a website

1.1 Use an iframe element

1.2 Change embedded questionnaire size

1.3 Dynamically change embedded questionnaire size

1.4 Use embed script

1.1 Use an iframe element

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

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

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

1.2 Change embedded survey size

You can change the size of your questionnaire. 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://s.pointerpro.com/your-survey-url" width="100%" height="100%"></iframe>

1.3 Dynamically change embedded questionnaire size

Place the following code if you want to have your questionnaire 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://s.pointerpro.com/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.

1.4 Use 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 questionnaire  

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="https://s.pointerpro.com/js/embed.js" defer async></script>

Add a div element with the embed-survey CSS class and a URL data attribute containing your questionnaire URL. Place this element at the position where the questionnaire 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 questionnaire.

2 . Use an anchor link

2.1 Open a new tab or a window

2.2 Open in a new pop-up window

2.1 Open a new tab or a window

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

<a href="https://s.pointerpro.com/your-survey-url " target="_blank">showme</a>

2.2 Open in a new pop-up window

If you want to open the questionnaire 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="https://s.pointerpro.com/your-survey-url " target="_blank" onclick="window.open('https://s.pointerpro.com/your-survey-url ', 'newwindow', 'width=640,height=360,menubar=no,toolbar=no', true); return false;">showme</a>

3 Embed a questionnaire on Facebook

3.1 Create a page

3.2 Add the questionnaire to your page

3.1 Create a page

Before you can embed a questionnaire 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.

3.2 Add the questionnaire to your page

After you have created your page, we can begin adding the questionnaire. 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:

4. Easy to copy code blocks

Campaign script
<script type="text/javascript" src="https://s.pointerpro.com/js/embed.js" defer async></script>
<div class="embed-survey" data-url="https://s.pointerpro.com/SURVEY_URL"></div>

Survey script
<script type="text/javascript" src="https://s.pointerpro.com/js/embed.js" defer async></script>
<div class="embed-survey" data-url=" SURVEY_URL"></div>

iFrame
<iframe src="https://s.pointerpro.com/SURVEY_URL"></iframe>

iFrame at 100%
<iframe src="https://s.pointerpro.com/SURVEY_URL" width="100%" height="100%"></iframe>

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

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

What's next?

• Share Your Questionnaire: Share your questionnaires, quizzes, and assessments fast and easy, by using a questionnaire link, QR Code, email, and embedding it. Start sharing your questionnaire to your contacts, to increase the response rate and collect more data.
• Email invitations are messages sent to your saved contacts containing a link to your questionnaire and are fully customizable. It is the best way to inform your contacts about your new questionnaire, and at the same time, by using our analytics tools, to track who has opened and clicked on your message.
• Require Contact is a feature that allows you to control who can access your questionnaire and makes it only accessible to contacts. If validation fails, the participant is not able to fill in the questionnaire but a configurable message will be displayed instead.