{"_id":"547d637f2eaee50800ed11b9","parentDoc":null,"__v":26,"category":{"_id":"54ca1539dd5cf30d00c35135","__v":1,"project":"5474381b59fade080004c920","version":"5474381b59fade080004c923","pages":["562536b28a11e50d00be3cbe"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-01-29T11:10:49.641Z","from_sync":false,"order":2,"slug":"tutorials","title":"Tutorials"},"githubsync":"","version":{"_id":"5474381b59fade080004c923","project":"5474381b59fade080004c920","__v":12,"createdAt":"2014-11-25T08:04:43.418Z","releaseDate":"2014-11-25T08:04:43.418Z","categories":["5474381b59fade080004c924","5474387f59fade080004c927","547d639078fd57080023cb81","549eb883b67f031400a5dc0e","54c87c8bab03760d00c8e4ec","54ca1480eb42170d0045d3c6","54ca1539dd5cf30d00c35135","560e634e59cb8d0d0015cce1","560e7bfc59cb8d0d0015ccfb","562531976ff1010d009b16f0","57c0378264ebf60e006886d9","57c037912588020e004b5c8e"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"5474381b59fade080004c920","user":"5474380459fade080004c91d","updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-12-02T07:00:15.876Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","try":true,"basic_auth":false,"auth":"never","params":[],"url":""},"isReference":false,"order":0,"body":"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).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe src=\\\"https://my.surveypal.com/app/form?_d=0&_sid=\\n241524305\\n&_k=\\n5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\n\\\"></iframe>\",\n      \"language\": \"text\",\n      \"name\": \"ID and HASH\"\n    }\n  ]\n}\n[/block]\n*ID: 241524305*\n*HASH: 5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL* \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Embed to a website using an iframe\"\n}\n[/block]\nFor 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe src=\\\"https://my.surveypal.com/app/form?_d=0&_sid=241524305&_k=5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\"></iframe>\",\n      \"language\": \"html\",\n      \"name\": \"Iframe example\"\n    }\n  ]\n}\n[/block]\nFor 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://surveypal.azureedge.net/frontend/answerform/embed.js\\\" id=\\\"srvp-main\\\" env=\\\"production\\\"></script>\\n<script type=\\\"text/javascript\\\">\\n  // Will create an iframe and inject it to document\\n\\tsrvp.iframe(document.body, {\\n\\t\\tid: 241524305,\\n\\t\\thash: \\\"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\",\\n\\t\\twidth: 300,\\n\\t\\theight: 400\\n\\t});\\n</script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Basic iframe\"\n    },\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://eaa9b1ba1dfd2bd4899b-1d0f23a5a30b67e69c5449437e9c4e51.ssl.cf3.rackcdn.com/answerform/embed.js\\\" id=\\\"srvp-main\\\" env=\\\"production\\\"></script>\\n<script type=\\\"text/javascript\\\">\\n  // Will create an iframe and inject it to document\\n  // The email and meta parameters are optional:\\n  // - email will make the answer unique \\n  // - meta will attach meta information to the answer\\n\\tsrvp.iframe(document.body, {\\n\\t\\tid: 241524305,\\n\\t\\thash: \\\"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\",\\n\\t\\twidth: 300,\\n\\t\\theight: 400,\\n    email: \\\"john.doe:::at:::surveypal.com\\\",\\n    meta: { firstname: \\\"John\\\", lastname: \\\"Doe\\\" }\\n\\t});\\n</script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Advanced iframe\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"QR code for the survey\"\n}\n[/block]\nYou 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"https://my.surveypal.com/app/qr?surveyId=241524305&w=100&h=100&source=qr\",\n      \"language\": \"text\",\n      \"name\": \"QR code as a link\"\n    }\n  ]\n}\n[/block]\nor you can embed it to your website using IMG element:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<img src=\\\"https://my.surveypal.com/app/qr?surveyId=241524305&w=100&h=100&source=qr\\\"/>\",\n      \"language\": \"html\",\n      \"name\": \"QR code as an image\"\n    }\n  ]\n}\n[/block]\nUse can also use our JavaScript library to create a QR code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://surveypal.azureedge.net/frontend/answerform/embed.js\\\" id=\\\"srvp-main\\\" env=\\\"production\\\"></script>\\n<script type=\\\"text/javascript\\\">\\n  // Will create a qr code and inject it to document\\n  srvp.qr(document.body, {\\n    id: 241524305,\\n\\t\\thash: \\\"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\",\\n\\t\\tsize: 300\\n  });\\n</script>\",\n      \"language\": \"javascript\",\n      \"name\": \"QR code example\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"QR Code max size\",\n  \"body\": \"The maximum size for the QR code is 2500 x 2500 pixels.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Create survey link\"\n}\n[/block]\nFor 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://surveypal.azureedge.net/frontend/answerform/embed.js\\\" id=\\\"srvp-main\\\" env=\\\"production\\\"></script>\\n<script type=\\\"text/javascript\\\">\\n  // Return created survey link as a string\\n  var link = srvp.link({\\n    id: 241524305,\\n\\t\\thash: \\\"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\"\\n  });\\n</script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Basic link\"\n    },\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://eaa9b1ba1dfd2bd4899b-1d0f23a5a30b67e69c5449437e9c4e51.ssl.cf3.rackcdn.com/answerform/embed.js\\\" id=\\\"srvp-main\\\" env=\\\"production\\\"></script>\\n<script type=\\\"text/javascript\\\">\\n  // Return created survey link as a string\\n  // The email and meta parameters are optional:\\n  // - email will make the answer unique \\n  // - meta will attach meta information to the answer\\n  var link = srvp.link({\\n    id: 241524305,\\n\\t\\thash: \\\"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\",\\n    email: \\\"john.doe@surveypal.com\\\",\\n    meta: { firstname: \\\"John\\\", lastname: \\\"Doe\\\" }\\n  });\\n</script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Advanced link\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Survey as a popup\"\n}\n[/block]\nIf you want to show a survey to your website visitor as a popup you can do it with the following script: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://surveypal.azureedge.net/frontend/answerform/embed.js\\\" id=\\\"srvp-main\\\" env=\\\"production\\\"></script>\\n<script type=\\\"text/javascript\\\">\\n  // Will open up a browser popup\\n\\tsrvp.popup({\\n    id: 241524305,\\n    hash: \\\"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\"\\n\\t});\\n</script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Basic popup\"\n    },\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" src=\\\"https://eaa9b1ba1dfd2bd4899b-1d0f23a5a30b67e69c5449437e9c4e51.ssl.cf3.rackcdn.com/answerform/embed.js\\\" id=\\\"srvp-main\\\" env=\\\"production\\\"></script>\\n<script type=\\\"text/javascript\\\">\\n  // Will open up a browser popup\\n  // The email and meta parameters are optional:\\n  // - email will make the answer unique \\n  // - meta will attach meta information to the answer\\n\\tsrvp.popup({\\n    id: 241524305,\\n    hash: \\\"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\\\",\\n    email: \\\"john.doe@surveypal.com\\\",\\n    meta: { firstname: \\\"John\\\", lastname: \\\"Doe\\\" }\\n\\t});\\n</script>\",\n      \"language\": \"javascript\",\n      \"name\": \"Advanced popup\"\n    }\n  ]\n}\n[/block]","excerpt":"Learn how to embed surveys to your website.","slug":"embed-surveys","type":"basic","title":"Embed surveys"}

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). [block:code] { "codes": [ { "code": "<iframe src=\"https://my.surveypal.com/app/form?_d=0&_sid=\n241524305\n&_k=\n5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\n\"></iframe>", "language": "text", "name": "ID and HASH" } ] } [/block] *ID: 241524305* *HASH: 5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL* [block:api-header] { "type": "basic", "title": "Embed to a website using an iframe" } [/block] 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: [block:code] { "codes": [ { "code": "<iframe src=\"https://my.surveypal.com/app/form?_d=0&_sid=241524305&_k=5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\"></iframe>", "language": "html", "name": "Iframe example" } ] } [/block] 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. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://surveypal.azureedge.net/frontend/answerform/embed.js\" id=\"srvp-main\" env=\"production\"></script>\n<script type=\"text/javascript\">\n // Will create an iframe and inject it to document\n\tsrvp.iframe(document.body, {\n\t\tid: 241524305,\n\t\thash: \"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\",\n\t\twidth: 300,\n\t\theight: 400\n\t});\n</script>", "language": "javascript", "name": "Basic iframe" }, { "code": "<script type=\"text/javascript\" src=\"https://eaa9b1ba1dfd2bd4899b-1d0f23a5a30b67e69c5449437e9c4e51.ssl.cf3.rackcdn.com/answerform/embed.js\" id=\"srvp-main\" env=\"production\"></script>\n<script type=\"text/javascript\">\n // Will create an iframe and inject it to document\n // The email and meta parameters are optional:\n // - email will make the answer unique \n // - meta will attach meta information to the answer\n\tsrvp.iframe(document.body, {\n\t\tid: 241524305,\n\t\thash: \"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\",\n\t\twidth: 300,\n\t\theight: 400,\n email: \"john.doe@surveypal.com\",\n meta: { firstname: \"John\", lastname: \"Doe\" }\n\t});\n</script>", "language": "javascript", "name": "Advanced iframe" } ] } [/block] [block:api-header] { "type": "basic", "title": "QR code for the survey" } [/block] 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: [block:code] { "codes": [ { "code": "https://my.surveypal.com/app/qr?surveyId=241524305&w=100&h=100&source=qr", "language": "text", "name": "QR code as a link" } ] } [/block] or you can embed it to your website using IMG element: [block:code] { "codes": [ { "code": "<img src=\"https://my.surveypal.com/app/qr?surveyId=241524305&w=100&h=100&source=qr\"/>", "language": "html", "name": "QR code as an image" } ] } [/block] Use can also use our JavaScript library to create a QR code: [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://surveypal.azureedge.net/frontend/answerform/embed.js\" id=\"srvp-main\" env=\"production\"></script>\n<script type=\"text/javascript\">\n // Will create a qr code and inject it to document\n srvp.qr(document.body, {\n id: 241524305,\n\t\thash: \"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\",\n\t\tsize: 300\n });\n</script>", "language": "javascript", "name": "QR code example" } ] } [/block] [block:callout] { "type": "info", "title": "QR Code max size", "body": "The maximum size for the QR code is 2500 x 2500 pixels." } [/block] [block:api-header] { "type": "basic", "title": "Create survey link" } [/block] 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: [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://surveypal.azureedge.net/frontend/answerform/embed.js\" id=\"srvp-main\" env=\"production\"></script>\n<script type=\"text/javascript\">\n // Return created survey link as a string\n var link = srvp.link({\n id: 241524305,\n\t\thash: \"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\"\n });\n</script>", "language": "javascript", "name": "Basic link" }, { "code": "<script type=\"text/javascript\" src=\"https://eaa9b1ba1dfd2bd4899b-1d0f23a5a30b67e69c5449437e9c4e51.ssl.cf3.rackcdn.com/answerform/embed.js\" id=\"srvp-main\" env=\"production\"></script>\n<script type=\"text/javascript\">\n // Return created survey link as a string\n // The email and meta parameters are optional:\n // - email will make the answer unique \n // - meta will attach meta information to the answer\n var link = srvp.link({\n id: 241524305,\n\t\thash: \"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\",\n email: \"john.doe@surveypal.com\",\n meta: { firstname: \"John\", lastname: \"Doe\" }\n });\n</script>", "language": "javascript", "name": "Advanced link" } ] } [/block] [block:api-header] { "type": "basic", "title": "Survey as a popup" } [/block] If you want to show a survey to your website visitor as a popup you can do it with the following script: [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" src=\"https://surveypal.azureedge.net/frontend/answerform/embed.js\" id=\"srvp-main\" env=\"production\"></script>\n<script type=\"text/javascript\">\n // Will open up a browser popup\n\tsrvp.popup({\n id: 241524305,\n hash: \"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\"\n\t});\n</script>", "language": "javascript", "name": "Basic popup" }, { "code": "<script type=\"text/javascript\" src=\"https://eaa9b1ba1dfd2bd4899b-1d0f23a5a30b67e69c5449437e9c4e51.ssl.cf3.rackcdn.com/answerform/embed.js\" id=\"srvp-main\" env=\"production\"></script>\n<script type=\"text/javascript\">\n // Will open up a browser popup\n // The email and meta parameters are optional:\n // - email will make the answer unique \n // - meta will attach meta information to the answer\n\tsrvp.popup({\n id: 241524305,\n hash: \"5gVfWKLbLgNK_28Zb3qNWS0vO71_7V8q0afN39qchQT4Xw2RjDWGdAdrB5lpQGPL\",\n email: \"john.doe@surveypal.com\",\n meta: { firstname: \"John\", lastname: \"Doe\" }\n\t});\n</script>", "language": "javascript", "name": "Advanced popup" } ] } [/block]