Feedback widget for Antora

PushFeedback collects user feedback directly from your website. This guide covers installation in an Antora project.

Prerequisites

Before you begin, you need:

• 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 the steps in the Quickstart guide.
• An Antora project.

Installation

Floating button

1. Modify the UI bundle:

   • If you're using a custom UI bundle for your Antora project, navigate to the UI bundle's directory.

   • If not, you'll first need to clone Antora's default UI bundle.

     git clone https://gitlab.com/antora/antora-ui-default.git

2. Locate the head.hbs file, which is usually under src/partials, and insert the following code:

   <!-- 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>

3. Locate the footer.hbs or the specific file where you'd like the feedback button to appear. Just before the closing tags in that file, add the following snippet:

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

   Replace <YOUR_PROJECT_ID> with your project's ID from the PushFeedback dashboard.

4. Build the project:

   • If you're using a custom UI, make sure to re-bundle it and then run the Antora command to build your project.
   • If you cloned the default UI, you'd have to integrate it as a local UI and then run Antora with the --ui-bundle-url flag to point to your modified local UI bundle.

   Once it builds successfully, verify that the feedback button appears and functions correctly on your site.

Inline button

1. Load the widget in src/partials/head.hbs:

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

2. Place the button in the page content or src/partials/footer.hbs:

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

Embedded form

1. Load the widget in src/partials/head.hbs:

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

2. Place the form in the page content or src/partials/footer.hbs:

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

Like and dislike buttons

1. Load the widget in src/partials/head.hbs:

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

2. Place the rating controls in the page content or src/partials/footer.hbs:

   <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">
       <span class="pushfeedback-thumb-label">Helpful</span>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" /></svg>
     </feedback-button>
     <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="default" custom-font="true">
       <span class="pushfeedback-thumb-label">Not helpful</span>
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" /></svg>
     </feedback-button>
   </div>

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 — Adjust the widget's layout, styles, and text.
• Integrations — Forward feedback to Slack, email, Jira, and more.