Adding Feedback Buttons in MadCap Flare

Gathering feedback can we very beneficial for improving your documentation. There are many means and ways to collect feedback from users. You can read more about it at
10 Ways to Gather Feedback from Users. My project, had a small note in the footer of my WebHelp, with an email address, requesting users to provide feedback.

“DCR values and appreciates comments and feedback from system users and readers of its user guides because these comments provide valuable input to the revisions, corrections, and updates. Please email any comments you might have to the Documentation Department.”

It is difficult to elicit responses or feedback from users and in that attempt, I wanted to change this format to a more visually interesting one. So replaced the text with a like and dislike button.

Here’s how it looks:

FeedbackButtonsinWebHelp

If you want to check out the HTML and CSS code written to develop this feedback option you can find it here CodePen.

Here’s how I added these buttons in Flare by using just CSS, without any JavaScript.

Copy the images ( )for like and dislike buttons to your images folder (Content > Resources > Images).

To define styles in your CSS, open your stylesheet with Internal Text Editor (Content > Resources > Stylesheets) and copy the following code:

 /* Feedback button */  
 .modal {  
  background: rgba(236,236,236,0);  
  display: inline-block;  
  width:auto;  
  text-align:left;  
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;  
 }  
 .question {  
  color:#000000;  
  font-size: 14px;  
  padding: 0.5em -5em;  
  }  
 .modal > label {  
  background: #ffffff;  
  border: 1px solid #E0E0E0;  
  border-radius: .2em;  
  color: #000000;  
  cursor: pointer;  
  display: inline-block;  
  font-weight: normal;  
  font-variant: normal;  
  font-size: 14px;  
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;  
  padding: 0.5em 0.8em;  
  text-shadow: 1px 1px 1px #fff;  
 }  
 .modal > label:hover {  
  border: 1px solid #54B948;  
  color:#54B948;  
 }  
 .modal a {  
  background: #ffffff;  
  border: 1px solid #E0E0E0;  
  border-radius: .2em;  
  color: #000000;  
  cursor: pointer;  
  display: inline-block;  
  font-weight: normal;  
  font-variant: normal;  
  text-decoration: none;  
  font-size: 14px;  
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;  
  padding: 0.5em 0.8em;  
  margin: 0.5em 0.5em 0.5em .2em;  
  text-shadow: 1px 1px 1px #fff;  
 }  
 .modal > a:hover {  
  border: 1px solid #54B948;  
  color:#54B948;  
 }  
 .modal__overlay {  
  background: rgba(0,0,0,0.4);  
  bottom: 0;  
  left: 0;  
  position: fixed;  
  right: 0;  
  text-align: center;  
  text-shadow: none;  
  top: 0;  
  z-index: 600;  
  justify-content:center;  
  align-items:flex-end;  
 }  
 .modal__wrap {  
  padding: 1em;  
  position: relative;  
  vertical-align: middle;  
  max-width: 500px;  
  width: 10%;  
  background: #ffffff;  
  margin-bottom:100px;  
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);  
  border-radius:10px;  
 }  
 @media (min-height: 37.5em) {  
  .modal__wrap {  
   left: 50%;  
   position: absolute;  
   top: 50%;  
   -webkit-transform: translate(-50%, -80%);  
   transform: translate(-50%, -80%);  
  }  
 }  
 .modal__wrap label {  
  background: #54B948;  
  border-radius: 50%;  
  color: #ffffff;  
  cursor: pointer;  
  display: inline-block;  
  height: 1.5em;  
  line-height: 1.5;  
  position: absolute;  
  right: 1em;  
  top: 25%;  
  width: 1.5em;  
 }  
 .modal__wrap p {  
  color: #000000;  
  text-align: justify;  
  padding: 0px;  
  margin:0px;  
 }  
 .modal input:focus ~ label {  
  -webkit-transform: scale(0.97);  
  transform: scale(0.97);  
 }  
 input {  
  position: absolute;  
  top: -1000px;  
 }  
 .modal__overlay {  
  opacity: 0;  
  -webkit-transform: scale(0.5);  
  transform: scale(0.5);  
  -webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);  
  transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);  
  z-index: -100;  
 }  
 input:checked ~ .modal__overlay {  
  opacity: 1;  
  -webkit-transform: scale(1);  
  transform: scale(1);  
  z-index: 800;  
 }  
 .thumbs_up  
 {  
      background-image: url('../Images/thumbs_up.png');  
      background-position: left center;  
      background-repeat: no-repeat;  
      padding-left: 20px;  
 }  
 .thumbs_down  
 {  
      background-image: url('../Images/thumbs_down.png');  
      background-position: left center;  
      background-repeat: no-repeat;  
      padding-left: 20px;  
 }

If you already have a MasterPage for your WebHelp, open the MasterPage with Internal Text Editor. MasterPages in Flare have the extension, .flmsp.
Copy the HTML code from CodePen.
Paste the code between the <body> HTMLcode </body> tags.
Save the file and click Preview as primary target or press Ctrl+w to preview the topic.