Saltar al contenido principal

Feedback widget for MadCap Flare

PushFeedback collects user feedback directly from your website. This guide covers installation in MadCap Flare.

Feedback widget for docs screenshot

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.
  • MadCap Flare installed and a project opened.

Installation​

  1. Open your MadCap Flare project.

  2. Navigate to Resources > Stylesheets in the Project Organizer.

  3. Open your main stylesheet (or create a new one if needed).

  4. Add the following CSS import at the top of your stylesheet:

    @import url('https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css');

  5. Navigate to Resources > Master Pages in the Project Organizer.

  6. Open your master page (e.g., Default.htm or the specific master page you're using for your documentation).

  7. Before the closing </head> tag, insert the following script:

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

  8. Near the closing </body> tag, add the feedback button:

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

  9. Save all changes to your master page and stylesheet.

  10. Build your MadCap Flare project by going to Project > Build Primary (or the specific target you're using).

  11. Once the build is complete, open the generated HTML output in a web browser to verify that the feedback button appears and functions correctly on every topic.

Tips​

  • If you have multiple master pages, you'll need to add the feedback button to each master page where you want it to appear.
  • You can customize the button's position and style by modifying the attributes in the <feedback-button> element.
  • The feedback button will automatically appear on all pages that use the modified master page.

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.