Add a feedback widget to a WordPress site

Which WordPress method should you pick?

To add the Escuta Produto feedback widget to WordPress, paste its single script tag into the site footer. You can do that with a header and footer code plugin, which needs no code files, or with a child theme, which keeps the script in code you can review. Both load the widget on every page.

Method	Good for	Watch out for
Header and footer code plugin	Owners who want no code files	One more plugin to keep updated
Custom HTML block in a block theme footer	A single site on a block theme	Lost if you switch themes
Child theme with a small PHP snippet	Developers who keep code in version control	The child theme must stay active, or the snippet stops running

Whatever you choose, do not edit the parent theme's footer file. A theme update overwrites that edit, and you will only notice when the button disappears.

Add the snippet with a header and footer plugin

This is the fastest route. Install a header and footer code plugin. WPCode and Insert Headers and Footers are two widely used options, and most plugins in this group work the same way.

1. Open the plugin's footer scripts field. The label varies, but it sits beside the header 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 it. Keep the snippet in the footer, not the header. The script uses defer, so the page does not wait for it before rendering.

Make sure the snippet applies to the whole site. Some plugins offer per-page rules, and a rule that excludes your contact page means no feedback button there.

Add the snippet in a child theme with wp_enqueue_script

Developers usually prefer code they can review and commit. Create a child theme, then put the following in its functions.php file. It registers the widget as a script on front-end pages and replaces the output tag, so the data-key and defer attributes survive.

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script( 'escuta-produto-widget', 'https://escutaproduto.com/widget.js', array(), null, true );
} );

add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {
    if ( 'escuta-produto-widget' !== $handle ) {
        return $tag;
    }
    return '<script src="' . esc_url( $src ) . '" data-key="pk_your_product_key" defer></script>' . PHP_EOL;
}, 10, 3 );

Passing null as the version tells WordPress not to append a version query string, so the URL stays the same from one release to the next.

Pass logged-in users to the widget

When a visitor is logged in, you can fill in their email and name for them. The identify call hides the email field, so each message is tied to the account that sent it. Add this to the same functions.php file. It runs only for logged-in users.

add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_user_logged_in() ) {
        return;
    }
    $user = wp_get_current_user();
    $data = wp_json_encode(
        array(
            'email' => $user->user_email,
            'name'  => $user->display_name,
            'id'    => (string) $user->ID,
        ),
        JSON_HEX_TAG | JSON_HEX_AMP
    );
    wp_add_inline_script(
        'escuta-produto-widget',
        'window.EscutaProduto = window.EscutaProduto || { q: [] };' . PHP_EOL .
        '(window.EscutaProduto.q ||= []).push(["identify", [' . $data . ']]);',
        'before'
    );
}, 20 );

The JSON_HEX_TAG flag escapes angle brackets, so a display name that contains a closing script tag cannot break out of the inline script. The email and name fill the form. The id is stored as metadata on each message, and you can add other keys the same way if your team needs them.

Caching needs a check here. A page cache that stores one copy of a page can serve the logged-in version to a logged-out visitor, or the reverse. Configure your caching plugin so logged-in visitors bypass the cache.

Allow your domain in allowed origins

The product key appears in your HTML, so anyone can copy it. To stop other sites from sending feedback with your key, list your domains under Allowed origins in the product settings. Add each full address with https, such as https://example.com, and the www version too if visitors reach the site both ways.

Requests from any other site are rejected with a 403 response. A missing origin is the most common reason a live install delivers nothing, so check this before you debug anything else.

Check the live site after caches clear

Plugins that combine, minify or defer JavaScript can change how the widget loads. If the button goes missing after you enable an optimization feature, exclude the widget file from that feature. Then clear every cache, including the page cache and any CDN, and open a published page in a private window.

Work through this list on the published site:

1. Confirm the floating Feedback button appears in the corner.
2. Open the browser developer tools and check the console for errors and the network tab for the widget file.
3. Send a test message while logged out and confirm it arrives.
4. Log in as a test user and confirm the email field is hidden.
5. Open the item in your inbox and check that the page URL and browser were saved.

The block editor preview is not a reliable test, because footer scripts may not run there. Test the published page.

How WordPress feedback appears in Escuta Produto

Each message lands in the inbox of the product you created for this site. The saved page URL shows which post or page it came from, so a bug on a pricing page is easy to locate. Use the type filter to separate bugs, ideas, praise and other messages, and the status filter to track what you have decided.

Add a Slack or Discord incoming webhook in the product settings, and each new item posts its type, rating, sender, an excerpt and a dashboard link. Internal notes stay private to your team, so you can record decisions without replying to the customer.

Related

• Setup details for every option are in the widget docs.
• Notification setup is in the notifications docs.
• Other builders follow the same pattern. See Webflow and Shopify.
• For the background, read What is a feedback widget?.