API Reference

Embed surveys

Learn how to embed surveys to your website.

To embed a survey to your website you have multiple options. To use any of those you need your survey ID and survey HASH. Both of them are available in your embed code (example below).

<iframe src="https://my.surveypal.com/app/form?_d=0&_sid=
241524305
&_k=
5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL
"></iframe>

ID: 241524305
HASH: 5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL

Embed to a website using an iframe

For most of the cases it is the easiest to embed your survey with an iframe. To use an iframe you can use the most basic iframe syntax with the survey url:

<iframe src="https://q.surveypal.com/form?sid=1175555702&sh=8kcz3hGuVwaR6QyU2--0Y7BRu5QwbVd4Zv8OQTUOwBSaG2Lu2q9moUU97fZXfXLn&channel=website" style="width: 100%; height: 600px; border:none;"></iframe>

You can also add background information to the iframe.
You need to edit iframe src parameter value:

  1. Add "/app" before "/form"
  2. Add "/ext" after "/form"
  3. Add meta parameter after "channel=website": meta=[{'key':'examplename','value':'testvalue'}]
<iframe src="https://q.surveypal.com/app/form/ext?sid=1175555702&sh=8kcz3hGuVwaR6QyU2--0Y7BRu5QwbVd4Zv8OQTUOwBSaG2Lu2q9moUU97fZXfXLn&channel=website&meta=[{'key':'examplename','value':'testvalue'}]" style="width: 100%; height: 600px; border:none;"></iframe>

For more advanced use cases you can you Surveypal JavaScript library to create an iframe. This method of using an iframe enables you to add background information per respondent.

<script type="text/javascript" src="https://surveypal.azureedge.net/frontend/answerform/embed.js" id="srvp-main" env="production"></script>
<script type="text/javascript">
  // Will create an iframe and inject it to document
	srvp.iframe(document.body, {
		id: 241524305,
		hash: "5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL",
		width: 300,
		height: 400
	});
</script>

<script type="text/javascript" src="https://surveypal.azureedge.net/frontend/answerform/embed.js" id="srvp-main" env="production"></script>
<script type="text/javascript">
  // Will create an iframe and inject it to document
  // The email and meta parameters are optional:
  // - email will make the answer unique 
  // - meta will attach meta information to the answer
	srvp.iframe(document.body, {
		id: 241524305,
		hash: "5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL",
		width: 300,
		height: 400,
    email: "[email protected]",
    meta: { firstname: "John", lastname: "Doe" }
	});
</script>

It might be good to edit survey style so that it fits better to smaller space. Here are instructions how to do it: https://support.surveypal.com/hc/en-us/articles/360013643639

QR code for the survey

You can use a QR code of your survey either on your website or on printed media. To create a QR code you can either download the code using the following link syntax:

https://my.surveypal.com/app/qr?surveyId=241524305&w=100&h=100&source=qr

or you can embed it to your website using IMG element:

<img src="https://my.surveypal.com/app/qr?surveyId=241524305&w=100&h=100&source=qr"/>

Use can also use our JavaScript library to create a QR code:

<script type="text/javascript" src="https://surveypal.azureedge.net/frontend/answerform/embed.js" id="srvp-main" env="production"></script>
<script type="text/javascript">
  // Will create a qr code and inject it to document
  srvp.qr(document.body, {
    id: 241524305,
		hash: "5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL",
		size: 300
  });
</script>

📘

QR Code max size

The maximum size for the QR code is 2500 x 2500 pixels.

Create survey link

For some purposes it is easier to create a link for the survey and show it to the website visitor when needed, for this purpose you can use JavaScript library:

<script type="text/javascript" src="https://surveypal.azureedge.net/frontend/answerform/embed.js" id="srvp-main" env="production"></script>
<script type="text/javascript">
  // Return created survey link as a string
  var link = srvp.link({
    id: 241524305,
		hash: "5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL"
  });
</script>

<script type="text/javascript" src="https://surveypal.azureedge.net/frontend/answerform/embed.js" id="srvp-main" env="production"></script>
<script type="text/javascript">
  // Return created survey link as a string
  // The email and meta parameters are optional:
  // - email will make the answer unique 
  // - meta will attach meta information to the answer
  var link = srvp.link({
    id: 241524305,
		hash: "5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL",
    email: "[email protected]",
    meta: { firstname: "John", lastname: "Doe" }
  });
</script>

Survey as a popup

If you want to show a survey to your website visitor as a popup you can do it with the following script: 

<script type="text/javascript" src="https://surveypal.azureedge.net/frontend/answerform/embed.js" id="srvp-main" env="production"></script>
<script type="text/javascript">
  // Will open up a browser popup
	srvp.popup({
    id: 241524305,
    hash: "5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL"
	});
</script>

<script type="text/javascript" src="https://surveypal.azureedge.net/frontend/answerform/embed.js" id="srvp-main" env="production"></script>
<script type="text/javascript">
  // Will open up a browser popup
  // The email and meta parameters are optional:
  // - email will make the answer unique 
  // - meta will attach meta information to the answer
	srvp.popup({
    id: 241524305,
    hash: "5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL",
    email: "[email protected]",
    meta: { firstname: "John", lastname: "Doe" }
	});
</script>