Add a feedback widget to a Weebly site

Which Weebly method should you choose?

Weebly offers two routes for the feedback widget. Header code in the site settings loads the script on every page, so the Feedback button appears site-wide. An embed code element adds the script to a single page you choose, which suits a contact page, a pricing page or a product page you want to test first.

Use the header route for a normal site, and the embed route when you only want the button on some pages. Do not use both on the same page, or you will see two buttons.

Where is the header code field in Weebly?

Open the site settings and look for the area that lets you add code to the header of every page. Weebly places this under the settings or SEO area, and the wording can change between editor versions, so follow the labels you see. The field accepts plain HTML, which is what the widget needs.

1. Open the site settings and find the header code field.
2. 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 settings.
4. Publish the site. Header code reaches visitors only after the site is published, so a saved change in the editor is not enough.

The script loads with defer and is about 5 KB compressed with no dependencies. It draws its button inside a Shadow DOM, so your Weebly theme's styles do not change the form. Use data-color if the default button color does not match your brand.

How do you use an embed code element on a single page?

For one page, add an embed code element from the element library and drag it onto the page. Open the element, paste the same script tag, and save. The element can sit anywhere on the page, because the script adds a floating button and does not need a visible position in the layout.

Keep the element on that page only. If you later move the widget to the whole site, delete the embed element first, so the page does not load the script twice.

How do you check the widget on a phone?

Weebly themes rearrange their sections on small screens, and the floating button can land on top of a menu, a cart icon or a form's submit button. Check the layout on a real phone, not only in a narrow browser window.

1. Open the live page on your phone in a private window.
2. Confirm the Feedback button appears in the corner and opens the form.
3. Scroll to the bottom of the page and check the button does not hide the footer links.
4. Open any form on the page and confirm the submit button is not covered.
5. Send a test message that starts with "test from Weebly mobile", so you can find it later.

If the button overlaps a control, set data-position to left, which moves it to the other corner. Test again after the change.

What about allowed origins for a Weebly domain?

Allowed origins tell Escuta Produto which sites may send feedback with your product key. Add the full https address of your site, such as https://www.example.com. Weebly sites are often reached through both the bare domain and the www address, so list both if visitors use both.

If a submission returns a 403 response, the address the visitor used is missing from the list. Check the address in the browser bar, not the one you typed into the settings, and add it exactly.

Why does the Weebly widget not appear?

• You may have saved the header code without publishing the site. Publish, then reload the live page in a private window.
• A duplicate script, one in the header and one in an embed element, can produce two buttons. Keep one copy per page.
• The page may load through a cache or a CDN that still has the old version. Clear the cache or wait a few minutes after publishing.
• A content blocker or a Content Security Policy can stop the widget file. The browser console names the blocked URL.

Weebly sites often have a handful of page types, such as a home page, a blog, a store page and a contact page. Test one page of each type after you install the widget. A layout that works on the home page can still place the floating button over a form on the contact page, and the only way to find that is to look.

Where Weebly feedback lands in Escuta Produto

Messages from the site arrive in the inbox of the product you created for it. The saved page URL shows which page a message came from, so a complaint about a checkout step or a contact form is easy to find. Filter by type to separate bugs from ideas and praise, then set statuses as you decide.

Internal notes stay with the item and are visible only to your team. Use them to record the fix or the reason you closed a request. Reply to the visitor from your own email, because Escuta Produto does not send messages to customers.

Related

• Every widget option, including data-position and the JavaScript API, is in the widget docs.
• If you cannot place custom code, the hosted feedback page works from a plain link.
• Similar steps for other builders are in Squarespace and Wix.
• For where to place the prompt so it helps rather than annoys, read feedback widget best practices.