The Web Embed Collector gives you the ability to show your survey directly on your own website as an overlay. Everything will load super smooth and will look seamless and integrated. The best part is, your survey participants will not need to leave your website to participate. We will generate the code that you need to add to your website for you. There is no special coding knowledge required.
Here is an example of a survey “popup” overlay in action:
Create a new Embed Collector
Once you have set up your survey and are ready to set up the survey overlay on your website, you will first need to create a new Web Embed Collector. Go to the “Collect Responses” section and click on the “Web Embed” button. This will open an overlay, here you will need to choose the “Survey Overlay” option and give your new collector a name.
Copy your code and paste it into your website
You will then be taken to the “Web Popup” Collector Settings. Your embed code is in the box at the top. You do not need to modify this code in any way, just copy and paste the code exactly as it is into your page’s HTML header, just before the closing </head> tag. Doing it this way means you can then come back, select the settings you would like and then test them on your website.
Set up your Web Popup Collector
Once you have pasted the popup code onto your website, you are ready to configure the “overlay” settings. All settings can be managed from within your account, you do not need to change any code. You can define how the survey should be displayed as well as when it should appear.
You have three display options available: Slide in from left or right and show as a modal popup. For each display option you can set a width in pixels or percent and for the modal option you can also set a defined height.
We have various options and settings that are available to determine “When to show the survey”, these settings are outlined below:
| Option | Description |
|---|---|
| Open immediately or with some delay | Your survey will appear automatically after a delay specified by you. If you want the survey to appear immediately, set the delay to zero. |
| Open after a certain amount of page views | You can define how many pages a visitor of your website must have seen before the survey is shown to them. |
| Open when visitor tries to leave your website | The survey will appear automatically as soon as the visitor of your website moves the cursor (mouse) outside of the viewport, typically trying to reach the “close” button or the address bar to navigate somewhere else. |
| Trigger opening manually via button, link or JavaScript | Simply add a button or a link to your website. Once clicked, the survey will appear. You can also trigger the opening of the survey with a simple JavaScript call. |
If you have one of the automatic triggers active, then by default, the popup will be shown to 100% of users. With the “Sampling” option, you can set a percentage value and only show the survey to some of the visitors. So instead of showing your survey to each and every visitor of your website, you can also define to only show it to a specific percentage of visitors (e.g. only every 2nd visitor = 50%).
The last option you will see in your collector settings is a toggle to activate “Testing Mode”. Enabling this option will make sure that you are the only one seeing your survey pop up. Furthermore, the popup will appear repeatedly on every page load so that you can review your changes.
Every visitor of your page will see your survey at most once. By enabling the “restart” option and saving, people who have seen it already, will be able to see it one more time. This does not affect collected responses.
That’s it, you have a survey overlay on your website!
Any responses that you receive from your popup collector will come into your SurveyHero account just like any other collector. Visit the Reports section of your survey to see a full report as well as a list of all individual responses.