Add a feedback widget to a HubSpot CMS site

Where does HubSpot take footer HTML?

HubSpot CMS sites accept site-wide footer HTML in the website settings. Code placed there is added to the pages that use the site's templates, so one paste can cover the whole site. The feedback widget fits there well, because it loads with defer and adds a single floating button.

Not every page type behaves the same way, so the job is not finished when you publish. Check landing pages and blog posts separately, because they can use different templates and different footer settings.

How do you add the widget as site footer HTML?

Open the website settings and find the pages area, where HubSpot keeps the header and footer HTML fields. The names and locations change as HubSpot updates its tools, so look for the footer HTML field rather than following a fixed path.

1. Open the website settings and go to the pages section.
2. Find the footer HTML field and paste the script tag from your product's install page:

<script src="https://escutaproduto.com/widget.js" data-key="pk_your_product_key" defer></script>

3. Save the change.
4. Publish the pages you want the widget on. A saved change that is not published does not reach visitors.

The script is about 5 KB compressed with no dependencies. It renders inside a Shadow DOM, so HubSpot's theme styles do not change the button. You can set data-color to match your brand, and data-position to left if the right corner is busy with a chat widget or a cookie banner.

Do landing pages and blog posts both load the widget?

Check each page type on its live URL. A site-wide footer usually reaches standard site pages and blog posts, but a landing page can use its own layout, and some layouts have their own footer settings. If the button is missing on a landing page, look for a footer HTML setting on that page and add the same script there, but only once.

A simple test list works well. Open one landing page, one blog post and one ordinary site page in a private window. Confirm the Feedback button appears on each, and note any page that does not.

How do you handle several domains?

HubSpot sites can answer on more than one domain: a primary domain, a secondary domain, a subdomain for a blog or a regional site. Each address that serves the site needs to be in allowed origins, because the widget only accepts feedback from listed sites.

Add each one with the full https address, such as https://www.example.com and https://blog.example.com. A request from an unlisted domain returns a 403 response, and the visitor sees nothing happen, so the problem is easy to miss. Check each domain once after you connect it.

Test-only addresses count too. If your team tests on a temporary HubSpot address before the domain goes live, add it while you test and remove it when you finish.

How do you test a HubSpot page before launch?

Publish first, then test the live URL in a private window. Editor previews do not always run footer code.

1. Open the landing page and confirm the Feedback button appears.
2. Send a test message that starts with "test from HubSpot", so you can find it later.
3. Open the item in the inbox and check the page URL, which should match the page you tested.
4. Repeat on a blog post and on a second domain, if you have one.
5. Check the page on a phone, where the button should not cover a form's submit button or a sticky call-to-action.

Why is the HubSpot widget missing or rejected?

• The footer HTML may be saved without the site being published afterward.
• The page you are on may use a template with its own footer settings that override the site-wide one.
• A second domain may be missing from allowed origins, which causes 403 responses for visitors on that domain.
• A content blocker or a Content Security Policy can stop the file. The browser console names any blocked URL.
• Two copies of the script, one in site footer HTML and one on a page, produce two buttons. Keep one copy per page.

Write the test results down, with the date and the page address you tested. When a colleague edits a template next quarter, that record tells them which pages depended on the footer code and which ones need a check. It takes a few minutes now and saves a confusing search later.

Setting up HubSpot feedback in Escuta Produto

Create one product for the website, then list every domain that serves it in the product's allowed origins. Messages from the landing pages and the blog land in the same inbox. The saved page URL shows whether a complaint came from a campaign page, the blog or the main site, so you can prioritize the right fix.

Use the type filter to separate bugs from ideas, and internal notes to record what you changed on a landing page. Escuta Produto does not send messages to customers, so reply from your own email and keep the note in the inbox for your records.

Related

• Every widget option, including the JavaScript API, is in the widget docs.
• For domains and their allowed origins, see the widget docs. The hosted page is in the hosted page docs.
• Related guides cover Unbounce for landing pages and Webflow for another hosted site builder.
• For how to organize what comes in once it arrives, read how to triage customer feedback.