The embedded Survey lets you gather responses at the right moment by placing a survey inline with other page elements. Prompting users to view it when they're at a specific part of a page makes your user's responses more contextual. This article steps through how to set up an embedded Survey.
Changes made to an embeddable Survey can take up to 60 seconds to render after publishing
When making a new embeddable survey or editing an existing one, it can take up to 60 seconds for the changes to appear on your live site.
Visit your live site and identify a position on the page where you'd like the embedded survey to appear.
Copy the target element selector for the position you identified in Step 1.
How to copy the target element selector
Copy the target element selector from your web browser's developer tools using the steps below. While the naming of menu items in the steps below are for Google Chrome, the process will be similar across other web browsers.
The CSS selector cannot exceed 400 characters
Hotjar doesn't support selectors that are over 400 characters in length. If you encounter this limitation, consider using Firefox to copy the CSS selector because Firefox selectors are shorter than other modern browsers.
-
Right-click at the location on the page from your site where the Survey should be embedded.
-
From the right-click menu, click Inspect to open the Elements tab.
In Firefox, Edge, and Safari this will appear as Inspect Element. For Safari, you may need to first enable the Develop menu.
-
Inside the Elements tab, identify the exact element where the survey will be embedded.
-
Right-click on that element, then hover over Copy and click Copy selector. The element selector will then be copied to your clipboard.
In Chrome and Edge, this will appear under Copy > Copy selector. For Safari, this will be Copy > Selector Path. In Firefox, this will be Copy > CSS Selector.
Where multiple elements will match the selector, the survey only embeds at the first matching element
If the selector matches multiple page elements, the survey will only be embedded at the first element that successfully matches. To ensure the survey targets a specific element, we recommend adding a unique ID to the element on your page and using this ID as the target element selector during the embedded survey set up.
Visit your Survey page in Hotjar.
If you're new to using Hotjar Surveys, you'll find a general overview in our article, What is a Hotjar Survey?
Click on New Survey.
Enter a name for your survey in the Details section of the survey setup.
In the Type section of the setup, click Embedded, to select the embedded survey type.
Choose the Appearance of your embedded survey.
In Targeting, add the target element selector you copied from Step 2 in the Position on page section.
Complete the remaining setup of your survey.
For more detail on the other sections in the survey setup, see our How to Create a Survey article.
In Summary, change the status of the survey to Active, then click Start Survey.
This will activate the embedded survey on your live site.