Let your survey become an integral part of your website instead of popping up as a widget. You can embed a survey in a specific element of your website or web app to have it appear anywhere on your website without using custom CSS code. Unlike widgets or pop-ups, the survey will be hard-coded into your website, thus becoming an integral part of it.
Please remember that you need basic knowledge of HTML and CSS to proceed.
Create an Email or Shareable link survey
You can either set up a survey of your own (Start from scratch), select a survey from our templates library, (Start from template), use AI-assisted creation , or Import questions you prepared before:
Select the Email or Shareable link survey type, and craft your perfect survey. If you want to read more about creating link surveys, please go to this article.
Add an iFrame to your website or web app
1. Decide where in the code the survey would fit in best and add this line to your website:
<iframe src="place your survey URL here"></iframe>
2. Copy the URL of your survey from the Share tab and insert it into the tag from above.
Adjust height and width
In our example, the line comes after the Hello world! bit:
<h3>Hello world!</h3>
<iframe src="place your survey URL here"></iframe>
<p>Welcome to B2B Services Testing Sites. This is your first post. Edit or delete it, then start blogging!</p>
However, the outcome is far from satisfactory:
This can quickly be dealt with. If you tweak the iframe's height and width, the survey will be easier to answer:
<iframe src="place your survey URL here" width="500px" height="330px"></iframe>
Here's the same survey after its width and height have been adjusted:
Identify your respondents
There are two methods to identify respondents of your embedded survey.
Collect user's information via merge tags in the survey code
Let's say, on your website you store the user attributes in a format like this {((attibute_name))}, and you want to pass user_id which is formatted like this:{((user_id))}. To achieve that, you have to add those attributes to the survey URL you use in your iframe code.
If the code you created in the previous step of this article was
<iframe src="https://survey.survicate.com/11111111/?p=anonymous" width="500px" height="330px"></iframe>
with the user_id attribute, it would look like this:
<iframe src="https://survey.survicate.com/11111111/?user-id={((user_id))}" width="500px" height="330px"></iframe>
Once someone answers your survey, the data collected with attributes will be visible under User attributes in the Individual responses tab 🎉
Add a contact form question to your survey
Another way is to simply add a Contact form question to your survey to identify your respondents by asking them to provide the data you're interested in:
Best Practices
Personalize your survey
Learn how to design your survey and Remove the Survicate branding to adjust it to suit your brand.
If your website scrolls down to the iFrame as someone enters the page, add autofocus=false parameter to the survey URL, so that the URL looks like this:
https://survey.survicate.com/surveyId/......&autofocus=false
📞 If you have any questions about how to embed a survey using iFrame - feel free to reach out to our team via chat or email: support@survicate.com.