Feedback widget for MadCap Flare

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

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

Floating button

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.

Other installation modes

Inline button

1. Load the widget in your master page head:

   <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 your master page or topic content:

   <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 your master page head:

   <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 your master page or topic content:

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

Like and dislike buttons

1. Load the widget in your master page head:

   <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 your master page or topic 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">
       <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.