Saltar al contenido principal

Feedback widget for Antora

Here's a step-by-step guide to help you install PushFeedback in your Antora project.

Feedback widget for docs screenshot

Prerequisites

Before you begin, you'll need to have the following:

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

Basic installation

To integrate the PushFeedback widget into your Antora site:

  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.

Next steps

For more about customization and additional features exploration, check out the Customization section.

Need assistance? We're here to help! Reach out to us at PushFeedback Support.

Ask AI