# Feedback widget for WordPress > For the complete documentation index, see [llms.txt](/llms.txt) > 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. 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](./images/wordpress-widget-modal.png) ## 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](https://app.pushfeedback.com/accounts/signup/). ## Installation ### Floating button ![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png) 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**. 1. 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](./images/wordpress-plugin-install.png) 1. 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](../quickstart.md#2-create-a-project). 1. 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](./images/wordpress-plugin-settings.png) 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](../customization/layout.mdx), [Styles](../customization/styles.mdx), and [Text](../customization/text.mdx) 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](./images/wordpress-plugin-customize.png) ### 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](#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](../integrations/email.md) 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](../administration/subscription.md). ### Support dark mode The widget switches to its dark palette when an ancestor element carries `data-theme="dark"`, normally the `` 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 `` tag's attributes: ```php 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: ```css [data-theme='dark'] { --feedback-modal-content-bg-color: #1f2937; --feedback-modal-header-text-color: #f9fafb; --feedback-modal-input-bg-color: #374151;} ``` See [Dark mode](../customization/dark-mode.mdx) 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](./images/wordpress-plugin-feedback.png) {/* TODO screenshot: dashboard views on pushfeedback.com (manage feedback, integrations, AI reports) */} ## 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](../customization/layout.mdx) and [Text](../customization/text.mdx) 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](./images/wordpress-shortcode-editor.png) Place a feedback button inline in your content: ```text [pushfeedback button_text="Send feedback" button_style="dark"] ``` Embed the form directly in a page, for example a dedicated feedback page (see [Embedded mode](cdn#embedded-form)): ```text [pushfeedback embedded="true" rating_mode="stars"] ``` Send feedback from a specific section to a different project by overriding the project ID: ```text [pushfeedback project="" 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: ```html ``` 1. Select `footer.php` and paste the feedback button just before the **body** tag, replacing `` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project): ```html Feedback ``` 1. Save your changes, then visit your WordPress website and confirm that the feedback button is visible and operational. ## Other installation modes ### Inline button ![Example page with an inline Feedback button](./images/inline-button-preview.png) The official plugin loads the stylesheet and script. Add a **Shortcode** block where you want the button and enter: ```text [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 ![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png) The official plugin loads the stylesheet and script. Add a **Shortcode** block where the form should appear and enter: ```text [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 {#advanced-setup-like-and-dislike-buttons} ![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png) The plugin shortcode cannot supply custom SVG button content. For this mode, load the widget in your theme’s `header.php`: ```html ``` Add this markup in a **Custom HTML** block at the end of a post or in your theme template: ```html Was this helpful? Helpful Not helpful ``` Replace `` with your project ID. The widget stylesheet provides the button sizing, spacing, and hidden labels. ## Next steps Choose what to do next: - [Customization](/category/customization): Adjust the widget's layout, styles, and text. - [Integrations](/category/integrations): Forward feedback to Slack, email, Jira, and more.