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

Quickstart

PushFeedback adds a feedback widget to your documentation or website. Users rate pages, leave comments, and attach screenshots, giving your team 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 and click Sign up.

  2. Enter your email and password, and optionally your company name. Accept the Terms of service and Privacy policy, then click Sign up.

    Create a PushFeedback account

  3. Open the confirmation email and confirm your email address to activate your account.

    Email confirmation screen

After confirming your email, create a project to configure the widget.

2. Create a project​

A project groups the feedback from your website and controls where its widget can accept submissions. The setup has three steps: Website, Set up widget, and Notifications.

  1. In the dashboard, open Projects and click Create project.

  2. Under Website URL, enter the address of the site where you will use the widget, such as https://docs.example.com. Use the exact domain or subdomain, then click Create project.

    Website URL step in project setup

  3. On Set up widget, choose the Widget layout, Primary color, and any button, rating, or window options for that layout. Test the interactive preview and copy the HTML snippet under Add it to your website. The snippet includes your project ID.

    Widget customization controls and interactive preview

    Copy the HTML snippet under Add it to your website

  4. Click Continue to notifications.

  5. Enter the Email address that should receive feedback alerts. The free plan accepts one address; paid plans support up to three in this form. Select Only send an alert when feedback includes a message to skip rating-only notifications.

    Configure notification recipients after setting up the widget

  6. Click Finish setup, or Skip for now to configure notifications later from Settings > Integrations > Email.

The project dashboard shows incoming feedback. Click Snippet at any time to return to widget setup and copy your installation code.

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:

    <!-- Initialize the PushFeedback widget -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>
    info

    The above method is the standard way of integrating the widget into a 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 documentation.

  2. Just before the closing body tag of your website's HTML, add the following snippet:

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

    Replace <YOUR_PROJECT_ID> with your project's ID from the setup snippet or the project dashboard.

  3. You should see the widget installed in your site:

    Feedback widget open on a documentation page

  4. Submit a test response: choose a rating, enter a message, and click Send. Open your project in the dashboard to confirm the response appears in Feedback entries.

    A test response in the project feedback dashboard

4. Customize the widget​

The widget supports the following customization options:

  • Layout: Choose a floating button, an inline button, an embedded form, or like and dislike buttons.

  • 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 documentation.

tip

Alternatively, use the feedback widget builder to configure the widget visually and copy the generated snippet. No signup required.

Next steps​

Choose what to do next:

  • Customization — Adjust the widget's layout, styles, and text.
  • Integrations — Send feedback to Slack, Asana, Linear, monday.com, Trello, GitHub Issues, GitLab Issues, webhooks, and more.
  • Dashboard — Monitor and analyze incoming feedback.