For the complete documentation index, see llms.txt
Skip to main content

Feedback widget for WordPress

PushFeedback collects user feedback directly from your website. This guide covers installation in a WordPress site using the official PushFeedback plugin, with a manual alternative for sites that can't install plugins.

Feedback widget open on a WordPress site

Prerequisites​

Before you begin, you need:

  • 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​

The official plugin is the recommended way to add PushFeedback to WordPress: it loads the widget, adds a settings page, shows your feedback inside wp-admin, and provides a shortcode. No code changes are required.

  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.

    PushFeedback plugin card in the WordPress Plugins > Add New search results, with the Install Now button

  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. Visit your WordPress website and confirm that the feedback button is visible and operational. By default it is a dark tab on the right edge of the page that opens the form in a right sidebar.

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.

PushFeedback plugin settings page with the connection card and guided steps

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.

The Customize step, with the widget fields on the left and the live preview beside them

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​

The Notifications step appears once the plugin has stored an API key, which the Connect to PushFeedback flow does for you. Connecting also turns notifications on and points them at the address of the account you connected with, so the first entry reaches you without any setup.

Send to is a single field on every plan, and the free plan is limited to that one address; paid plans notify up to three. Add further recipients in your PushFeedback dashboard instead, as described in the Email integration guide; the plugin passes through addresses it does not display, so saving here never deletes them. Leave the field empty to stop sending. The step saves on its own: click Save notifications, not the button that saves the widget settings above it.

On the free plan the first 25 notifications are emailed as feedback arrives, after which PushFeedback sends a monthly summary instead and the Feedback page says so. Feedback keeps arriving either way. See Manage subscription.

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"';
} );

PHP runs on the server and cannot know the visitor's system preference, so this forces dark for every visitor. To follow a preference or a theme toggle instead, set the same attribute wherever your theme already switches themes.

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​

PushFeedback > Feedback lists your latest entries without leaving WordPress. The list is served from a short-lived cache, so click Refresh if an entry sent seconds ago is not there yet. Manage feedback opens the same entries in your PushFeedback dashboard, where you can triage, reply, forward feedback to other tools, and generate AI summaries. Entries you archived there carry an Archived badge; the plugin shows the badge but has no archive action of its own.

Reading feedback requires an API key, which the Connect to PushFeedback flow stores automatically. If you connected by pasting a project ID instead, the Feedback page prompts you to finish setup: click Retry connection, or generate an API key in your dashboard and paste it there.

The Feedback page in wp-admin listing entries, with the Refresh and Manage feedback buttons above the list

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 any attribute from the Layout and Text documentation is supported. 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.

Shortcode block in the WordPress editor

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​

If you prefer not to use a plugin, or your setup restricts plugin installation, you can add the widget by editing your theme instead. This is an alternative to the plugin, not the recommended path.

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

    <!-- Initialize the PushFeedback widget -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/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.

Next steps​

Choose what to do next:

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