Basic installation

Add PushFeedback to an HTML site with a floating button, an inline button, an embedded form, or inline like and dislike buttons. The framework guides show where to place the same widget in your site.

Prerequisites

• A PushFeedback account. If you don't have one, sign up for free.
• A project created in your PushFeedback dashboard. If you haven't created one yet, follow Quickstart.

Replace <YOUR_PROJECT_ID> in the examples with your project's ID.

Examples use @latest. Replace it with a version number to pin a release.

Installation

Floating button

The button stays on the right edge of the browser and opens the form in a sidebar.

1. Add the stylesheet and script inside your page's <head>:

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

2. Add the button before the closing </body> tag:

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

Inline button

Place the button in your page content. Clicking it opens the feedback form. Set screenshot-positioning="true" so visitors can scroll to the relevant part of the page before capturing a screenshot.

1. Add the stylesheet and script inside your page's <head>:

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

2. Add the button where it should appear:

   <feedback-button project="<YOUR_PROJECT_ID>" button-position="default" modal-position="center" button-style="dark" screenshot-positioning="true">Feedback</feedback-button>

Embedded form

The form is visible on the page without a trigger button or backdrop. Its screenshot action lets visitors position the page before clicking Capture this view.

1. Add the stylesheet and script inside your page's <head>:

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

2. Add the form where it should appear:

   <feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>

See Layout for form options and Text for screenshot labels.

Like and dislike buttons

Place two rating buttons at the end of a page. Clicking one opens the form with that rating selected. It does not submit feedback until the visitor sends it.

1. Add the stylesheet and script inside your page's <head>:

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

2. Add the controls where readers finish the content:

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

The PushFeedback stylesheet styles the buttons. Screen-reader labels identify the icon buttons.

Next steps

• Framework guides: Place the widget in a documentation site, app, or website builder.
• Customization: Change the layout, styles, and text.
• Integrations: Send feedback to your team.