or 
plans.The embeddable Feedback widget lets you gather responses at the right moment by placing a Feedback widget inline with other page elements. Prompting users to leave feedback 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 embeddable Feedback widget.
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).
After you add an embedded Feedback widget to your site and test it for a few days, we’d like to invite you to send your feedback using this survey.
You can test out a live example of the embedded Feedback widget below:
Creating an embedded Feedback widget
Visit your live site and identify a position on the page where you'd like the embedded widget 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 Feedback widget 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 Feedback widget 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 widget only embeds at the first matching element
If the selector matches multiple page elements, the Feedback widget will only be embedded at the first element that successfully matches. To ensure the 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 Feedback widget set up.
Visit your Feedback page in Hotjar.
If you're new to the Feedback widget, you'll find a general overview in our article, What is the Feedback tool?
Click on New Widget.
Enter a name for your Feedback widget in the Details section of the Feedback widget setup.
In the Type section of the setup, click Embedded, to select the embedded Feedback widget type.
Paste the element selector to the Position on page field.
In the Appearance section, find the Position on page field, then paste the target element selector you copied from Step 2.
Complete the remaining setup of your Feedback widget.
For more detail on the other sections in the Feedback widget setup, see our How to Set Up Feedback article.
In the Summary section of the set up, change the status of the Feedback widget to Active, then click Start Feedback.
This will activate the embedded Feedback widget on your live site.
How to edit your embedded Feedback widget
Changes made to an embeddable Feedback widget can take up to 60 seconds to render after publishing
When making a new embeddable Feedback widget or editing an existing one, it can take up to 60 seconds for the changes to appear on your live site.
Select the widget you want to edit in the Feedback tab of Hotjar Insights.
Click on the three dots and select Edit.
Make the edits you need to make, and then click Save changes.
