Embedded Surveys and Feedback let you gather responses at the right moment by placing a survey or feedback widget inline with other page elements. Showing one of these to users when they're viewing a specific part of a page can help them provide more context when responding.
Changes made to an embeddable Survey or Feedback can take up to 60 seconds to appear on your live site. This article walks through the steps on how to set up an either an embedded Survey or Feedback.
The email step must be completed for a Feedback response to be captured
Feedback responses will only be captured if the final email step is completed (either an email address is entered, or the Skip button is clicked).
Visit your live site and identify a position on the page where you'd like the embedded survey/feedback widget to appear.
Copy the target element selector for the position you identified in Step 1.
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.
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.
-
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.
-
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.
Where multiple elements will match the selector, the survey/feedback widget 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/feedback widget 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/feedback set up.
Visit your Survey or Feedback dashboard in Hotjar.
If you're new to using Hotjar's Ask products, you'll find a general overview in our What is a Hotjar Survey? and What is the Feedback tool? articles.
Click on New survey or New widget
Enter a name for your survey/feedback widget in the Details section of the survey setup.
In the Type section of the setup, click Embedded, to select the embedded survey/feedback type.
Choose the Appearance of your embedded survey/feedback widget.
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/feedback widget.
For more details on the other sections in the survey/feedback widget setup, see our How to Create a Survey and How to Set Up Feedback articles.
In Summary, change the status of the survey to Active, then click Start Survey or Start Feedback.
This will activate the embedded survey/feedback widget on your live site.
Make changes to a saved survey/feedback widget
If needed, you can edit a survey or feedback widget by visiting their respective dashboards, clicking on the three dots next to the survey/feedback you want to adjust, and selecting Edit.
Once you are done, click the Save changes button.