How to embed a survey using iFrame?

Let your survey become an integral part of your website instead of popping up as a widget.

Many of you have asked whether you can embed a survey in a certain element of your website. Even though we do not fully support this solution, we want to make the process easier for you. You'll find the following traits of an iFrame useful:

  • you can have a survey appear anywhere on your website, without having to use custom CSS code

  • the survey will be hard-coded in your website, thus becoming its integral part, unlike widgets or pop-ups 

❗️Please remember that you need to know basic HTML and CSS in order to proceed.

How to embed a survey in your website?

To embed a survey in your website, you need to:

  1. Create a link/email survey.

  2. Add an iframe to your website

  3. Use a survey as the source of your website

Once the steps above have been completed, you'll end up with the following excerpt in your website:

<iframe src="your survey URL" width="300px" height="500px"></iframe>

First of all, you need to create an email or shareable link survey - you can start from scratch or use one of our templates.

Let's take a sample NPS survey from the library. It looks like this:

Now you need to copy the URL of your survey: 

Then edit the HTML code of your survey by adding an iframe. Decide where in the code the survey would fit in best and add the line below :

<iframe src="place your survey URL here"></iframe>

As shown below, in this instance, 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 final outcome is far from satisfactory:

This can easily 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:

Did this answer your question?