Make your survey an integral part of your website rather than a pop-up widget. You can embed a survey in a specific element of your website or web app so it appears anywhere on your site without custom CSS. 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.
Step 1. Create an email or shareable link survey
Click the Create new survey button and select Email or shareable link survey. You can start from scratch, pick a survey from our templates library, create a survey with AI, or import questions you prepared before.
Craft your perfect survey. If you want to read more about creating link surveys, please go to this article.
Step 2. 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 Launch ➡️ Share and insert it into the tag from above.
Step 3. Adjust height and width
In our example, the line comes after "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 for identifying respondents in your embedded survey.
Collect users' 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:
📞 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.