# PushFeedback docs > Feedback widget for your website This file contains all documentation content in a single document following the llmstxt.org standard. ## Analytics :::info The Analytics dashboard is available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. On the free plan, every feedback entry is still readable in full from your project in the dashboard. ::: The Analytics dashboard gives you an overview of the feedback collected across your documentation pages. You can access it from the main navigation by clicking **Analytics**. ![Analytics dashboard](./images/analytics.png) ## Filters At the top of the dashboard, you can narrow down the data displayed using the following filters: - **Project**: Select which project's feedback to view. If you have multiple projects, use the dropdown to switch between them. - **Start Date / End Date**: Define the time range for the analytics. By default, the dashboard shows the last 30 days. Changes to any filter are applied immediately. ## KPI cards Below the filters, five summary cards display high-level metrics for the selected period: | Card | Description | |------|-------------| | **Total** | The total number of feedback items received. | | **Sentiment** | The overall sentiment (Positive or Negative) based on whether positive + neutral feedback outweighs negative feedback. | | **Positive** | The count of feedback items rated positively. | | **Negative** | The count of feedback items rated negatively. | | **Neutral** | The count of feedback items with no clear sentiment. | Each card (except Sentiment) includes a **growth indicator** showing the percentage change compared to the previous period of the same length. An upward arrow indicates growth; a downward arrow indicates a decline. ## Feedback by page A table lists every page that received feedback during the selected period. For each page, you can see: - **Page**: The URL of the page. - **Total**: Total feedback count for that page. - **Positive / Negative / Neutral**: Breakdown by sentiment. - **Status**: Either **Looking good** (positive feedback exceeds negative) or **Needs attention** (negative feedback exceeds positive). Results are paginated with 25 rows per page. ## Newly active pages If any pages received feedback for the first time during the selected period, they appear in the **Newly active pages** section. This helps you spot documentation pages that are starting to get user engagement. Each entry shows the page URL and the total number of feedback items. ## Generate AI report :::info This feature is available on the [Unlimited](https://pushfeedback.com#pricing) plan. ::: The **Generate AI Report** button produces an AI-powered summary of your feedback data. When you click the button, the system analyzes up to 500 feedback items from the selected period and generates a report with three sections: - **Executive Summary**: A brief overview of the feedback volume, overall sentiment, and the most notable finding. - **Most Requested Improvements**: Up to 5 recurring themes extracted from the feedback, each with a description, mention count, sentiment label, and a representative user quote. - **Actionable Recommendations**: 3-5 concrete suggestions for improving your documentation based on the feedback patterns. ![AI report executive summary and most requested improvements](./images/ai-report-summary.png) ![AI report actionable recommendations](./images/ai-report-recommendations.png) Once generated, you can: - **Copy** the report text to your clipboard. - **Regenerate** the report to get a fresh analysis. - **Dismiss** the report to hide it from view. ## Download PDF Click the **Download PDF** button to save a printable version of the current dashboard view using your browser's print dialog. ## Opting out of AI reports Team admins can disable the **Generate AI Report** feature for the entire team. When this option is enabled, the button is hidden from the dashboard and no team member can generate AI reports. To opt out: 1. Go to **Team** from the main navigation. 2. In the **Details** section, check the **Disable AI reports** checkbox. 3. Click **Save**. ![Disable AI reports checkbox in Team settings](./images/disable-ai-reports.png) To re-enable AI reports, uncheck the option and save again. --- ## Manage subscription ![Manage subscription](./images/manage-subscription.png) From **Team > Manage subscription**, you can: * Upgrade your subscription. * Cancel your subscription. * View your invoices. * Change your billing details. ## What the free plan includes The free plan does not expire and needs no credit card: * Unlimited feedback collection, on one website, with one seat. * Every entry readable in your dashboard, in full, for as long as you have an account. No entry is hidden behind the plan. * The first 25 entries emailed to you. After that PushFeedback sends a monthly summary of how many entries arrived, and every entry stays readable in your dashboard. * Screenshots kept for 30 days. The feedback itself, including the message, rating, page and date, is never deleted. Paid plans add per-entry email with no cap, direct delivery to Slack, Teams, Asana, Linear, monday.com, Trello, GitHub Issues, GitLab Issues, Jira and webhooks, JavaScript events, API keys, analytics, filtering, archiving and exporting your feedback, and permanent screenshots. The Unlimited plan adds AI reports, unlimited websites and unlimited seats. --- ## Manage teams ![Teams view](./images/manage-teams.png) From the **Team** view, you can: * Change your team name. * Enable / disable the PushFeedback logo. * Invite new members. * Delete members. * Manage members. * Manage your subscription. * Delete your team. --- ## Configure URLs Each project has a list of allowed URLs. The feedback widget only works on domains in this list, preventing unauthorized use. ## Basic configuration 1. Open [app.pushfeedback.com](https://app.pushfeedback.com). 2. Log in using your account credentials. 3. Once inside the dashboard, click **Projects** in the top navigation bar. 4. Select the project to configure. 5. Click **Settings**. 6. Under **Project details**, add your site URL. Example: `https://mywebsite.com` ![Add project URL](./images/project-url.png) 7. Click **Save**. ## Additional URLs :::info This feature is only available on the [Unlimited](https://pushfeedback.com#pricing) plan. ::: If you need to add more than one URL, such as for different services like staging, development, and production, but want to use the same integration without creating separate projects, you can list new URLs in the PushFeedback dashboard. 1. Open [app.pushfeedback.com](https://app.pushfeedback.com). 2. Log in using your account credentials. 3. Once inside the dashboard, click **Projects** in the top navigation bar. 4. Select the project to configure. 5. Click **Settings**. 6. Under **Project details**, click on **+ Add more**. ![Add more URLs](./images/project-url-more.png) 7. Add additional URLS as needed. 8. Click **Save**. :::tip By default we add `localhost` and `127.0.0.0` so that you can test it in your local environment too. You can remove them once you finish integrating the widget to prevent spam. ::: ## Common error If you encounter the error message: ``` The URL from which the request is made does not match the project URL. ``` This typically means that the URL where the widget is displayed has not been added to the project's allowed URLs list. Ensure that all relevant URLs are added to avoid this issue. --- ## Remove PushFeedback logo :::info This feature is only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. ::: White labeling hides the PushFeedback logo from the bottom of the feedback widget. ## Enable white labeling 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Click **Team** in the top navigation bar. 3. Enable the **Whitelabel** option. ![Create account](./images/enable-whitelabel.png) 4. Click **Save**. 5. To ensure the changes are in place, go to any webpage where you've implemented the PushFeedback widget. The PushFeedback logo should no longer be visible at the bottom of the widget. --- ## Submit feedback Create a feedback entry for a project. This is the endpoint the feedback widget calls when a visitor submits the form; you can call it directly to submit feedback from your own UI. No API key is required by default, but the `url` field must belong to one of the domains configured for the project. Requests from other origins are rejected with `403 Forbidden`. Projects can enable the require a submit key option. Submissions to such a project must carry an API key with the `feedback:submit` scope covering the project: requests without a key get `401 Unauthorized`, and requests with a key that lacks the scope get `403 Forbidden`. This suits internal sites and backend integrations where everyone who can see the page may know the key, but outsiders cannot submit. The project configuration's `require_submit_key` field tells you whether a project has this enabled. If the project has reCAPTCHA enabled, a valid `recaptchaToken` is required. Every accepted submission returns `201`, on every plan. Feedback is never dropped or hidden because of the plan: what a plan changes is how the entry is delivered, not whether it is stored and readable. Request --- ## Get project configuration Retrieve the public configuration of a project: whitelabel status, reCAPTCHA settings, plan, and plan capabilities. The feedback widget calls this endpoint on page load. Responses are cached server side for up to 60 seconds, so plan or whitelabel changes can take up to a minute to be reflected. The `recaptcha_site_key` is safe to expose here: reCAPTCHA site keys are public by design, and the secret key is never returned. Request --- ## List project feedback List a project's feedback entries, newest first, 25 per page. Spam entries are excluded. Requires an API key with the `feedback:read` scope in the `Authorization` header. The key must cover the project in the URL; a key for another team's project, or one outside the key's project restriction, returns `404 Not Found`. Each entry with a screenshot includes a `screenshot_url` that is pre-signed and valid for five minutes. Fetch screenshots right after listing, or request the page again for fresh URLs. Request --- ## PushFeedback API The PushFeedback REST API lets you read the feedback collected for your projects and drive the same endpoints the feedback widget uses under the hood. Base URL: `https://app.pushfeedback.com` ## Authentication Endpoints that read or change your data require an API key sent in the `Authorization` header: ``` Authorization: Api-Key ``` API keys are scoped to a team, and can optionally be restricted to a single project of that team. Every key holds one or more scopes: | Scope | Allows | |-------|--------| | `feedback:read` | List a project's feedback | | `feedback:submit` | Submit feedback to projects that require a submit key | | `project:manage` | Update project settings, such as the site URL | A key can hold any combination of scopes; pick them when creating the key in the dashboard. Requests for a project the key does not cover, either because the project belongs to another team or falls outside the key's project restriction, return `404 Not Found`, so a leaked key cannot be used to probe which project identifiers exist. Requests that the key's scopes do not allow on a project it does cover return `403 Forbidden` with a message naming the missing scope. ### Getting an API key Team admins can create and revoke API keys from the team settings page on [app.pushfeedback.com](https://app.pushfeedback.com). The full key is shown once, at creation time; store it securely. Creating a key from the dashboard requires a paid plan. Keys created before a downgrade keep working, and official PushFeedback integrations such as the WordPress plugin provision their own key when you connect them, on any plan. The endpoints the widget calls on page load and on submit, such as retrieving the project configuration and submitting feedback, are public and need no API key by default. Projects can opt in to requiring a key for feedback submission; see the submit endpoint. ## Versioning The API is versioned. All endpoints live under `/api/v1/`. ## Rate limits Public endpoints are rate limited per client IP. If you exceed a limit, the API responds with `429 Too Many Requests`. Team API key, sent as `Authorization: Api-Key `. Note the `Api-Key` prefix before the key itself. Keys hold one or more scopes (`feedback:read`, `feedback:submit`, `project:manage`) and may be restricted to one project. Security Scheme Type: apiKey Header parameter name: Authorization Contact [support@pushfeedback.com](mailto:support@pushfeedback.com) --- ## Update project settings Update a project's settings. Send any subset of the supported fields; unknown fields are rejected, and validation runs before anything is written, so a request never half-applies. Supported fields: - `url`: the project's primary site URL. Feedback submissions are validated against this URL's hostname, so keep it in sync when your site changes domain. Normalized before saving: a trailing slash is stripped. - `whitelabel`: hides the "Powered by PushFeedback" branding in the widget. This is a team-wide setting: it applies to every project of the team. Enabling it requires a paid plan and returns `403 Forbidden` otherwise; disabling it is always allowed. Widget configuration is cached for up to 60 seconds, so a change can take up to a minute to reach visitors. Requires an API key with the `project:manage` scope in the `Authorization` header. The key must cover the project in the URL; a key for another team's project, or one outside the key's project restriction, returns `404 Not Found`. A key without the `project:manage` scope returns `403 Forbidden`. Request --- ## Accessibility The feedback widget ships with keyboard and screen reader support enabled by default. This page describes that behavior and the properties you can use to adjust it. ## Keyboard support | Key | Action | | --- | --- | | Enter or Space | Opens the modal when the feedback button has focus. | | Tab | Moves to the next control. While the modal is open, focus stays inside it. | | Shift + Tab | Moves to the previous control, also confined to the modal. | | Esc | Closes the modal. | | Enter | Submits the form when the send button has focus. | Closing the modal with Esc keeps whatever the user has typed, so an accidental key press does not discard a half-written message or an attached screenshot. Reopening the modal restores it. The screenshot editor closes the same way, but Esc works in layers there. See [Screenshot editor](#screenshot-editor) below. ## Screenshot editor The screenshot editor closes on Esc and on clicking outside it, the same as the feedback modal. Both honour `escape-close` and `click-outside-close`. Either way it closes the editor only and returns you to the feedback form. A stray click never dismisses the whole widget. Any screenshot already attached to the feedback form is kept; only edits made in the editor since it opened are discarded, exactly like the Cancel button. Clicks that begin inside the editor are ignored, so dragging an annotation and releasing past the edge of the editor does not close it. Because closing discards annotations, Esc clears whatever is on top before it closes anything. In order: 1. While the browser's screen sharing prompt is open, that prompt owns the keyboard and the widget ignores Esc entirely. 2. If the colour picker is open, Esc closes the picker and leaves the editor and your annotations in place. 3. If an annotation is selected, Esc clears the selection, the way drawing tools do. 4. Otherwise, Esc closes the editor and returns to the feedback form. So a user who has just selected a shape and presses Esc drops the selection rather than their work. Pressing it again closes the editor. ## Focus behavior When the modal opens, focus moves to the dialog itself, so screen readers announce the modal title before reading its contents. Focus is then confined to the modal for as long as it is open. When the modal closes, focus returns to the element that opened it, usually the feedback button, so keyboard users resume where they left off. Returning from the screenshot editor, whether you saved, cancelled, or the capture failed, puts focus back on the feedback form. In [embedded mode](../installation/cdn#embedded-form), the widget is part of the page rather than an overlay. It has no close button, does not trap focus, and does not respond to Esc or to clicks outside it. It is exposed as a labelled region rather than a dialog, since there is no dialog to open or close. ## Disabling Esc to close If your site already binds Esc to something else, such as closing a search palette or a navigation drawer, set `escape-close` to `false`: ```html Button text ``` The close button, clicking outside the modal, and the browser back button all continue to work. See [`click-outside-close` and `history-close`](layout) for those. `escape-close` applies to the screenshot editor as well as the feedback modal. ## Screen reader labels The modal exposes itself as a dialog labelled by its title, and every control has an accessible name. The names of controls that show only an icon can be translated or reworded: | Property | Default value | | --- | --- | | `close-button-label` | `Close feedback form` | | `rating-positive-label` | `Yes` | | `rating-negative-label` | `No` | | `rating-star-label` | `Rate {rating} out of 5` | In `rating-star-label`, the `{rating}` placeholder is replaced with the number of the star, giving names such as "Rate 3 out of 5". ```html Button text ``` See [Text](text) for the full list of text properties. ## Color contrast If you override the widget colors, check the resulting combinations against the [WCAG contrast guidelines](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum), particularly for placeholder text and the unselected rating icons, which sit on lighter backgrounds than the rest of the modal. See [Styles](styles) for the available custom properties. --- ## Dark mode The feedback widget automatically switches to dark mode when your site uses a dark theme. You can also enable it manually. ## How to enable the dark mode To activate dark mode, add a `data-theme` attribute to your site's `` tag. ```html ``` This change signals PushFeedback to switch to its dark theme. ## Example ![Feedback widget in dark mode](./images/dark-mode.png) --- ## Events :::info This feature is only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. The widget checks the project's plan capabilities before emitting events, and that configuration is cached for up to 60 seconds, so a plan change can take a minute to take effect. ::: This guide explains how to listen for events emitted by the feedback widget and handle them with JavaScript. ## Events overview The feedback widget emits the following events: - **`feedbackSent`**: Emitted when feedback is successfully submitted. See [Feedback event object format](#feedback-event-object-format) for the payload shape. - **`feedbackError`**: Emitted if there is an error during feedback submission. By listening to these events, you can handle feedback dynamically, such as storing it in your database or performing any custom actions. ## How to listen for events You can listen for `feedbackSent` and `feedbackError` events globally by attaching event listeners directly to the `document` object. This approach captures events emitted anywhere in the DOM, making it convenient to handle feedback without needing direct access to the feedback widget. Here’s how you can add event listeners to capture these events: ```javascript document.addEventListener('DOMContentLoaded', () => { document.addEventListener('feedbackSent', (event) => { const feedback = event.detail.feedback; console.log('Feedback submitted:', feedback); // Example custom action: store feedback in your database storeFeedbackInDatabase(feedback); }); document.addEventListener('feedbackError', (event) => { const error = event.detail.error; console.error('Feedback submission error:', error); // Example custom action: show error message to the user showErrorToUser(error.message); }); }); ``` ```ts const FeedbackListener = () => { useEffect(() => { // Define the handler for feedbackSent const handleFeedbackSent = (event) => { const feedback = event.detail.feedback; console.log('Feedback submitted:', feedback); // Example custom action: store feedback in your database storeFeedbackInDatabase(feedback); }; // Define the handler for feedbackError const handleFeedbackError = (event) => { const error = event.detail.error; console.error('Feedback submission error:', error); // Example custom action: show error message to the user showErrorToUser(error.message); }; // Add event listeners document.addEventListener('feedbackSent', handleFeedbackSent); document.addEventListener('feedbackError', handleFeedbackError); // Cleanup event listeners on unmount return () => { document.removeEventListener('feedbackSent', handleFeedbackSent); document.removeEventListener('feedbackError', handleFeedbackError); }; }, []); // Empty dependency array means this effect runs only on mount and unmount return Listening for feedback events...; }; export default FeedbackListener; ``` ## Feedback event object format The `feedbackSent` event includes a `detail` object whose `feedback` property has the following structure: ```json { feedback: { id: string; // Unique ID for the feedback returned from the API url: string; // The URL where the feedback was submitted message: string; // Feedback message provided by the user email: string; // User's email address project: string; // Project identifier screenshot: string; // Base64-encoded screenshot, if available rating: number; // User's rating, if provided ratingMode: string; // Rating mode selected by the user verification: string; // Verification information session: string; // Session ID from localStorage }; } ``` The `feedbackError` event also includes a `detail` object with the following structure: ```json { error: { status: number; // HTTP status code returned by the server or 500 for general errors message: string; // Detailed error message returned from the server or error object for general errors }; } ``` --- ## Layout The feedback widget accepts HTML attributes to control its position, style, rating mode, and visibility options. ## Usage To customize the properties, you need to set the appropriate attributes on the `` element in your HTML. For example: ```html Feedback ``` ## Properties The table below lists all the available properties you can set: | Property | Description | |------------------------|-----------------------------------------------------------------------------------------------| | `project` | **Required****Type**: `string`The project ID. | | `api-key` | **Type**: `string`**Default value**: `""` Required when the project has **require a submit key** enabled. Use a key scoped to `feedback:submit` only: see [API key security](/security/api-keys#requiring-a-key-for-submissions).| | `button-position` | **Type**: `string`**Default value**: `default`**Available values:** `default`, `bottom-right`, `bottom-left`, `top-right`, `top-left`, `center-right`, `center-left`Position of the button. Use `center-right` or `center-left` to display the button as a vertical tab attached to the edge of the screen.| | `button-style` | **Type**: `string`**Default value**: `default`**Available values:** `default`, `dark`, `light`Style of the button.| | `click-outside-close` | **Type**: `boolean`**Default value**: `true`Whether clicking outside the feedback modal closes it. Any message typed by the user is kept, so an accidental click does not discard their input. Also applies to the screenshot editor, where clicking outside returns to the feedback form. See [Accessibility](accessibility).| | `custom-font` | **Type**: `boolean`**Default value**: `false`When set to `true`, the [Inter font](https://fonts.google.com/specimen/Inter) will not be loaded. Useful if your site already uses a different font, enabling a quicker load time.| | `email-address` | **Type**: `string`Initial value for the email input field. | | `escape-close` | **Type**: `boolean`**Default value**: `true`Whether pressing Esc closes the feedback modal. Like clicking outside, any message typed by the user is kept. Also applies to the screenshot editor. Set to `false` if your site already binds Esc to something else. See [Accessibility](accessibility).| | `hide-email` | **Type**: `boolean`**Default value**: `false`Whether to hide the email input. | | `hide-icon` | **Type**: `boolean`**Default value**: `false`Whether to hide the button icon.| | `hide-mobile` | **Type**: `boolean`**Default value**: `false` When set to `true`, hides the feedback button on mobile devices.| | `hide-privacy-policy` | **Type**: `boolean`**Default value**: `true`Whether to hide the privacy policy checkbox. | | `hide-rating` | **Type**: `boolean`**Default value**: `false` Wether to hide the ratings input. | | `hide-screenshot-button` | **Type**: `boolean`**Default value**: `false`Whether to hide the screenshot button.| | `history-close` | **Type**: `boolean`**Default value**: `true`Whether pressing the browser back button while the feedback modal is open closes it instead of navigating away. Especially useful on mobile, where going back is the natural way to dismiss an overlay.| | `is-email-required` | **Type**: `boolean`**Default value**: `false`When set to `true`, users must provide an email address to submit feedback. Tip: Remember to also update the [`email-placeholder`](text) property to remove "(optional)" from the text when using this option. | | `metadata` | **Type**: `string`**Default value**: ``Any metadata to tag feedback submissions. This can be used to attach additional context or categorization information to the feedback.| | `modal-position` | **Type**: `string`**Default value**: `center`**Available values:** `center`, `sidebar-right`, `sidebar-left`, `top-right`, `top-left`, `bottom-right`, `bottom-left`, `center-right`, `center-left`Position of the feedback modal.| | `rating` | **Type**: `number`**Default value**: -1 (neutral) Rating selected by default. **Available values:** `stars` mode: 1...5. `thumbs` mode: `0` dislike and `1` like. `-1` means neutral in both modes. | | `rating-mode` | **Type**: `string`**Default value**: `thumbs` **Available values:** `thumbs`, `stars`Type of rating system.| | `recaptcha-text` | **Type**: `string`**Default value**: `This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.`Text displayed in the footer when reCAPTCHA is enabled. Supports a limited set of HTML tags (`a`, `b`, `br`, `code`, `em`, `i`, `p`, `small`, `span`, `strong`, `u`) and attributes (`href`, `target`, `rel`, `title`). | | `sessionId` | **Type**: `string`**Default value**: Autogenerated Identifies the current user session. By default, this value is autogenerated if not provided. You can override it to specify a custom session ID, which can be useful for tracking or linking specific sessions across different analytics tools. | | `submit` | **Type**: `boolean`**Default**: `false`If set to `true`, submits feedback automatically without opening the modal, using the provided `rating` value. If not set, the default rating of `0` (negative feedback) is sent. | | `privacy-policy-text` | **Type**: `string`**Default value**: `I have read and expressly consent to the terms of the Privacy Policy.`Privacy policy text. | ## Examples Here you'll find practical examples to guide you in customizing the PushFeedback button for various use cases. ### Change the button style ### Create a floating button ### Add the widget to any button ### Like / dislike buttons ### Change modal position :::info For an optimal viewing experience of this demo, select the **0.25x** zoom level on CodePen. ::: ### Prefill email ### Enable privacy policy ### Enable stars rating --- ## Programmatic control You can open the feedback modal from your own JavaScript instead of relying on the built-in `` trigger. This is useful when you want a custom trigger, such as a link, an icon, or a keyboard shortcut. ## The openModal() method `` exposes a public `openModal()` method: ```ts openModal(): Promise ``` Calling it opens the feedback modal, playing the same entrance animation as when a user clicks a ``. `openModal()` is only available on ``. `` doesn't expose this method: it calls `openModal()` on its own internal `` element when clicked. ## Usage To call `openModal()`, get a reference to the `` element and call the method on it: 1. Add a `` element to your page with an `id` you can select later: ```html ``` 2. Add your own trigger element, such as a link or icon: ```html Give feedback ``` 3. Get a reference to the `` element and call `openModal()` when your trigger is activated: ```javascript document.addEventListener('DOMContentLoaded', () => { const feedbackModal = document.getElementById('my-feedback-modal'); const trigger = document.getElementById('custom-feedback-trigger'); trigger.addEventListener('click', (event) => { event.preventDefault(); feedbackModal.openModal(); }); }); ``` See [Embedded mode](../installation/cdn#embedded-form) if you want the feedback form to display without any trigger at all. --- ## Styles Two approaches for customizing the feedback widget styles: 1. **CSS custom properties**: Override colors, fonts, spacing, and sizing. 2. **CSS parts** (advanced): Target specific elements inside the Shadow DOM and override any CSS property. ## CSS custom properties The feedback widget exposes CSS custom properties for colors, fonts, border radius, and more. Override them to match your site's design. ### Usage To customize these properties, define them in your website's CSS using the `:root` selector for global changes or a specific selector to target particular areas: ```css :root { --feedback-primary-color: #00D68F; ... } ``` For example, to give the thumbs up and thumbs down buttons distinct colors so users get a visual hint of the feedback they are about to leave: ```css :root { --feedback-modal-rating-button-positive-selected-color: #16a34a; --feedback-modal-rating-button-positive-selected-border-color: #16a34a; --feedback-modal-rating-button-negative-selected-color: #dc2626; --feedback-modal-rating-button-negative-selected-border-color: #dc2626; } ``` ### Properties The tables below lists all the available properties you can override: #### Global properties ```css :root { /* Base Colors */ --feedback-color-white: #ffffff; --feedback-color-black: #191919; --feedback-color-gray-100: #f1f3f4; --feedback-color-gray-300: #d1d5db; --feedback-color-gray-400: #9ca3af; --feedback-color-gray-500: #999999; --feedback-color-gray-600: #5f6368; --feedback-color-gray-700: #363636; --feedback-color-gray-800: #2a2a2a; --feedback-color-blue-500: #3b82f6; --feedback-color-blue-600: #0070F4; --feedback-color-orange: #ffb422; --feedback-color-light: #ccc; /* Colors */ --feedback-primary-color: var(--feedback-color-blue-600); --feedback-secondary-color: var(--feedback-color-gray-100); --feedback-light-color: var(--feedback-color-light); --feedback-dark-color: var(--feedback-color-black); --feedback-text-color: var(--feedback-color-gray-600); --feedback-white-color: var(--feedback-color-white); --feedback-highlight-color: var(--feedback-color-orange); /* Fonts */ --feedback-font-family: "Inter", "Tahoma", "sans-serif"; --feedback-heading-font-size: 20px; --feedback-text-font-size: 14px; } ``` #### Feedback button properties ```css :root { /* Feedback button*/ --feedback-button-border-radius: 20px; --feedback-button-dark-bg-color: var(--feedback-primary-color); --feedback-button-dark-text-color: var(--feedback-white-color); --feedback-button-dark-icon-color: var(--feedback-white-color); --feedback-button-light-bg-color: var(--feedback-white-color); --feedback-button-light-text-color: var(--feedback-primary-color); --feedback-button-light-icon-color: var(--feedback-primary-color); --feedback-button-text-font-size: var(--feedback-text-font-size); --feedback-button-text-font-weight: 600; --feedback-button-z-index: 300; } ``` #### Feedback modal properties ```css :root { --feedback-modal-button-bg-color: var(--feedback-white-color); --feedback-modal-button-bg-color-active: var(--feedback-white-color); --feedback-modal-button-border-color: var(--feedback-light-color); --feedback-modal-button-border-color-active: var(--feedback-primary-color); --feedback-modal-button-border-radius: 4px; --feedback-modal-button-font-size: var(--feedback-text-font-size); --feedback-modal-button-icon-color: var(--feedback-dark-color); --feedback-modal-button-icon-color-active: var(--feedback-primary-color); --feedback-modal-button-submit-bg-color: var(--feedback-primary-color); --feedback-modal-button-submit-bg-color-hover: var(--feedback-primary-color); --feedback-modal-button-submit-border-color-hover: var(--feedback-primary-color); --feedback-modal-button-submit-text-color: var(--feedback-white-color); --feedback-modal-button-submit-text-color-hover: var(--feedback-white-color); --feedback-modal-button-text-color: var(--feedback-dark-color); --feedback-modal-button-text-color-active: var(--feedback-primary-color); --feedback-modal-close-bg-color: var(--feedback-white-color); --feedback-modal-close-color: var(--feedback-dark-color); --feedback-modal-content-max-width: 600px; --feedback-modal-content-sidebar-max-width: 300px; --feedback-modal-content-bg-color: var(--feedback-white-color); --feedback-modal-content-border-color: var(--feedback-light-color); --feedback-modal-content-border-radius: 8px; --feedback-modal-content-position-bottom: 10px; --feedback-modal-content-position-left: 10px; --feedback-modal-content-position-right: 10px; --feedback-modal-content-position-top: 10px; --feedback-modal-content-text-color: var(--feedback-text-color); --feedback-modal-content-z-index: 300; --feedback-modal-element-hover-border-color: var(--feedback-primary-color); --feedback-modal-element-selected-border-color: var(--feedback-primary-color); --feedback-modal-footer-link: var(--feedback-dark-color); --feedback-modal-header-font-size: var(--feedback-heading-font-size); --feedback-modal-header-font-weight: 500; --feedback-modal-header-text-color: var(--feedback-dark-color); --feedback-modal-input-bg-color: var(--feedback-color-white); --feedback-modal-input-border-color: rgba(0, 0, 0, 0.12); --feedback-modal-input-border-color-hover: rgba(0, 0, 0, 0.24); --feedback-modal-input-border-color-focused: var(--feedback-primary-color); --feedback-modal-input-border-radius: 4px; --feedback-modal-input-font-size: var(--feedback-text-font-size); --feedback-modal-input-text-color: var(--feedback-text-color); --feedback-modal-message-font-size: var(--feedback-text-font-size); --feedback-modal-modal-wrapper-z-index: 300; --feedback-modal-rating-button-color: var(--feedback-text-color); --feedback-modal-rating-button-selected-color: var(--feedback-primary-color); --feedback-modal-rating-button-positive-color: var(--feedback-modal-rating-button-color); --feedback-modal-rating-button-positive-bg-color: transparent; --feedback-modal-rating-button-positive-border-color: var(--feedback-modal-button-border-color); --feedback-modal-rating-button-positive-selected-color: var(--feedback-modal-rating-button-selected-color); --feedback-modal-rating-button-positive-selected-bg-color: var(--feedback-modal-button-bg-color-active); --feedback-modal-rating-button-positive-selected-border-color: var(--feedback-modal-button-border-color-active); --feedback-modal-rating-button-negative-color: var(--feedback-modal-rating-button-color); --feedback-modal-rating-button-negative-bg-color: transparent; --feedback-modal-rating-button-negative-border-color: var(--feedback-modal-button-border-color); --feedback-modal-rating-button-negative-selected-color: var(--feedback-modal-rating-button-selected-color); --feedback-modal-rating-button-negative-selected-bg-color: var(--feedback-modal-button-bg-color-active); --feedback-modal-rating-button-negative-selected-border-color: var(--feedback-modal-button-border-color-active); --feedback-modal-rating-button-stars-selected-color: var(--feedback-highlight-color); } ``` #### Screenshot editor properties ```css :root { --feedback-canvas-editor-bg-color: var(--feedback-white-color); --feedback-canvas-editor-border-color: var(--feedback-light-color); --feedback-canvas-editor-header-bg-color: var(--feedback-secondary-color); --feedback-canvas-editor-tool-bg-color: var(--feedback-white-color); --feedback-canvas-editor-tool-bg-hover: var(--feedback-secondary-color); --feedback-canvas-editor-tool-bg-active: var(--feedback-primary-color); --feedback-canvas-editor-tool-text-color: var(--feedback-text-color); --feedback-canvas-editor-tool-text-active: var(--feedback-white-color); --feedback-canvas-editor-action-primary-bg: var(--feedback-primary-color); --feedback-canvas-editor-action-primary-text: var(--feedback-white-color); --feedback-canvas-editor-action-secondary-bg: var(--feedback-white-color); --feedback-canvas-editor-action-secondary-text: var(--feedback-text-color); --feedback-canvas-editor-action-secondary-border: var(--feedback-light-color); --feedback-canvas-editor-divider-color: var(--feedback-light-color); --feedback-canvas-editor-content-bg: var(--feedback-secondary-color); --feedback-canvas-editor-resize-handle-color: var(--feedback-primary-color); --feedback-canvas-editor-slider-track: var(--feedback-light-color); } ``` #### Dark mode properties ```css [data-theme='dark'] { --feedback-text-color: var(--feedback-color-gray-400); --feedback-light-color: var(--feedback-color-gray-700); --feedback-modal-button-bg-color-active: transparent; --feedback-modal-button-icon-color: var(--feedback-color-gray-300); --feedback-modal-button-text-color: var(--feedback-color-gray-300); --feedback-modal-close-bg-color: transparent; --feedback-modal-close-color: var(--feedback-color-gray-300); --feedback-modal-content-bg-color: var(--feedback-dark-color); --feedback-modal-content-text-color: var(--feedback-color-gray-400); --feedback-modal-footer-link: var(--feedback-color-gray-400); --feedback-modal-header-text-color: var(--feedback-white-color); --feedback-modal-input-bg-color: var(--feedback-color-gray-800); --feedback-modal-input-border-color: rgba(255, 255, 255, 0.1); --feedback-modal-input-border-color-hover: rgba(255, 255, 255, 0.2); --feedback-modal-input-border-color-focused: var(--feedback-primary-color); --feedback-modal-input-text-color: var(--feedback-color-gray-300); --feedback-modal-rating-button-color: var(--feedback-color-gray-300); --feedback-modal-screenshot-close-color: var(--feedback-white-color); --feedback-modal-screenshot-header-bg-color: var(--feedback-dark-color); --feedback-modal-screenshot-header-text-color: var(--feedback-white-color); --feedback-canvas-editor-bg-color: var(--feedback-dark-color); --feedback-canvas-editor-border-color: var(--feedback-light-color); --feedback-canvas-editor-header-bg-color: var(--feedback-light-color); --feedback-canvas-editor-tool-bg-color: var(--feedback-light-color); --feedback-canvas-editor-tool-bg-hover: #4a4a4a; --feedback-canvas-editor-tool-text-color: var(--feedback-white-color); --feedback-canvas-editor-action-secondary-bg: var(--feedback-light-color); --feedback-canvas-editor-action-secondary-text: var(--feedback-white-color); --feedback-canvas-editor-action-secondary-border: var(--feedback-light-color); --feedback-canvas-editor-content-bg: var(--feedback-light-color); --feedback-canvas-editor-divider-color: #4a4a4a; --feedback-canvas-editor-slider-track: #4a4a4a; } ``` ### Example ## CSS parts For fine-grained control, the widget exposes CSS parts that let you style elements inside the Shadow DOM using the `::part()` pseudo-element. Unlike CSS custom properties, CSS parts let you override any CSS property of the exposed elements. **Syntax:** ```css component-name::part(part-name) { /* your styles */ } ``` ### Available parts #### Feedback button | Part | Description | | --- | --- | | `button` | The feedback button. | | `icon` | The icon inside the button. | #### Feedback modal | Part | Description | | --- | --- | | `wrapper` | The outer wrapper of the modal. | | `overlay` | The background overlay behind the modal. | | `modal` | The modal container. | | `header` | The modal header. | | `title` | The modal title. | | `powered-by` | The "Powered by PushFeedback" label. | | `close-button` | The close button. | | `body` | The modal body. | | `form` | The feedback form. | | `rating` | The rating section. | | `rating-title` | The rating question text. | | `rating-buttons` | The container of the rating buttons. | | `rating-button` | Each rating button (thumbs or stars). | | `rating-button-positive` | The thumbs up button. | | `rating-button-negative` | The thumbs down button. | | `message-input` | The message textarea. | | `email-input` | The email input. | | `privacy` | The privacy policy checkbox row. | | `buttons` | The container of the action buttons. | | `screenshot-button` | The screenshot button. | | `submit-button` | The send button. | | `success-message` | The success message. | | `error-message` | The error message. | | `footer` | The modal footer. | #### Screenshot capture bar {#screenshot-capture-bar} The capture bar appears when someone takes a screenshot from an embedded form. It floats at the top of the browser viewport, outside any clipping or positioning constraints applied to the embedded form. It uses the existing modal color, border, and font properties listed above. For more specific styling, target these parts through the `feedback-modal` element: | Part | Description | | --- | --- | | `screenshot-positioner` | The capture bar container. | | `screenshot-positioner-message` | The instruction and icon. | | `screenshot-positioner-cancel-button` | The cancel button. | | `screenshot-positioner-capture-button` | The capture button. | #### Screenshot editor The screenshot editor also covers the browser viewport when opened from an embedded form. Target its parts through the `feedback-modal` element using the `canvas-editor-` prefix. | Part | Description | | --- | --- | | `canvas-editor-overlay` | The background overlay behind the editor. | | `canvas-editor-modal` | The editor container. | | `canvas-editor-header` | The editor header. | | `canvas-editor-title` | The editor title. | | `canvas-editor-toolbar` | The toolbar with the annotation tools. | | `canvas-editor-tool-button` | Each annotation tool button. | | `canvas-editor-cancel-button` | The cancel button. | | `canvas-editor-save-button` | The save button. | | `canvas-editor-content` | The canvas area. | | `canvas-editor-canvas` | The annotation canvas. | ### Finding available parts 1. Right-click the widget and select **Inspect**. 2. Expand the `#shadow-root` inside the component tag. 3. Look for elements with `part="..."` attributes. ### Examples #### Custom feedback button ```css /* Square button with custom color */ feedback-button::part(button) { border-radius: 8px; background-color: #ff5722; color: white; box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3); transition: all 0.2s ease; } /* Hover effect */ feedback-button::part(button):hover { background-color: #f4511e; transform: translateY(-2px); } ``` #### Custom modal styling ```css /* Rounded modal with a custom shadow */ feedback-modal::part(modal) { border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } /* Uppercase title */ feedback-modal::part(title) { text-transform: uppercase; letter-spacing: 0.05em; } /* Pill-shaped send button */ feedback-modal::part(submit-button) { border-radius: 50px; padding: 10px 24px; } ``` #### Custom screenshot editor styling ```css /* Rounded editor with custom toolbar buttons */ feedback-modal::part(canvas-editor-modal) { border-radius: 16px; } feedback-modal::part(canvas-editor-tool-button) { border-radius: 50%; } ``` #### Custom screenshot capture bar styling ```css feedback-modal::part(screenshot-positioner) { border-radius: 12px; box-shadow: 0 12px 28px rgb(0 0 0 / 20%); } feedback-modal::part(screenshot-positioner-capture-button) { border-radius: 8px; } ``` --- ## Text The feedback widget exposes text properties for every label, placeholder, and message. Override them to match your brand's tone or support multiple languages (i18n). ## Usage Set text attributes on `` or `` in your HTML. Here's an example: ```html Button text ``` ## Properties The table below lists all the available properties you can override: | Property | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | | `error-message` | **Type**: `string`**Default value**: `Please try again later."`Message displayed when there's an error submitting feedback.| | `error-message-401` | **Type**: `string`**Default value**: `This project requires a valid API key to submit feedback. Check the api-key attribute.`Message displayed when a submission is rejected because the project requires an [`api-key`](layout#properties) and none was provided, or the provided key is invalid.| | `modal-title-error-4-0-3` | **Type**: `string`**Default value**: `The request URL does not match the one defined in PushFeedback for this project."`Message displayed when there's a 403 error submitting feedback.| | `modal-title-error-4-0-4` | **Type**: `string`**Default value**: `We could not find the provided project id in PushFeedback.`Message displayed when there's a 404 error submitting feedback.| | `close-button-label` | **Type**: `string`**Default value**: `Close feedback form`Accessible name for the modal close button, announced by screen readers. Not shown visually.| | `email-placeholder` | **Type**: `string`**Default value**: `Email address (optional)`Placeholder text for the email input field. | | `footer-text` | **Type**: `string`**Default**: `""`Optional footer text displayed after "Powered by Pushfeedback.com". Supports a limited set of HTML tags (`a`, `b`, `br`, `code`, `em`, `i`, `p`, `small`, `span`, `strong`, `u`) and attributes (`href`, `target`, `rel`, `title`). | | `message-placeholder` | **Type**: `string`**Default value**: `Share your thoughts...`Placeholder for the feedback message input.| | `modal-title` | **Type**: `string`**Default value**: `Share your feedback`Title of the feedback modal. | | `modal-title-error` | **Type**: `string`**Default value**: `Oops!`Title displayed when there's an error submitting feedback.| | `modal-title-success` | **Type**: `string`**Default value**: `Thanks for your feedback!`Title displayed upon successful feedback submission.| | `privacy-policy-text` | **Type**: `string`**Default value**: `I have read and expressly consent to the terms of the Privacy Policy.`Privacy policy text. Supports a limited set of HTML tags (`a`, `b`, `br`, `code`, `em`, `i`, `p`, `small`, `span`, `strong`, `u`) and attributes (`href`, `target`, `rel`, `title`). | | `rating-negative-label` | **Type**: `string`**Default value**: `No`Accessible name and tooltip for the negative rating button (thumbs mode).| | `rating-placeholder` | **Type**: `string`**Default value**: `Was this page helpful?`Heading for the feedback rating feature (thumbs).| | `rating-positive-label` | **Type**: `string`**Default value**: `Yes`Accessible name and tooltip for the positive rating button (thumbs mode).| | `rating-star-label` | **Type**: `string`**Default value**: `Rate {rating} out of 5`Accessible name for each star button (stars mode). The `{rating}` placeholder is replaced with the star number.| | `rating-stars-placeholder` | **Type**: `string`**Default value**: `How would you rate this page`Heading for the feedback rating feature (stars).| | `screenshot-attached-text` | **Type**: `string`**Default value**: `Screenshot attached`Text displayed when a screenshot is attached to the feedback.| | `screenshot-button-text` | **Type**: `string`**Default value**: `Add a screenshot`Text for the button that opens the screenshot capture interface.| | `screenshot-taking-text` | **Type**: `string`**Default value**: `Taking screenshot...`Text displayed while capturing a screenshot.| | `screenshot-positioning-text` | **Type**: `string`**Default value**: `Scroll to the area you want to capture.`Instruction in the capture bar shown before taking a screenshot from an embedded form.| | `screenshot-positioning-capture-text` | **Type**: `string`**Default value**: `Capture this view`Label for the capture bar's confirmation button.| | `screenshot-positioning-cancel-text` | **Type**: `string`**Default value**: `Cancel`Label for the capture bar's cancel button.| | `screenshot-edit-text-button-text` | **Type**: `string`**Default value**: `Edit text`Text for the button that opens the text editing interface for screenshots.| | `screenshot-editor-title` | **Type**: `string`**Default value**: `Edit screenshot`Title of the screenshot editor modal.| | `screenshot-editor-cancel-text` | **Type**: `string`**Default value**: `Cancel`Text for the cancel button in the screenshot editor.| | `screenshot-editor-save-text` | **Type**: `string`**Default value**: `Save`Text for the save button in the screenshot editor.| | `screenshot-size-label-text` | **Type**: `string`**Default value**: `Size:`Label text for the screenshot size selector.| | `screenshot-border-label-text` | **Type**: `string`**Default value**: `Border:`Label text for the screenshot border options.| | `screenshot-edit-text-prompt-text` | **Type**: `string`**Default value**: `Edit text:`Prompt text for the screenshot text editing interface.| | `screenshot-error-general` | **Type**: `string`**Default value**: `Failed to capture screenshot.`General error message when screenshot capture fails.| | `screenshot-error-permission` | **Type**: `string`**Default value**: `Permission denied. Please allow screen sharing to take screenshots.`Error message when screen sharing permission is denied.| | `screenshot-error-not-supported` | **Type**: `string`**Default value**: `Screen capture is not supported in this browser.`Error message when the browser doesn't support screen capture.| | `screenshot-error-not-found` | **Type**: `string`**Default value**: `No screen sources available for capture.`Error message when no screen sources are available.| | `screenshot-error-cancelled` | **Type**: `string`**Default value**: `Screenshot capture was cancelled.`Error message when user cancels screenshot capture.| | `screenshot-error-browser-not-supported` | **Type**: `string`**Default value**: `Your browser does not support screen capture. Please use a current desktop browser such as Edge, Chrome, Firefox, or Safari.`Error message for unsupported browsers.| | `screenshot-error-unexpected` | **Type**: `string`**Default value**: `An unexpected error occurred. Please try again.`Error message for unexpected errors during screenshot capture.| | `send-button-text` | **Type**: `string`**Default value**: `Send`Text for the button that submits feedback. | | `success-message` | **Type**: `string`**Default value**: `""`Custom message displayed in the modal body after feedback is successfully submitted. When empty, no extra message appears below the success title.| ## Example --- ## Vue This guide explains how to integrate the PushFeedback button into your Vue.js application. ## **Prerequisites** - A Vue.js project set up (preferably using Vue CLI). - Familiarity with Vue's component structure. - Your PushFeedback project ID. ## **1. Install via NPM** Navigate to your Vue project directory and run: ```npm install pushfeedback ``` ## **2. Add PushFeedback to Your Component** ### **a. Import the Stylesheet** In your main `App.vue` or any other global component, add the following to the ` ``` This code snippet shows how to integrate the PushFeedback widget. Pay special attention to the lines: ```astro Feedback ``` Replace `` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project). And the global style: ```astro ``` This is required to make sure the button is placed on top of the right sidebar. 1. Load the dependencies in your Astro configuration file (`astro.config.mjs`): ```js export default defineConfig({ integrations: [ starlight({ head: [ { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css', }, }, { tag: 'script', attrs: { type: 'module', src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js', }, }, ], (...) }), ], }) ``` 1. Load the custom component you've created by overriding the default footer with `CustomFooter.astro`: ```js export default defineConfig({ integrations: [ starlight({ (...) components: { Footer: './src/components/CustomFooter.astro', }, (...) }), ], }) ``` 1. Start your Starlight project by running `npm run dev` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site. ### Inline button ![Example page with an inline Feedback button](./images/inline-button-preview.png) 1. Add the PushFeedback assets to the `head` option of `starlight()` in `astro.config.mjs`: ```js head: [ { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css', }, }, { tag: 'script', attrs: { type: 'module', src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js', }, }, ] ``` 2. Put this markup in `src/components/CustomFooter.astro`, after the page content: ```astro Feedback ``` Remove the floating button from the footer when you want only this mode. ### Embedded form ![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png) 1. Add the PushFeedback assets to the `head` option of `starlight()` in `astro.config.mjs`: ```js head: [ { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css', }, }, { tag: 'script', attrs: { type: 'module', src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js', }, }, ] ``` 2. Put this markup in `src/components/CustomFooter.astro`, after the page content: ```astro ``` Remove the floating button from the footer when you want only this mode. ### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons} ![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png) 1. Add the PushFeedback assets to the `head` option of `starlight()` in `astro.config.mjs`: ```js head: [ { tag: 'link', attrs: { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css', }, }, { tag: 'script', attrs: { type: 'module', src: 'https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js', }, }, ] ``` 2. Put this markup in `src/components/CustomFooter.astro`, after the page content: ```astro Was this helpful? Helpful Not helpful ``` Remove the floating button from the footer when you want only this mode. ## 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. --- ## Feedback widget for VitePress PushFeedback collects user feedback directly from your website. This guide covers installation in a VitePress project. ## Prerequisites Before you begin, you need: - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A VitePress site and Node.js installed. ## Installation ### Floating button ![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png) 1. Install PushFeedback: ```console npm install pushfeedback ``` :::info If you're using yarn as your package manager, run `yarn add pushfeedback` instead of the npm command above. ::: 1. Create a custom layout component. In your `.vitepress/theme` directory, create a file named `Layout.vue`: ```vue ``` Replace `` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project). 1. Create or update your theme's index file at `.vitepress/theme/index.js` (or `.ts`): ```js export default { extends: DefaultTheme, Layout: Layout }; ``` 1. Start your VitePress project by running `npm run docs:dev` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site. ### Inline button ![Example page with an inline Feedback button](./images/inline-button-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create `.vitepress/theme/InlineFeedback.vue` with the stylesheet, loader, and widget: ```vue ``` Render `InlineFeedback` where you want it in the page content. ### Embedded form ![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create `.vitepress/theme/EmbeddedFeedback.vue` with the stylesheet, loader, and widget: ```vue ``` Render `EmbeddedFeedback` where you want it in the page content. ### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons} ![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create `.vitepress/theme/FeedbackThumbs.vue` with the stylesheet, loader, and widget: ```vue ``` Render `FeedbackThumbs` after the article content. ## 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. --- ## Feedback widget for Vue.js PushFeedback collects user feedback directly from your website. This guide covers installation in a Vue.js project using NPM. ## Prerequisites Before you begin, you need: - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A Vue.js project and Node.js installed. ## Installation ### Floating button ![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png) 1. Install PushFeedback: ```console npm install pushfeedback ``` 1. Open your main Vue component or the desired Vue component where you want the feedback widget to appear. Then, incorporate the PushFeedback styles and scripts: ```js ``` 1. In the template section of your Vue component, add the following snippet: ```html ``` Replace `` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project). 1. After making these changes, navigate back to your Vue.js project root and run: ```console npm run serve ``` Open the website in a web browser to verify that the feedback button appears and works correctly. ### Inline button ![Example page with an inline Feedback button](./images/inline-button-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create a Vue component with the stylesheet, loader, and widget: ```vue ``` Place this component where you want the inline button in the page content. ### Embedded form ![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create a Vue component with the stylesheet, loader, and widget: ```vue ``` Place this component where you want the embedded form in the page content. ### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons} ![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create a Vue component with the stylesheet, loader, and widget: ```vue ``` Place this component after the article content. ## 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. --- ## Feedback widget for VuePress PushFeedback collects user feedback directly from your website. This guide covers installation in a VuePress project. ## Prerequisites Before you begin, you need: - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A VuePress site and Node.js installed. ## Installation ### Floating button ![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png) 1. Install PushFeedback: ```console npm install pushfeedback ``` :::info If you're using yarn as your package manager, run `yarn add pushfeedback` instead of the npm command above. ::: 1. Create a client app enhancement file. In your `.vuepress` directory, create a file named `enhanceApp.js` (or `clientAppEnhance.js` for VuePress 2.x): **For VuePress 1.x** (`.vuepress/enhanceApp.js`): ```js export default ({ Vue, options, router, siteData }) => { if (typeof window !== 'undefined') { import('pushfeedback/loader').then(module => { module.defineCustomElements(window); }); } }; ``` **For VuePress 2.x** (`.vuepress/client.js`): ```js export default defineClientConfig({ async enhance({ app, router, siteData }) { if (typeof window !== 'undefined') { const { defineCustomElements } = await import('pushfeedback/loader'); defineCustomElements(window); } }, }); ``` 1. Create a global component to display the feedback button. Create a file `.vuepress/components/FeedbackButton.vue`: ```vue ``` Replace `` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project). 1. Add the component to your theme's layout or to individual pages. For a global approach, modify your theme's `Layout.vue` file or create a custom layout: ```vue ``` 1. Start your VuePress project by running `npm run dev` or `yarn dev` in your terminal. Once it compiles successfully, verify that the feedback button appears and functions correctly on your site. ### Inline button ![Example page with an inline Feedback button](./images/inline-button-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create `.vuepress/components/InlineFeedback.vue` with the stylesheet, loader, and widget: ```vue ``` Render `InlineFeedback` where you want it in the page content. ### Embedded form ![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create `.vuepress/components/EmbeddedFeedback.vue` with the stylesheet, loader, and widget: ```vue ``` Render `EmbeddedFeedback` where you want it in the page content. ### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons} ![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png) Install `pushfeedback` if it is not already in your project: ```console npm install pushfeedback ``` Create `.vuepress/components/FeedbackThumbs.vue` with the stylesheet, loader, and widget: ```vue ``` Render `FeedbackThumbs` after the article content. ## 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. --- ## Feedback widget for Webflow PushFeedback collects user feedback directly from your website. This guide covers installation in a Webflow site. ## Prerequisites Before you begin, you need: - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A Webflow site with the ability to add custom code (available on paid plans). ## Installation ### Floating button ![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png) 1. Log in to your Webflow account and open your project. 1. Navigate to **Project Settings** by clicking the gear icon in the left sidebar. 1. Go to the **Custom Code** tab. 1. In the **Head Code** section, add the following code to load the PushFeedback styles and scripts: ```html ``` 1. In the **Footer Code** section (which is inserted before the closing **body** tag), add the feedback button: ```html Feedback ``` Replace `` with your project's ID from the [PushFeedback dashboard](../quickstart.md#2-create-a-project). 1. Click **Save Changes**. 1. Publish your Webflow site to see the changes live. 1. Open your published website in a web browser to verify the feedback button appears and functions correctly. ### Inline button ![Example page with an inline Feedback button](./images/inline-button-preview.png) 1. Load the widget in Webflow’s **Head Code**: ```html ``` 2. Place the button in an **Embed** element at the end of the page content: ```html Feedback ``` ### Embedded form ![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png) 1. Load the widget in Webflow’s **Head Code**: ```html ``` 2. Place the form in an **Embed** element at the end of the page content: ```html ``` ### Like and dislike buttons {#advanced-setup-like-and-dislike-buttons} ![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png) 1. Load the widget in Webflow’s **Head Code**: ```html ``` 2. Place the rating controls in an **Embed** element at the end of the page content: ```html Was this helpful? Helpful Not helpful ``` Clicking a rating opens the form with that rating selected; it does not submit until the visitor sends it. ## 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. --- ## 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](./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. --- ## Asana integration Create an Asana task from feedback in the project you choose. :::info Asana is available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. ::: ![Configure the Asana destination, delivery controls, and task format in PushFeedback](./images/asana-configuration.jpg) ## Before you start - Create an Asana personal access token by following [Asana's personal access token guide](https://developers.asana.com/docs/personal-access-token). - To find the **Workspace GID**, sign in to Asana and open [the workspaces endpoint](https://app.asana.com/api/1.0/workspaces). Copy the `gid` beside the workspace you want. - To find the **Project GID**, use Asana's [Get projects from a workspace endpoint](https://developers.asana.com/reference/getprojectsforworkspace) with that workspace GID. Copy the `gid` beside the destination project. - Keep the token safe. PushFeedback encrypts it and never displays it again. ## Configure Asana 1. In the PushFeedback dashboard, open your project, then **Settings** > **Integrations** > **Asana**. 2. In **01 Connection and destination**, enter the token, workspace GID, and project GID. Add a destination name if it helps your team identify the project. 3. In **02 Delivery controls**, keep **Enabled** selected or pause delivery without losing the configuration. Select **Require a message** to skip rating-only feedback. 4. In **03 Message recipe**, set the task title and notes templates. You can insert feedback and project variables such as `{{ feedback.message }}` and `{{ feedback.detail_url }}`. 5. Add optional delivery rules under **Advanced rules and custom fields**. 6. On wider screens, review the live task preview while you edit. It does not contact Asana. 7. Save the integration, then select **Test connection** to validate the saved token and destination. The test does not create a task. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules creates a task in the configured Asana project. ## Remove Asana Open the Asana integration settings and select **Remove integration**. New feedback will no longer create Asana tasks. --- ## Email integration PushFeedback can send email notifications when users submit feedback. Email notifications are available on every plan, including the free plan, which notifies a single address. Paid plans notify up to three. ![Configure email notification recipients in PushFeedback](./images/email-integration.jpg) ## Prerequisites - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. ## Set up email notifications 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Go to **Projects** and select your project. 3. Click **Settings**, then under **Integrations**, select **Email**. 4. In **01 Recipients**, add the email addresses of the team members you'd like to notify when feedback is received. :::info The free plan notifies one address. Paid plans let you configure up to three. The dashboard disables the address fields your plan doesn't cover. If you need to notify more recipients, consider using an email distribution list. ::: 5. In **02 Delivery controls**, keep **Enabled** selected or pause notifications without removing the recipients. Select **Require a message** to skip rating-only feedback. 6. On wider screens, review the generated email in **03 Email format**. The preview uses the project's latest feedback, or sample data when the project is empty. 7. Select **Save integration**. 8. To ensure the changes are in place, go to any webpage where you've implemented the PushFeedback widget and send a feedback entry. The specified email addresses should receive the feedback. ## Notifications on the free plan The free plan includes 25 per-entry notification emails per team. The count is lifetime, not monthly, and it counts emails actually sent: an entry that arrives while no address is configured does not use one up, and notifying every configured address about the same entry counts as one. The last email of the allowance tells you it is the last. After that, PushFeedback sends one monthly summary per team instead, with the number of entries received and a link to your dashboard. The summary carries no feedback content, only the count, and it only goes out when feedback actually arrived, to the same addresses configured on your email integrations. Your feedback itself is never affected. Every entry stays readable in your dashboard, and through the API, on every plan, no matter how much you collect. Paid plans send an email for every entry, with no allowance. ## Remove the integration To disconnect email notifications, go to the integration's settings page in your PushFeedback dashboard and click **Remove integration**. Confirming stops the integration from firing on new feedback immediately. --- ## GitHub Issues integration Turn feedback into GitHub issues in a repository you control. :::info GitHub Issues is available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. ::: ![Configure the GitHub repository, delivery controls, and issue format in PushFeedback](./images/github-configuration.jpg) ## Before you start - Create a [fine-grained personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) for the target repository. Grant it read and write access to **Issues**. - Copy the repository owner and name from its URL: `github.com//`. - PushFeedback encrypts the token and never displays it again. ## Configure GitHub Issues 1. In the PushFeedback dashboard, open your project, then **Settings** > **Integrations** > **GitHub Issues**. 2. In **01 Connection and destination**, enter the token, repository owner, and repository name. 3. In **02 Delivery controls**, keep **Enabled** selected or pause delivery without losing the configuration. Select **Require a message** to skip rating-only feedback. 4. In **03 Message recipe**, customize the issue title and body with feedback and project variables. 5. Under **Advanced rules and custom fields**, add optional labels, assignees, and delivery rules. 6. On wider screens, review the live issue preview while you edit. It does not create an issue. 7. Save the integration, then select **Test connection** to verify repository access without creating an issue. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules creates an issue in the configured GitHub repository. ## Remove GitHub Issues Open the GitHub Issues integration settings and select **Remove integration**. --- ## GitLab Issues integration Turn feedback into issues in a GitLab.com project you control. :::info GitLab Issues is available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. ::: ![Configure the GitLab project, delivery controls, and issue format in PushFeedback](./images/gitlab-configuration.jpg) ## Before you start - Create a [GitLab personal access token](https://docs.gitlab.com/user/profile/personal_access_tokens/) that can access the target project and create issues. - On the project's overview page, open **Actions** and select **Copy project ID**. You can also use the full project path, such as `group/project`. See [GitLab's project ID guide](https://docs.gitlab.com/user/project/working_with_projects/#find-the-project-id). - If you want to assign new issues automatically, use the [GitLab Users API](https://docs.gitlab.com/api/users/#list-users) to find the user's numeric `id`. - PushFeedback encrypts the token and never displays it again. ## Configure GitLab Issues 1. In the PushFeedback dashboard, open your project, then **Settings** > **Integrations** > **GitLab Issues**. 2. In **01 Connection and destination**, enter the access token and project ID or path. 3. In **02 Delivery controls**, keep **Enabled** selected or pause delivery without losing the configuration. Select **Require a message** to skip rating-only feedback. 4. In **03 Message recipe**, customize the issue title and description with feedback and project variables. 5. Under **Advanced rules and custom fields**, add optional labels, an assignee user ID, and delivery rules. 6. On wider screens, review the live issue preview while you edit. It does not create an issue. 7. Save the integration, then select **Test connection** to validate the saved token and project. It does not create an issue. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules creates an issue in the configured GitLab project. ## Remove GitLab Issues Open the GitLab Issues integration settings and select **Remove integration**. --- ## Connect Jira with Automation PushFeedback can create Jira issues by sending feedback to a [Jira Cloud Automation](https://support.atlassian.com/cloud-automation/docs/jira-cloud-automation/) or [Jira Data Center Automation](https://confluence.atlassian.com/automation/) incoming webhook. Jira Automation receives the webhook and creates the issue using a rule you control. :::note How this connection works This is a webhook-based Jira Automation connection, not a direct Jira API integration. You configure the destination project, issue type, and field mapping inside the Jira automation rule. ::: :::info Integrations are only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. On the free plan, use [email notifications](./email.md) instead. ::: ## Prerequisites Before you begin, ensure you have: - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A Jira workspace (Cloud or Data Center) with access to Automation options. ## 1. Create the Jira automation rule ### Create the automation rule 1. Go to **Project settings** in your Jira project. 2. Navigate to **Automation** under **Project settings**. 3. Click **Create rule**. ![Create an automation rule in Jira](./images/jira-create-rule.png) ### Configure the automation rule 1. Choose the **Incoming webhook** trigger, then click **Next**. ![Select the incoming webhook trigger in Jira](./images/jira-create-incoming-webhook.png) 2. Create a **Then** component. ![Add a Then component to the Jira automation rule](./images/jira-then-action.png) 3. Configure the **Then** component to **Create work item**. ![Select Create work item in Jira Automation](./images/jira-create-issue.png) :::tip If you don't see the **Create work item** component, ensure **All actions** is marked. ::: 4. Configure the **Create work item** action: - **Project:** Set the Jira project where you want to create the issue. - **Issue type:** Select the issue type you want to create. - **Summary:** Set to ``{{webhookData.summary}}``. - **Description:** Set to ``{{webhookData.description}}``. ![Map the Jira project, issue type, summary, and description](./images/jira-configure-issue.png) 5. Click **Next**. 6. Click **Turn on rule**, set a name for your rule, and assign the necessary permissions. ![Name and turn on the Jira automation rule](./images/jira-turn-on-rule.png) ### Get the incoming webhook details 1. Click the **Incoming webhook**. For more context on the available options, see [Atlassian's incoming webhook trigger guide](https://support.atlassian.com/cloud-automation/docs/configure-the-incoming-webhook-trigger-in-atlassian-automation/). 2. On **Work criteria**, select **No work items from the webhook**. ![Configure the incoming webhook work criteria in Jira](./images/jira-configure-webhook.png) 3. Copy the webhook URL and token. You will need both when configuring PushFeedback. :::important Save both values in a secure location. You will need them to configure PushFeedback. ::: 4. Click **Update**. ## 2. Connect PushFeedback 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Go to **Projects** and select your project. 3. Click **Settings**, then under **Integrations**, select **Jira**. 4. Configure the Jira Automation connection: ![Connect a Jira Automation webhook in PushFeedback](./images/jira-integration.jpg) - Paste the Jira incoming webhook URL into **Jira automation webhook URL**. - Paste the Jira token into **Webhook token** when the rule requires it. PushFeedback sends it in the `X-Automation-Webhook-Token` header. The saved token is never displayed again. - Keep **Enabled** selected or pause delivery without removing the connection. - Select **Require a message** if rating-only feedback should not create Jira issues. - On wider screens, review the summary and description in **03 Issue format**. The preview uses the project's latest feedback, or sample data when the project is empty. 5. Save your changes by clicking **Save integration**. ## 3. Verify the connection To ensure everything is working correctly: 1. Go to a page where you installed the feedback widget and submit a feedback entry with a message. 2. Confirm the feedback appears on your specified Jira board as a new issue. ![Confirm the new feedback issue on the Jira board](./images/jira-board.png) 3. Verify that all relevant details are correctly mapped and visible on the Jira issue. ## Troubleshooting If the integration isn't working: - Double-check the webhook URL and token in PushFeedback. - Verify the Jira automation rule is enabled. - Check the Jira audit log for any error messages. ## Remove the integration To disconnect Jira Automation, open its settings in your PushFeedback dashboard and select **Remove integration**. --- ## Linear integration Create a Linear issue for each feedback submission that matches your delivery rules. :::info Linear is available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. ::: ![Configure the Linear destination, delivery controls, and issue format in PushFeedback](./images/linear-configuration.jpg) ## Before you start - In Linear, go to **Settings** > **Account** > **Security & access** and create a personal API key. See [Linear's API and webhook guide](https://linear.app/docs/api-and-webhooks). - Use Linear's [GraphQL API](https://linear.app/developers/graphql) to query `teams { nodes { id name } }`, then copy the `id` for the destination team. Query `projects` and `issueLabels` the same way if you want to set the optional project and labels. - PushFeedback encrypts the API key and never shows it again. ## Configure Linear 1. Open your project in the PushFeedback dashboard, then **Settings** > **Integrations** > **Linear**. 2. In **01 Connection and destination**, enter the API key and destination team ID. 3. In **02 Delivery controls**, keep **Enabled** selected or pause delivery without losing the configuration. Select **Require a message** to skip rating-only feedback. 4. In **03 Message recipe**, write the issue title and description with supported feedback and project variables. 5. Under **Advanced rules and custom fields**, add an optional project ID, label IDs, delivery rules, and supported mappings. 6. On wider screens, review the live issue preview while you edit. Select **Test connection** to validate the key without creating an issue. 7. Save the integration. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules creates an issue in the configured Linear team. ## Remove Linear Open the Linear integration settings and select **Remove integration**. --- ## Make (Integromat) integration PushFeedback sends feedback data to Make.com via webhooks, letting you build workflows for tools that do not have a dedicated PushFeedback integration. :::info Integrations are only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. On the free plan, use [email notifications](./email.md) instead. ::: ![Webhook configuration editor](./images/webhook-configuration.jpg) ## Prerequisites - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A Make.com account. ## Set up the Make integration 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Go to **Projects** and select your project. 3. Click **Settings**, then under **Integrations**, select **Webhooks**. 4. Enter the URL for the Make.com webhook where you intend to send feedback data. For assistance in configuring your webhook in Make.com, see their guide on [receiving a webhook from a web service](https://www.make.com/en/help/connections/receiving-a-webhook-from-a-web-service). The webhook endpoint must be public HTTPS on port 443. 5. Use the webhook editor to choose a title, message template, optional delivery rules, and custom fields. On wider screens, inspect the JSON preview before saving. 6. Use **Test connection** to send a small test event to the Make webhook. Then save the integration. ## Webhook specification See [Webhook specification](./webhooks.md#webhook-specification). ## Sample integrations Make.com offers hundreds of integrations with popular apps and services, allowing you to create custom workflows tailored to your needs. Some examples of integrations you can achieve with PushFeedback and Make include: - Sending feedback data to a custom database, CRM, or internal service. - Notifying your team in Slack or Microsoft Teams whenever new feedback is submitted. - Adding feedback entries to a Google Sheets document for analysis and reporting. - Integrating with CRM systems like Salesforce to keep track of customer feedback. For Trello and Asana, use the dedicated [Trello](./trello.md) or [Asana](./asana.md) integration when it fits your workflow. --- ## monday.com integration Create a monday.com item from feedback in the board and group you choose. :::info monday.com is available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. ::: ![Configure the monday.com board, group, message recipe, rules, and item preview in PushFeedback](./images/monday-configuration.jpg) ## Before you start - Create an API token by following [monday.com's authentication guide](https://developer.monday.com/api-reference/docs/authentication). The token must have access to the target board. - Copy the board ID from the board URL: `monday.com/boards/`. - Use the monday.com API to query `boards(ids: BOARD_ID) { groups { id title } }`, then copy the `id` for the destination group. See the [groups API reference](https://developer.monday.com/api-reference/reference/groups). - If you want to include a longer message, enable [Developer Mode](https://developer.monday.com/api-reference/docs/getting-started) and copy the ID of a compatible long-text column. ## Configure monday.com 1. In PushFeedback, open your project, then **Settings** > **Integrations** > **monday.com**. 2. In **01 Connection and destination**, enter the API token, board ID, and group ID. Helper text below each field explains where to copy the IDs. 3. In **02 Delivery controls**, keep **Enabled** selected or pause delivery without losing the configuration. Select **Require a message** to skip rating-only feedback. 4. In **03 Message recipe**, set the item name and optional body template. Use the variable buttons to insert feedback values. 5. Under **Advanced rules and custom fields**, add the body column ID, column mappings, delivery rules, and status-label behavior when needed. 6. On wider screens, review the live item preview while you edit. It does not save settings or contact monday.com. 7. Save the integration, then select **Test connection** to verify the board and group. It does not create an item. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules creates an item in the configured monday.com board and group. ## Remove monday.com Open the monday.com integration settings and select **Remove integration**. --- ## Integrations overview PushFeedback stores feedback in your dashboard first. On eligible paid plans, you can then send each matching submission to a connected tool without making feedback collection depend on that tool. Integrations are grouped as issue trackers and management tools, team notifications, and webhooks and automation. ## Choose an integration | Need | Integration | | --- | --- | | Create issues, tasks, or cards | [Jira Automation](./jira.md), [Linear](./linear.md), [GitHub Issues](./github-issues.md), [GitLab Issues](./gitlab-issues.md), [Asana](./asana.md), [monday.com](./monday.md), or [Trello](./trello.md) | | Notify a channel | [Slack](./slack.md), [Microsoft Teams](./teams.md), or [email](./email.md) | | Connect custom or automated workflows | [Webhooks](./webhooks.md), [Make](./make.md), or [Zapier](./zapier.md) | ## Configure any integration 1. Open your project in the [PushFeedback dashboard](https://app.pushfeedback.com). 2. Open **Settings** and select an integration. 3. Add its destination and credentials. 4. On wider screens, review the live preview while you edit. 5. Save the integration and use **Test connection** where available before relying on live feedback. Issue tracker and management tool integrations, channel integrations, and webhook-based automation are available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. [Email notifications](./email.md) are available on every plan. ## Delivery behavior Enabled integrations send feedback matching their delivery controls and rules to the configured destination. Use **Test connection** after changing credentials or a destination. ## Build the message your team needs Several integrations let you configure a title and body with variables such as: ```text {{ feedback.message }} {{ feedback.rating_label }} {{ feedback.url }} {{ feedback.detail_url }} {{ project.name }} ``` Use the editor's variable buttons when available. Static text stays yours. Feedback values are formatted safely for each destination. Webhook, Slack, Linear, Trello, and monday.com also support their documented delivery rules or field mappings. ## Preview and connection tests A live preview shows how the project's latest feedback will appear at the destination while you edit. If the project has no feedback yet, the editor uses sample data. The preview is available on wider screens and is hidden on smaller screens to keep the configuration focused. Previewing does not save a draft or create a task, issue, card, or board item. Connection tests verify the configured destination. Webhook, Slack, and Teams tests send a small test payload. Issue and task integrations validate access and the selected destination without creating work in that provider. Jira Automation is tested by submitting feedback after the Jira rule and PushFeedback connection are saved. --- ## Slack integration PushFeedback sends formatted feedback notifications to a Slack channel using [incoming webhooks](https://api.slack.com/messaging/webhooks). Compose the notification, preview the message, and test the destination before enabling it. :::info Integrations are only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. On the free plan, use [email notifications](./email.md) instead. ::: ![Configure a Slack webhook, delivery controls, and message preview in PushFeedback](./images/slack-configuration.jpg) ## Prerequisites - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A Slack workspace. ## Set up Slack 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Go to **Projects** and select your project. 3. Click **Settings**, then under **Integrations**, select **Slack**. 4. Create an incoming webhook in Slack and paste its HTTPS URL. For detailed setup instructions, see [Slack's documentation](https://api.slack.com/messaging/webhooks). The saved URL is encrypted and is never displayed again. 5. Compose a **Notification title** and **Message template**. Use the variable buttons to insert supported values, including: ```text {{ feedback.message }} {{ feedback.rating_label }} {{ feedback.sentiment }} {{ feedback.email }} {{ feedback.url }} {{ feedback.detail_url }} {{ project.name }} ``` Static text stays yours. Feedback values are formatted safely for Slack. 6. Use **Delivery controls** to pause the integration or require a written feedback message. Under **Advanced rules and custom fields**, optionally add JSON delivery rules and Slack context fields. 7. On wider screens, the event preview updates with the project's latest feedback while you edit. An empty project uses sample data. A preview does not save settings or send a Slack message. 8. Select **Test connection** to send a small test payload to the entered incoming webhook. Save the integration after the test succeeds. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules is sent to the configured Slack channel. ## Remove the integration To disconnect the Slack integration, go to the integration's settings page in your PushFeedback dashboard and click **Remove integration**. Confirming stops the integration from firing on new feedback immediately. --- ## Teams integration PushFeedback sends feedback notifications to a Microsoft Teams channel through a Teams workflow webhook. :::info Integrations are only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. On the free plan, use [email notifications](./email.md) instead. ::: ![Configure a Microsoft Teams workflow, message recipe, delivery rules, and Adaptive Card preview in PushFeedback](./images/teams-configuration.jpg) ## Prerequisites - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A Microsoft Teams workspace. ## Set up the Teams integration 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Go to **Projects** and select your project. 3. Click **Settings**, then under **Integrations**, select **Teams**. 4. In Teams, create a workflow that receives a webhook request and posts the resulting Adaptive Card to the channel. Edit the saved workflow and copy its HTTPS callback URL into **Teams workflow webhook URL**. See [Microsoft's Teams webhook documentation](https://learn.microsoft.com/en-us/connectors/teams/). 5. Select **Test connection**. PushFeedback posts a visible connection-test card so you can verify the workflow and channel before saving. 6. Customize the card title and message. Use the variable buttons to insert feedback values without typing template syntax. 7. Optional. Expand **Advanced rules and custom fields** to add delivery conditions or Adaptive Card facts as JSON. 8. On wider screens, review the exact Adaptive Card payload in the live preview. Choose whether the integration is enabled and whether a message is required, then select **Save Teams integration**. Existing Teams integrations keep their original one-line notification until you save the new message recipe. ## Remove the integration To disconnect the Teams integration, go to the integration's settings page in your PushFeedback dashboard and click **Remove integration**. Confirming stops the integration from firing on new feedback immediately. --- ## Trello integration Create a Trello card from feedback in the list you choose. :::info Trello is available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. ::: ![Configure the Trello destination, delivery controls, and card format in PushFeedback](./images/trello-configuration.jpg) ## Before you start - Create an API key and token by following [Trello's API authorization guide](https://developer.atlassian.com/cloud/trello/guides/rest-api/api-introduction/). Authorize access to the destination board. - Use Trello's `GET /1/boards/{board_id}/lists` endpoint and copy the `id` for the destination list. See [Trello's nested resources guide](https://developer.atlassian.com/cloud/trello/guides/rest-api/nested-resources/). - If you add optional labels or members, retrieve them from the board with the [Trello Boards API](https://developer.atlassian.com/cloud/trello/rest/api-group-boards/) and copy the matching IDs. - Credentials are encrypted at rest and are never displayed again. ## Configure Trello 1. In the PushFeedback dashboard, open your project, then **Settings** > **Integrations** > **Trello**. 2. In **01 Connection and destination**, enter the API key, token, and destination list ID. 3. In **02 Delivery controls**, keep **Enabled** selected or pause delivery without losing the configuration. Select **Require a message** to skip rating-only feedback. 4. In **03 Message recipe**, define the card title and body with supported feedback and project variables. 5. Under **Advanced rules and custom fields**, add optional label IDs, member IDs, delivery rules, and field mappings. 6. On wider screens, review the live card preview while you edit. It does not create a card. 7. Save the integration, then select **Test connection**. It reads boards and lists only. It never creates a card. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules creates a card in the configured Trello list. ## Remove Trello Open the Trello integration settings and select **Remove integration**. --- ## Webhook configuration PushFeedback sends feedback as a POST request to an HTTPS endpoint you control. Use webhooks to connect PushFeedback with an internal service or a tool without a dedicated integration. :::info Integrations are only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. On the free plan, use [email notifications](./email.md) instead. ::: ![Webhook configuration editor](./images/webhook-configuration.jpg) ## Prerequisites - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. ## Configure a webhook 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Go to **Projects** and select your project. 3. Click **Settings**, then under **Integrations**, select **Webhook**. 4. Enter a public HTTPS endpoint on port 443. Redirects are rejected. 5. Set the event title and message template. You can insert supported variables directly: ```text {{ feedback.message }} {{ feedback.rating_label }} {{ feedback.sentiment }} {{ feedback.email }} {{ feedback.url }} {{ feedback.detail_url }} {{ project.name }} ``` Static text stays yours. Feedback values are formatted safely for the destination. 6. Optionally pause delivery, require a message, set **Delivery rules (JSON)**, or add **Custom fields (JSON)**. The editor validates rules and mappings before saving. 7. On wider screens, inspect the **Event preview** while you edit. It uses the project's latest feedback, or sample data when the project is empty, and does not contact your endpoint. 8. Select **Test connection** to POST a small `pushfeedback.webhook_connection_test` event to the entered endpoint. It is a real request, so point it at a test-safe handler. The request uses HTTPS, rejects redirects, and reports only a connection result. 9. Save the integration. ## Delivery behavior When the integration is enabled, feedback matching your delivery controls and rules is sent to the configured webhook endpoint. ## Webhook specification The exact event payload depends on your templates and custom fields. Use the editor preview for the payload that your configuration will send. A feedback delivery contains an event envelope and rendered feedback data, similar to this example: ```json { "id": "EVNT-feedback123", "object": "event", "creation_time": "2026-08-04T08:00:00Z", "type": "feedback.created", "api_version": "v1", "data": { "object": "feedback", "id": "feedback123", "project_id": "https://docs.example.com", "session": "visitor-session", "message": "This is a sample feedback message.", "metadata": "{\"browser\":\"Firefox\"}", "url": "https://example.com/page", "rating": 4, "rating_mode": "stars", "has_screenshot": true, "screenshot_url": "https://app.pushfeedback.com/api/feedback/feedback123/screenshot/", "pushfeedback_url": "https://app.pushfeedback.com/team1/projects/project1/", "text": "New feedback on PushFeedback: https://app.pushfeedback.com/team1/projects/project1/", "title": "New feedback on Developer docs", "body": "This is a sample feedback message.\n\nRating: 4 stars", "fields": { "priority": "positive" } }, "delivery_id": 42 } ``` Feedback deliveries include these request headers: ```text Content-Type: application/json Idempotency-Key: pushfeedback-delivery-42 User-Agent: PushFeedback webhook delivery X-PushFeedback-Event: feedback.created ``` Treat `Idempotency-Key` as the stable identifier for a delivery if your endpoint performs its own deduplication. ## Remove the integration To disconnect the webhook, go to the integration's settings page in your PushFeedback dashboard and click **Remove integration**. Confirming stops the integration from firing on new feedback immediately. --- ## Zapier integration PushFeedback sends feedback data to Zapier via webhooks, letting you build workflows for tools that do not have a dedicated PushFeedback integration. :::info Integrations are only available on the [Professional](https://pushfeedback.com#pricing) and [Unlimited](https://pushfeedback.com#pricing) plans. On the free plan, use [email notifications](./email.md) instead. ::: ![Webhook configuration editor](./images/webhook-configuration.jpg) ## Prerequisites - A PushFeedback account. If you don't have one, [sign up for free](https://app.pushfeedback.com/accounts/signup/). - A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide. - A Zapier account on a paid plan or during their trial period, as Webhooks by Zapier is a built-in tool only available for these users. ## Set up the Zapier integration 1. Open [app.pushfeedback.com](https://app.pushfeedback.com) and log in. 2. Go to **Projects** and select your project. 3. Click **Settings**, then under **Integrations**, select **Webhooks**. 4. Add the URL of the Zapier endpoint where you want to send the feedback data and configure your Zap on Zapier. For detailed instructions on setting up incoming webhooks in Zapier, refer to [Zapier's documentation](https://zapier.com/blog/what-are-webhooks#webhooks-zapier). The endpoint must be public HTTPS on port 443. 5. Use the webhook editor to choose a title, message template, optional delivery rules, and custom fields. On wider screens, inspect the JSON preview before saving. 6. Use **Test connection** to send a small test event to the Zapier webhook. Then save the integration. ## Webhook specification See [Webhook specification](./webhooks.md#webhook-specification). ## Sample integrations Zapier offers hundreds of integrations with popular apps and services, allowing you to create custom workflows tailored to your needs. Some examples of integrations you can achieve with PushFeedback and Zapier include: - Sending feedback data to a custom database, CRM, or internal service. - Notifying your team in Slack or Microsoft Teams whenever new feedback is submitted. - Adding feedback entries to a Google Sheets document for analysis and reporting. - Integrating with CRM systems like Salesforce to keep track of customer feedback. For Trello and Asana, use the dedicated [Trello](./trello.md) or [Asana](./asana.md) integration when it fits your workflow. --- ## Quickstart PushFeedback adds a feedback widget to your documentation or website. Users rate pages, leave comments, and attach screenshots — giving your team actionable input without leaving the site. In this tutorial, you create a PushFeedback account, set up a project, and add the widget to your site. Later, you can customize its appearance and connect it to tools such as Slack, Linear, GitHub Issues, or a webhook. ## 1. Create your PushFeedback account 1. Open [app.pushfeedback.com](https://app.pushfeedback.com). 2. Click the **Sign Up** button in the top bar. 3. Complete the registration form. ![Create account](./images/create-account.png) After creating your account, create a project to configure the widget. ## 2. Create a project 1. In your PushFeedback dashboard, click the **Projects** tab in the top navbar. 2. Click the **Create project** button. 3. Step through the wizard: * **URL configuration:** Specify the URL where you intend to use the feedback widget. This URL must correspond to the exact domain or subdomain where the widget is used. For example, use `docs.pushfeedback.com` instead of `pushfeedback.com`. * **Email notification setup (optional):** Define the email addresses to receive notifications: one on the free plan, up to three on paid plans. * **Get your code snippet:** The final step of the wizard shows your project code snippet, which contains your unique Project ID. ## 3. Add the widget to your site To integrate the PushFeedback widget into your website: 1. Insert the following code within the **head** section of your site's HTML: ```html ``` :::info The above method is the standard way of integrating the widget into an static HTML site. If you're using a particular web framework or content management system, PushFeedback offers tailored installation options and plugins. For detailed guides, refer to our [Installation](/category/installation) documentation. ::: 1. Just before the closing **body** tag of your website's HTML, add the following snippet: ```html Feedback ``` Replace `` with your project's ID you obtained from the previous step. 1. You should see the widget installed in your site: ![Feedback widget](./images/feedback-widget-astro.png) ## 4. Customize the widget The widget supports the following customization options: * **Layout:** Choose the widget's placement on your site—bottom right, top left, or even integrate it with an existing button. * **Styles:** Modify colors, fonts, and more to ensure the widget harmonizes with your site's aesthetics. * **Text:** Adapt the widget's text to mirror your site's tone or language. For detailed configuration steps, see our [Customization](/category/customization) documentation. :::tip Alternatively, use the [feedback widget builder](https://pushfeedback.com/builder/) to configure the widget visually and copy the generated snippet. No signup required. ::: ## Next steps Choose what to do next: - [Customization](/category/customization) — Adjust the widget's layout, styles, and text. - [Integrations](/category/integrations) — Send feedback to Slack, Asana, Linear, monday.com, Trello, GitHub Issues, GitLab Issues, webhooks, and more. - [Dashboard](https://app.pushfeedback.com) — Monitor and analyze incoming feedback. --- ## Release notes Track features, improvements, and updates to PushFeedback. ## Product updates For comprehensive release notes and product announcements, visit our [Blog](http://pushfeedback.com/blog?category=release-notes). We publish bimonthly updates highlighting the most relevant product features and improvements. ## Package updates ### Core packages
📦️ pushfeedback Core-widget package Coming soon
### Integrations
⚛️ pushfeedback-react Feedback widget for React applications CHANGELOG
🦖 docusaurus-pushfeedback Feedback plugin for Docusaurus sites CHANGELOG
🐍 sphinx-pushfeedback Feedback extension for Sphinx documentation CHANGELOG
--- ## API key security API keys are team-scoped credentials for the [PushFeedback REST API](/api/pushfeedback-api). This page covers how keys work, how to grant the least privilege an integration needs, and how to handle keys safely. ## How keys work - Team admins create and revoke keys from **Team settings** in the [PushFeedback dashboard](https://app.pushfeedback.com). Creating a key there requires a [Professional or Unlimited](https://pushfeedback.com#pricing) plan. - The full key is shown exactly once, at creation time. Store it immediately; it cannot be retrieved again. - A key can be revoked at any time. Revocation takes effect immediately. - A key can optionally be restricted to a single project. A restricted key returns `404 Not Found` for every other project, so it cannot be used to probe which project identifiers exist. - Keys created before a downgrade keep working, and official PushFeedback integrations such as the WordPress plugin provision their own key when you connect them, on any plan. ## Scoped permissions Every key holds one or more scopes, chosen with checkboxes when the key is created: ![Creating an API key with scopes and an optional project restriction](./images/api-keys.png) | Scope | Allows | |-------|--------| | `feedback:read` | List a project's feedback | | `feedback:submit` | Submit feedback to projects that require a submit key | | `project:manage` | Update project settings, such as the site URL | Grant only what the integration needs: - A reporting script that exports feedback needs `feedback:read` only. - A deployment pipeline that keeps the site URL in sync needs `project:manage` only. - `feedback:submit` exists for protected submissions; see the next section. A request with a key that lacks the required scope returns `403 Forbidden` with a message naming the missing scope, so a misconfigured integration fails loudly instead of silently over-reaching. ## Requiring a key for submissions By default, anyone on your site can submit feedback; the widget needs no credentials. Projects can enable the **require a submit key** setting, after which every submission must carry an API key with the `feedback:submit` scope covering the project. Requests without a key get `401 Unauthorized`, and requests with a key that lacks the scope get `403 Forbidden`. This suits internal sites and backend integrations: everyone who can see the page may know the key, but outsiders cannot submit. Pass the key to the widget with the [`api-key`](/customization/layout#properties) attribute: ```html Feedback ``` :::caution Treat a page-embedded key as origin control, not a secret A key placed in a web page is readable by everyone who can view that page. If you embed a key for protected submissions, use a key with only the `feedback:submit` scope, restricted to that project. It then gates who can submit, but a determined reader of your page can still extract it; it must never be a key that can also read feedback or change settings. ::: ## Handling keys safely - **Store keys like passwords.** Use environment variables or a secrets manager. Never hardcode keys in application code or commit them to version control. - **Rotate by revoke and create.** Create a replacement key, switch your integration over, then revoke the old key. Set a schedule that fits your compliance needs. - **HTTPS only.** Keys are transmitted in the `Authorization: Api-Key ` header, and the API is served exclusively over HTTPS, so keys are always encrypted in transit. - **Leaked keys cannot enumerate.** A key only works for the projects it covers: requests outside its team or project restriction return `404 Not Found`, and requests beyond its scopes return `403 Forbidden`. A leaked key exposes at most what it was granted. For the full authentication contract, including error semantics per endpoint, see the [API reference authentication section](/api/pushfeedback-api#authentication). --- ## Production checklist Confirm these security measures before deploying the PushFeedback widget to production. ## For widget integrations :::info Widget Integrations Only The following steps apply only to implementations using the **feedback widget**. ::: - [ ] **Restrict allowed domains**: List only the domains authorized to host your feedback widget in **Projects** > **Settings** > **Allowed domains**. This restricts embedding to approved sites, helping prevent unauthorized access. - [ ] **Enable two-factor authentication (2FA)**: Navigate to **My Account** > **Profile** and enable 2FA for all accounts with access to the dashboard to enhance access security. - [ ] **Configure data privacy (optional)**: Choose whether to display a custom terms and conditions modal in the footer. For more information, see [Layout customization](../customization/layout.mdx). ## For API integrations :::info API Integrations Only The following steps apply only to direct integrations using the **Enterprise API**. These steps are not necessary for widget-based implementations. ::: - [ ] **Enable bearer authentication**: Ensure each API client request includes a bearer token in the header as follows: `Authorization: Api-Key `. - [ ] **Grant least-privilege scopes**: Give each API key only the scopes its integration needs (`feedback:read`, `feedback:submit`, or `project:manage`), and restrict it to a single project where possible. See [API key security](api-keys). - [ ] **Set up regular API keys rotation**: Establish a schedule for rotating API keys periodically to enhance security. - [ ] **Verify token security**: Confirm that tokens are not publicly accessible (e.g., in repositories) and are shared only with authorized team members. - [ ] **Use secure API key storage**: Store API keys in environment variables, encrypted configuration files, or dedicated secrets management systems (e.g., AWS Secrets Manager, Azure Key Vault, HashiCorp Vault). Never hardcode keys in your application code or commit them to version control. - [ ] **Deactivate unused tokens**: Immediately disable any tokens that are no longer in use to prevent unauthorized access. --- ## Security overview PushFeedback is designed to meet enterprise security requirements for data protection, compliance, and transparency. ## Configurable security features | Feature | Description | |---------|-------------| | Role-based access (RBAC) | Restricts dashboard access to authorized users with segmented permissions. | | Domain restrictions | Limits which domains can embed the feedback widget. | | reCAPTCHA v3 protection | Optional invisible bot detection and spam prevention. [Learn more](recaptcha). | | Rate limiting | Per-session and per-IP limits to prevent spam and abuse. | | API key authentication | Team-scoped API keys for REST API access, revocable at any time. [Learn more](api-keys). | | Granular API permissions | Scope each API key to only the permissions it needs (`feedback:read`, `feedback:submit`, `project:manage`). [Learn more](api-keys). | ## Security architecture | Layer | Protection | |-------|------------| | Network | Firewalls, DDoS mitigation, continuous monitoring, and real-time alerts. | | Data encryption | Encrypted in transit and at rest. Automated backups for recovery. | | Audit logs | Detailed logs of security-sensitive operations for accountability. | | Account isolation | Customer data is strictly separated between accounts. | | Model training opt-out | Customer data is never shared with third-party model training. | | GDPR compliance | User data handled in line with European data protection regulations. | ## AI data handling PushFeedback uses third-party AI providers to power optional features such as AI-generated feedback reports. The following safeguards are in place: - **Opt-out of model training:** Your feedback data is never used to train or improve AI models. - **Data sent on demand:** Feedback data is only sent to AI providers when an AI feature is actively used. - **Admin control:** Team admins can disable all AI capabilities from Team settings. See [Opting out of AI reports](../administration/analytics#opting-out-of-ai-reports) for details. For more information on the AI providers we use, see [Our providers](providers). See the [Privacy Policy](https://pushfeedback.com/privacy) for details on data handling. --- ## Our providers Third-party subprocessors used by PushFeedback. All comply with applicable data protection laws in the US and Europe. Brevo Manages email services. Location: EU Cloudflare Provides secure and scalable storage. Location: USA GitHub Hosts our code. Location: USA DigitalOcean Provides hosting and infrastructure. Location: USA and EU Sentry Monitors errors. Location: USA Stripe Handles secure payments. Location: USA OpenAI Powers AI-generated feedback reports. Location: USA Netlify Hosts our web content. Location: USA ## Optional integrations These are optional third-party services that you can choose to integrate with PushFeedback. Data is only shared with these providers if you explicitly configure the integration. Zapier Automates workflows by connecting with thousands of other apps. Location: USA Make Enables advanced automation scenarios and complex integrations. Location: USA Microsoft Teams Sends feedback notifications to your Teams channels. Location: USA Slack Delivers feedback notifications to your Slack workspace. Location: USA --- ## Enabling Google reCAPTCHA v3 Add invisible bot protection to your feedback widget with Google reCAPTCHA v3. It runs in the background without interrupting your users. ## Get your reCAPTCHA keys 1. Visit the [reCAPTCHA Admin Console](https://www.google.com/recaptcha/admin) and sign in. 2. Click **+** to register a new site. 3. Select **reCAPTCHA v3** as the type. 4. Add your domain(s) without `https://` (e.g., `docs.example.com`). 5. Submit and copy both the **Site Key** and **Secret Key**. ## Enable in your project 1. Go to your project in the [PushFeedback dashboard](https://app.pushfeedback.com). 2. Click **Settings** and find the **Security** section. 3. Enable reCAPTCHA v3 and paste both keys. 4. Set the minimum score (default 0.5 works for most sites). 5. Save. ![reCAPTCHA v3 settings in the Security section](./images/recaptcha.png) Your widget will now verify submissions automatically. No code changes needed. ## Adjusting the score threshold reCAPTCHA scores range from 0.0 (bot) to 1.0 (human). Start with 0.5 and adjust: - **Getting spam?** Increase to 0.6-0.7 - **Blocking real users?** Decrease to 0.3-0.4 ## Notes - Your secret key is encrypted before storage. - HTTPS is required (localhost works for testing). - The reCAPTCHA badge is hidden, and the required Google disclosure text is automatically displayed in the widget footer. - You can customize the disclosure text using the `recaptchaText` prop (see [Layout customization](../customization/layout)). ## Troubleshooting - **"reCAPTCHA verification required"** - Ad blockers or privacy extensions may be blocking the script. Ask users to disable them temporarily. - **"reCAPTCHA verification failed"** - Check your keys are correct and your domain is registered in Google's console. If legitimate users are blocked, lower your score threshold. - **General issues** - Verify you selected reCAPTCHA v3 (not v2) and both keys are from the same site registration. --- ## Support ## Documentation - [Quickstart](quickstart.md) — Create an account and add the feedback widget. - [Installation](/category/installation) — Platform-specific setup guides. - [Customization](/category/customization) — Configure appearance and behavior. - [Administration](/category/administration) — Manage teams, projects, and billing. - [Integrations](/category/integrations) — Connect to Slack, Asana, Linear, monday.com, Trello, GitHub Issues, GitLab Issues, webhooks, and more. ## FAQs See [Frequently asked questions](https://pushfeedback.com/#faqs) on the PushFeedback website. ## Contact us Email `support@pushfeedback.com` for help. Available Monday–Friday, 9 AM–5 PM EST. Response time: within 48 hours. ## Feedback Share your feedback