Besides using the basic survey link, it's possible to embed the survey form as part of a webpage by using an iframe or make it pop up to new window.
Basic iframe
- Go to Distribute view and select 'Embed on your website'.
- Copy the HTML code and add it to the code of the web page.
This kind of basic iframe will create anonymous answers to your survey just like public link.
Advanced iframe
If you like to pick up some background information from webpage to every answer or you need to define correct survey language so that respondent don't need to select it then you must edit iframe link.
- Go to Distribute view and select 'Embed on your website'.
- Copy the HTML code
Your code look like this
<iframe src="https://q.surveypal.com/form?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website" style="width:100%;height:600px;border:none"></iframe>
Replace '/form' with '/app/form/ext'
Now your iframe code should look like this
<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website" style="width:100%;height:600px;border:none"></iframe>
Background information
You can add background information to every answer with meta parameter.
Add &meta=[{'key':'example','value':'samplevalue'}] to your iframe link after 'channel=website'
<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website&meta=[{'key':'example','value':'samplevalue'}]" style="width:100%;height:600px;border:none"></iframe>
Key is background information name. You can choose key name but use only characters and numbers.
Value is background information value.
You can add as many key-value pairs as you like. Here we have two of those:
<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website&meta=[{'key':'example','value':'samplevalue'},{'key':'second','value':'something'}]" style="width:100%;height:600px;border:none"></iframe>
Language selection
If your survey have more than one language and you want that respondent need to select language then you need to use language parameter.
Add &language=English%20(US) after 'channel=website':
<iframe src="https://q.surveypal.com/app/form/ext?sid=1443346287&sh=PzsMOvF6g8RUUijPItjaVSytc-X1vgdX7mPYKSfayvYfK0hqAg1IifFC9mAwElEf&channel=website&language=English%20(US)&meta=[{'key':'example','value':'samplevalue'}]" style="width:100%;height:600px;border:none"></iframe>
Language value is language name. You can find language name from survey Build view. There is language menu next to Settings and there you have a list of your survey languages.
Iframe layout
Many times iframe size is limited so it's good to use the whole space. You'll find instructions how to do it from our article Optimize survey layout for embedding.
Survey popup
If you need to add survey to a popup then you can use iframe codes for that too. First you need to use your website environment way to setup a popup window to webpage. When you have it ready then add the iframe code to it and you'll get the same result as with normal iframe embedding.
You can find an example from our demo site https://rocketwarehouse.space/help-center/ when you click 'Home' from navigation. It should take you to Home page and then you'll see survey popup.
Tips & Tricks
- If you do not know how to add the code to the code of the web page, contact the person in charge of website administration.
- Maybe you like to use our Survey button which is also one way to embed survey to your website
- You can also use a normal public link on web pages.