Feedback widget for WordPress

Add the PushFeedback widget in a WordPress site using the official PushFeedback plugin, with a manual alternative for sites that can't install plugins.

Prerequisites

• A WordPress website where you can install plugins.
• Optionally, a PushFeedback account. The plugin can create one for you during setup, or you can sign up for free.

Installation

Floating button

The plugin loads the widget, adds a settings page, shows your feedback inside wp-admin, and provides a shortcode.

1. In your WordPress admin at http://yourwebsite.com/wp-admin/, navigate to Plugins > Add New and search for PushFeedback.

2. Click Install Now on the PushFeedback plugin, then click Activate.

   

3. Open the PushFeedback menu in the admin sidebar and connect to a project in one of two ways:

   • Connect to PushFeedback creates your account (or signs you in), creates a project for the site, and returns you to WordPress automatically.
   • I already have a project ID takes a project ID from your PushFeedback dashboard.

4. Open your site and click Feedback. The widget opens in a right sidebar by default.

Configure the widget

All plugin settings live under PushFeedback > Settings, organized as numbered steps with a live preview beside them. Once your site is connected the preview is live: feedback sent from it lands in your project.

Customize the appearance

The Customize step covers the widget's text, colors, positions, rating, and behavior. Each field maps one to one to a widget attribute, so see Layout, Styles, and Text for what an option does and which values it accepts.

Set the site URL

The Connect step shows the project's Site URL. Feedback is only accepted from that URL's domain, so a site that moves domains stops collecting feedback until you click Edit and point the Site URL at the new address. The settings page warns you when the two no longer match.

Disconnecting only removes the widget from your site. Your feedback stays in your PushFeedback account.

Choose which pages show the widget

The Where it shows step controls the floating button, which appears on every page by default. Turn it off to place the widget only with the shortcode, or restrict it with the Only show on URLs containing and Never show on URLs containing lists: one URL fragment per line, matched anywhere in the page URL. For example, /docs/ limits the button to your documentation and /checkout/ keeps it off your checkout pages. An empty include list shows the button everywhere.

These rules only apply to the floating button. Widgets placed with the shortcode always render.

Choose who gets notified

Use Connect to PushFeedback to enable the Notifications step. Notifications start with the email address of the account you connect.

Set Send to and click Save notifications. Leave the field empty to stop sending. To add recipients on paid plans or check notification limits, see Email integration.

Support dark mode

The widget switches to its dark palette when an ancestor element carries data-theme="dark", normally the <html> tag. It does not follow the visitor's system theme on its own, so if your theme already sets that attribute the widget follows it and there is nothing to do.

Otherwise, set the attribute from your child theme's functions.php with the language_attributes filter, which emits the <html> tag's attributes:

add_filter( 'language_attributes', function ( $output ) {
    return $output . ' data-theme="dark"';
} );

This forces dark mode for every visitor. To follow a theme toggle, update the attribute when your theme switches.

To change individual dark colors, redefine the custom properties inside a [data-theme='dark'] rule in your stylesheet:

[data-theme='dark'] {
  --feedback-modal-content-bg-color: #1f2937;
  --feedback-modal-header-text-color: #f9fafb;
  --feedback-modal-input-bg-color: #374151;
}

See Dark mode for the full reference.

Read feedback in wp-admin

Open PushFeedback > Feedback to read your latest entries. Click Refresh if a new entry is missing. Select Manage feedback to archive or export entries in the PushFeedback dashboard. Archived entries show an Archived badge in WordPress.

Reading feedback requires an API key, which the Connect to PushFeedback flow stores automatically. If you connected by pasting a project ID, use Retry connection to finish setup, or paste a key with feedback_read. Dashboard key creation requires Unlimited.

Shortcode

Use the [pushfeedback] shortcode to place the widget inside posts, pages, or widget areas. Shortcode attributes use underscores instead of hyphens (for example modal-position becomes modal_position), and the shortcode supports project, button and modal positions, button style, rating mode, visibility, required email, click-outside and history closing, custom font, and the text fields available in the plugin. See Layout and Text for their meaning. Attributes outside this set, such as api_key, rating, session_id, metadata, and escape_close, are ignored. Colors are global: set them once in the Customize step and they apply to every widget instance on the site.

A shortcode attribute overrides the plugin setting for that instance only.

Place a feedback button inline in your content:

[pushfeedback button_text="Send feedback" button_style="dark"]

Embed the form directly in a page, for example a dedicated feedback page (see Embedded mode):

[pushfeedback embedded="true" rating_mode="stars"]

Send feedback from a specific section to a different project by overriding the project ID:

[pushfeedback project="<OTHER_PROJECT_ID>" button_text="Beta feedback"]

Manual installation

For a classic theme, you can add the widget in a child theme. Use a child theme so updates preserve your code. Block themes may not have header.php and footer.php. Use the plugin in that case.

1. Navigate to Appearance > Theme File Editor and select header.php. Insert the PushFeedback styles and scripts within the head section:

       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css">
   <script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js"></script>

2. Select footer.php and paste the feedback button just before the body tag, replacing <YOUR_PROJECT_ID> with your project's ID from the PushFeedback dashboard:

   <feedback-button project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="bottom-right" button-style="dark">Feedback</feedback-button>

3. Save your changes, then visit your WordPress website and confirm that the feedback button is visible and operational.

Other installation modes

Inline button

Install and activate the PushFeedback plugin, then connect your project under PushFeedback > Settings. The plugin loads the stylesheet and runtime. Add a Shortcode block where you want the button and enter:

[pushfeedback button_text="Feedback" button_style="dark"]

Turn off the floating button under PushFeedback > Settings > Where it shows if you want only the inline button.

Embedded form

Install and activate the PushFeedback plugin, then connect your project under PushFeedback > Settings. The plugin loads the stylesheet and runtime. Add a Shortcode block where the form should appear and enter:

[pushfeedback embedded="true"]

The form appears directly in the page. Turn off the floating button under Where it shows if you want only this form.

Like and dislike buttons

For separate rating buttons, use HTML. Load these assets in a classic child theme's header.php:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js"></script>

Add this markup in a Custom HTML block at the end of a post or in your theme template:

<p>Was this helpful?</p>
<div class="pushfeedback-thumbs-row">
  <feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="default" custom-font="true" screenshot-positioning="true" hide-icon="true">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 2a3.13 3.13 0 0 1 4 3.88Z"/></svg>
    <span class="pushfeedback-thumb-label">Helpful</span>
  </feedback-button>
  <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="default" custom-font="true" screenshot-positioning="true" hide-icon="true">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H21a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L13 22a3.13 3.13 0 0 1-4-3.88Z"/></svg>
    <span class="pushfeedback-thumb-label">Not helpful</span>
  </feedback-button>
</div>

Replace <YOUR_PROJECT_ID> with your project ID. The buttons open the form with a rating selected. Click Send to submit.

Next steps

• Customization: Adjust the widget's layout, styles, and text.
• Integrations: Forward feedback to Slack, email, Jira, and more.