Adding Feedback widget to topics

This forum is for all Flare issues not related to any of the other categories.
bigtallim
Jr. Propeller Head
Posts: 2
Joined: Wed Jan 28, 2015 1:56 pm

Adding Feedback widget to topics

Post by bigtallim »

Does anybody have a good suggestion for adding customer feedback to a topic of footer? An add on widget? Scripting?

Example: Was this topic helpful? Yes or No

A rating system would also work, something like 2/5 stars (graphic)..

Thanks in advance for your support,

Matt Weaver
techwriter14
Jr. Propeller Head
Posts: 4
Joined: Tue Sep 16, 2014 1:11 pm

Re: Adding Feedback widget to topics

Post by techwriter14 »

Matt - did you find a solution for this? We're looking to do something similar for a client. Unfortunately, Pulse won't work in our situation.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Adding Feedback widget to topics

Post by ChoccieMuffin »

We have a "FEEDBACK" link on the bottom of all our help topics, which sends an email to us with the comments. It's most commonly used internally by colleagues noticing something simple (like a typo or punctuation error), but sometimes external clients do use it.

The code used for it is this:

<script type="text/javascript">/*<![CDATA[*/document.write("<a href='mailto:OUR EMAIL ADDRESS?subject=Customer%20Feedback%20("+document.title+")%20Build:%2014927&body=Topic%20Reference%20(XXXXX%20use%20only):%20"+location.href+"%0A%0APlease%20enter%20your%20comments%20below:%0A%0A'>FEEDBACK</a>")

That bit of code is inserted at the bottom of the MasterPage used in our help. (Bits in blue are bits you would have to customise yourself.)

Hope that helps.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
dazedandconfused
Jr. Propeller Head
Posts: 6
Joined: Fri Jul 05, 2013 9:10 am

Re: Adding Feedback widget to topics

Post by dazedandconfused »

In one of the recent MadCap webinars on Master Pages, the instructor shared a method for adding an email feedback button to your Master page. I tried inserting the code he gave us but it didn't work for me. I probably inserted it in the wrong place. I am going to try the code offered by Choccie Muffin because it really would be helpful to get immediate feedback from our users when they see something that needs to be fixed, added, deleted, etc.

Thanks
dorcutt
Sr. Propeller Head
Posts: 234
Joined: Thu May 15, 2014 12:16 pm

Re: Adding Feedback widget to topics

Post by dorcutt »

Okay, so, I think some of Choccie's code got cut off during the copy/pasting process. I think that the closing parens/brackets of the script were cut off, and there may be some issues with making sure that you alternate nesting single quotes and double-quotes.

Based on choccie's excellent starting point, though (and Dave Lee's perpetual wisdom), I did throw together a system that follows Choccie's formula that I like quite a bit and thought I'd share:

Image

What I did is in the HTML5 TriPane skin (I haven't updated to Flare 11 yet), I combined the "Product Info" and "Company Info" drop-downs into a single "General Info" drop down, and then added a "Feedback" drop-down right next to it in the footer. Under it, all I had was a blank TD with the "Feedback" ID.

Using the text editor, I then added this code to the bottom of my master page, immediately before the </body> tag:

Code: Select all

<div>
            <script type="text/javascript">
				$(document).ready(function(){
				<!--
				  $("#Feedback").append('<p class="footerTopicMaster"><span style="font-size: 9pt; color: #ffffff;"><a class="White" href="YOUREMAIL@YOURDOMAIN.COM?subject=Customer%20Feedback%20(Re:%20'+document.title+'%20article)%20&body=Topic%20Reference%20(YOURCOMPANYNAME%20use%20only):%20('+location.href+')%0A%0APlease%20enter%20your%20comments%20below:%0A%0A"><b>Email us</b></a> about this article</span></p>');
				});
				--></script>
        </div>
Just add your "Feedback" ID to the page footer, paste in the code at the bottom of your Master Page, replace the bits with all caps: YOUREMAIL@YOURDOMAIN.COM and YOURCOMPANYNAME, and you should be good to go.

Note that this uses JQuery, but you don't have to do anything special because Flare already uses Jquery heavily, so you can just throw this code in and it works.
-Dan, Propellerhead-in-training
nielsf
Propeller Head
Posts: 86
Joined: Mon Feb 02, 2015 5:44 am
Location: Copenhagen, Denmark

Re: Adding Feedback widget to topics

Post by nielsf »

Hi,

For Flare 11, I've added the following toolbar script (in the TopicToolBar skin):

Code: Select all

$(document).ready(function(){
  var path = window.location.pathname;
  var filename = path.substring(path.lastIndexOf("Content/"));
  var imgurl = (filename.split("/").length - 1) == 2 ? "../Resources/Images/Footer/emailButton.png" : "../../Resources/Images/Footer/emailButton.png";

  $(".remove-highlight-button").prepend(
  '<span style="position: relative;left: -28px;top: 2px;"><a href="mailto:YOUREMAIL@YOURDOMAIN.COM?subject=Feedback%20(Re:%20' + document.title + '%20article)%20&body=Topic%20Reference%20(COMPANY%20use%20only):%20(' + location.href + ')%0A%0APlease%20enter%20your%20comments%20below:%0A%0A"  title="Email feedback about this topic"><img src="' + imgurl + '" alt="Email feedback about this topic"></a></span>');
  });
The above code adds an email icon image (which you'll have to find somewhere) to the left of the remove highlight button. The image path is relative to the Content folder and depends on the current TOC level. I found that it is always either 2 or 3 away from Content. (There may be a safer place to put the image so you don't have to figure out the level, but I haven't found it.)

EDIT: Remember that in order for Flare to "remember" to copy the email icon to the right location, be sure to include the icon in your css in an unused declaration, eg.:

Code: Select all

/* Just to get Flare to copy the image to the correct location when publishing. */
div.notused 
{
	background-image: url('../Images/Footer/emailButton.png');
}
/EDIT

You may need to adjust the left and top to match your own mail icon, and of course add your own text.

This is to supplement @dorcutt's fine solution, but for Flare 11 output.

-Niels
-----
Flaring in Copenhagen, Denmark
kwag_myers
Propellus Maximus
Posts: 810
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: Adding Feedback widget to topics

Post by kwag_myers »

Is there a way to do this without jQuery (for WebHelp)?

edit: I figured it out:

Code: Select all

        <MadCap:pageFooter>
            <p align="center">
                <a href="javascript:emailFeedback()">Feedback</button>
            </p>
        </MadCap:pageFooter>
		<script type="text/javascript">/*<![CDATA[*/function emailFeedback()
			{
			window.location='mailto:kwag.myers@whatever.com?subject=' + document.title;
	}/*]]>*/</script>
    </body>
Last edited by kwag_myers on Wed Mar 25, 2015 12:24 pm, edited 2 times in total.
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

nielsf wrote:The above code adds an email icon image (which you'll have to find somewhere) to the left of the remove highlight button.
Isn't it a bit unnecessary to use a script to insert a toolbar button?

If you want an email toolbar button, just add your own button to the toolbar in the skin editor, then for the button Click action use something like:

Code: Select all

document.location.href="mailto:you@yourcompany.com?subject=Feedback (Topic: "+document.title+")&body=File: "+ location.href + "%0A%0AComments:%0A%0A";
nielsf
Propeller Head
Posts: 86
Joined: Mon Feb 02, 2015 5:44 am
Location: Copenhagen, Denmark

Re: Adding Feedback widget to topics

Post by nielsf »

Dave Lee wrote: Isn't it a bit unnecessary to use a script to insert a toolbar button?
Hi,
You're absolutely right... I was not aware of that toolbar-building feature! I had considered what the "Add new style" button in the toolbar skin setup pane actually did... I thought it was to do with styles, not buttons...
Thanks for that, Dave, and you're right: Rather more easy (or so it seems, I'll test it!).
-----
Flaring in Copenhagen, Denmark
dorcutt
Sr. Propeller Head
Posts: 234
Joined: Thu May 15, 2014 12:16 pm

Re: Adding Feedback widget to topics

Post by dorcutt »

Nice, thanks for the tip Dave. It seems this is much easier to do in Flare 11 than 10.

When I finally make the switch to top nav, I'll definitely use this. I -just- got done with the tripane setup, so my time for "overhead/nifty" type stuff like this is limited at the moment.
-Dan, Propellerhead-in-training
nielsf
Propeller Head
Posts: 86
Joined: Mon Feb 02, 2015 5:44 am
Location: Copenhagen, Denmark

Re: Adding Feedback widget to topics

Post by nielsf »

And if you're wondering how to add a tooltip to your new button, here's one way:
In the toolbar script, add the following:

Code: Select all

$(document).ready(function(){
  $('button.feedback-button').prop('title', 'Feedback to Edlund');
});
-where feedback-button is the class name of the button (inspect your generated code for the exact name), and "Feedback to Edlund" is the text to show.
You can probably piggy-back another document.ready function.
I was wondering why the new button did not show up in the "UI Text" section of the TopicToolBar skin editor. I think it should have.
Anyway, I hope it helps someone.
-Niels
-----
Flaring in Copenhagen, Denmark
ecasslee
Jr. Propeller Head
Posts: 1
Joined: Thu Jun 04, 2015 5:29 am

Re: Adding Feedback widget to topics

Post by ecasslee »

We added a feedback button that lets the user send us an email from within the topic window but found that users sent us technical queries about our product rather than useful feedback about the help topic.
So we'd like to change our feedback mechanism to a simple Yes/No questionnaire instead. It would look like this


Was this helpful?
o Yes o No


Does anyone know how to implement this in Flare 11?
Thanks
AnjanaDevarakonda
Propeller Head
Posts: 29
Joined: Sun Apr 12, 2015 3:21 pm

Re: Adding Feedback widget to topics

Post by AnjanaDevarakonda »

I recently included feedback buttons in my Flare project. I've written the entire procedure here - https://thechecklistaddict.wordpress.co ... cap-flare/
Hope this helps.
jknasinski
Propeller Head
Posts: 36
Joined: Tue Jul 10, 2012 9:31 am
Location: Milwaukee Wisconsin

Re: Adding Feedback widget to topics

Post by jknasinski »

In Flare 12 top nav output, I recently added a feedback widget as per: https://thechecklistaddict.wordpress.co ... cap-flare/
It works great in all my topics but in the search results window the formatting is messed up.
I'd like to exclude the feedback buttons from the search results window or at least fix the formatting. Any ideas?
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Adding Feedback widget to topics

Post by jsandora »

AnjanaDevarakonda wrote:I recently included feedback buttons in my Flare project. I've written the entire procedure here - https://thechecklistaddict.wordpress.co ... cap-flare/
Hope this helps.
Thanks for documenting how to set this up, may have to give it a shot. We're currently using a free widget from feedbacklite.com, but since the free version only offers an open text field (not yes/no options), we aren't getting many responses.

Question about your approach though: how are "Yes" responses recorded? It looks like clicking "No" opens an email for users to send comments, but what happens when they click Yes? Are you able to see how many of those clicks you get per topic?
Software Documentation Specialist (but really, Tech Writer)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

jsandora wrote:Question about your approach though: how are "Yes" responses recorded? It looks like clicking "No" opens an email for users to send comments, but what happens when they click Yes? Are you able to see how many of those clicks you get per topic?
I'd suggest using Google Analytics - you can send an event to Analytics when you click yes/no.


I've just set up a feedback control for our help sites, which is going live next week.

We're using Google Analytics, and clicking the thumbs up/down buttons will send an event to analytics.
The 'thumbs down' button also has some options to give more information.

Then we use analytics to get reports on which pages have likes/dislikes (including which options were selected).

If anyone's interested, I'll post/blog the solution when it's live.
jsandora
Propeller Head
Posts: 94
Joined: Thu Jun 23, 2011 5:56 am
Location: Boston, MA

Re: Adding Feedback widget to topics

Post by jsandora »

Dave Lee wrote: I'd suggest using Google Analytics - you can send an event to Analytics when you click yes/no.
I'd love to see this Dave, thanks. We already use Analytics to track general usage for all our help systems, would be great to be able to use it for feedback as well.
Software Documentation Specialist (but really, Tech Writer)
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Adding Feedback widget to topics

Post by cdschroeder »

Dave, have you gone live yet? We want to implement something like this soon, so I'd love to see your full solution!
Casey

Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

cdschroeder wrote:Dave, have you gone live yet? We want to implement something like this soon, so I'd love to see your full solution!
Yes.

It sends an analytics event when you (a) click thumbs up, (b) click thumbs down, and choose each of the 3 options. So you can get 4 possible events.

Unfortunately, I'm a bit busy to share the code, but it's not hard to work out if you inspect using browser tools.
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Adding Feedback widget to topics

Post by cdschroeder »

Dave Lee wrote:
cdschroeder wrote:Dave, have you gone live yet? We want to implement something like this soon, so I'd love to see your full solution!
Yes. For example, if you go this page you'll see a thumbs up/down.

An analytics event when you (a) click thumbs up, (b) click thumbs down, and choose each of the 3 options. So you can get 4 possible events.

Unfortunately, I'm a bit busy to share the code, but it's not hard to work out if you inspect using browser tools.
I think you may have forgotten to attach the link...? :) Thanks in advance for sharing!
Casey

Image
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Adding Feedback widget to topics

Post by NorthEast »

Here's the code behind our feedback system.


HTML
This is in the master page.
Note: I've replaced the FontAwesome thumbs up/down icons with Yes/No text.

Code: Select all

        <div id="feedback-survey">
            <p class="feedback-question">Did you find this helpful? <i class="feedback-yes" title="Yes, this article was helpful." alt="Yes, this article was helpful.">Yes</i> <i class="feedback-no" title="No, this article wasn't helpful." alt="No, this article wasn't helpful.">No</i></p>
            <div class="feedback-reason no">
                <hr />
                <div>
                    <h2>Sorry about that</h2>
                    <p>Why wasn't this helpful? (check all that apply)</p>
                    <div class="feedback-option">
                        <input type="checkbox" class="option no" id="option1" value="Couldn't find what I was looking for" data-analytics-label="Could not find" />
                        <label for="option1">Couldn't find what I was looking for</label>
                    </div>
                    <div class="feedback-option">
                        <input type="checkbox" class="option no" id="option2" value="Instructions confusing or unclear" data-analytics-label="Confusing or unclear" />
                        <label for="option2">Instructions confusing or unclear</label>
                    </div>
                    <div class="feedback-option">
                        <input type="checkbox" class="option no" id="option3" value="Instructions didn't work" data-analytics-label="Did not work" />
                        <label for="option3">Instructions didn't work</label>
                    </div>
                    <div class="feedback-reason no-thanks">
                        <p><b>Thanks for your feedback.</b>
                        </p>
                        <h4>Want to tell us more?</h4>
                        <p>Send an email to our authors to leave your feedback.</p>
                        <p><a href="mailto:YourEmail@YourSite.com?subject=Feedback" id="feedbackEmailLink">Email us</a></p>
                    </div>
                </div>
            </div>
            <div class="feedback-reason yes-thanks">
                <hr />
                <h2>Great!</h2>
                <p>Thanks for taking the time to give us some feedback.</p>
            </div>
        </div>
Javascript
This is in a js file, which is linked from the master page body.
The GA script must be run before this - I put that in a separate js file, also linked from the master page body.

Code: Select all

$(document).ready(function(){
	
	/* -------------- Feedback -------------- */
	/* Yes click */
	$('.feedback-yes').click(function() {
		/* fade out question, fade in thankyou message */
		$('.feedback-question').fadeOut(function() {
			$('.feedback-reason.yes-thanks').fadeIn();
		});
					
		ga('send', 'event', 'Feedback - Yes', 'N/A', location.href);

	});

	/* No click */
	$('.feedback-no').click(function() {
		/* fade out question, fade in thankyou message */
		$('.feedback-question').fadeOut(function() {
			$('.feedback-reason.no').fadeIn();
		});
	});
		
	/* No - response reasons */
	$('.feedback-reason .option').change(function() {
		/* if any options change, disable checkbox, record event, and fade in thankyou and email link */
		$(this).attr('disabled', true);
			if ($(this).is(':checked')) {
				var reason = $(this).attr('data-analytics-label');
				ga('send', 'event', 'Feedback - No', reason, location.href);
			}
		$('.feedback-reason.no-thanks').fadeIn();
	});
	
});	
CSS
This is in the stylesheet.

Code: Select all

.feedback-reason 
{
	display: none;
} 
.feedback-question i:hover,
.feedback-question i:focus,
.feedback-question i:active
{
	cursor: pointer;
}
Analytics
An event is sent to analytics which contains 3 bits of information:
(a) A category of "Feedback - Yes" or "Feedback - No".
(b) An action which describes one of the reasons selected when you click No, e.g. "Could not find" - the action text is set by the data-analytics-label in the HTML.
(c) The label is the page URL.
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Adding Feedback widget to topics

Post by cdschroeder »

Wow, thanks so much, Dave! Can't wait to try this out!
Casey

Image
lburn
Jr. Propeller Head
Posts: 2
Joined: Tue May 09, 2017 12:12 pm

Re: Adding Feedback widget to topics

Post by lburn »

This is fantastic - exactly what I was looking for!

I've been able to implement most of it, but I can't get this part to display after the user clicks No and one of the options:

<div class="feedback-reason no-thanks">
<p><b>Thanks for your feedback.</b>
</p>
<h4>Want to tell us more?</h4>
<p>Send an email to our authors to leave your feedback.</p>
<p><a href="mailto:YourEmail@YourSite.com?subject=Feedback" id="feedbackEmailLink">Email us</a></p>
</div>

Other than the obvious update to the email address, is there anything I need to do to get this to display? (I'm a newbie to css, div tags, and .js, so I figure I must have missed something :? .

Thanks in advance for any help!
bunnycat
Propeller Head
Posts: 70
Joined: Tue Nov 03, 2015 6:44 am

Re: Adding Feedback widget to topics

Post by bunnycat »

lburn wrote:This is fantastic - exactly what I was looking for!

I've been able to implement most of it, but I can't get this part to display after the user clicks No and one of the options:

<div class="feedback-reason no-thanks">
<p><b>Thanks for your feedback.</b>
</p>
<h4>Want to tell us more?</h4>
<p>Send an email to our authors to leave your feedback.</p>
<p><a href="mailto:YourEmail@YourSite.com?subject=Feedback" id="feedbackEmailLink">Email us</a></p>
</div>

Other than the obvious update to the email address, is there anything I need to do to get this to display? (I'm a newbie to css, div tags, and .js, so I figure I must have missed something :? .

Thanks in advance for any help!
Iburn, I don't see anything obviously wrong in your code snippet that would prevent it from displaying the email link after the No click. (But I am a newbie to Javascript too, so there is maybe something wrong in there that I didn't catch...)

I implemented the feedback mechanism based off of Dave Lee's code snippets and it worked beautifully. I changed up how/what email body got submitted (as below). It leverages the onclick function in the javascript file to submit an email with a bit more information.

I first added a function call to the javascript file to do an onclick to open the email client:

Code: Select all

/* Email Feedback click */
	$('.feedback-yes').onclick(function() {
   
	});
Then in the masterpage code, used the following code snippet (very like Dave's):

Code: Select all

<div class="feedback-reason no-thanks">
                        <p>Thank you for your feedback.</p>
                        <h4>Want to tell us more?</h4>
                        <p>Email your feedback to our documentation team.</p>
                        <p><a class="feedback-email" title="Email" alt="Email the documentation team" onclick="document.location.href="mailto:email@example.com?subject=Documentation Feedback for Help&body=Comments:%0A%0A%0A%0AHelp Topic Path: "+location.href+"%0A%0ATopic Name: "+document.title+"%0A%0AThank you";">Email Feedback</a>
                        </p>
                    </div>
AlexFox
Sr. Propeller Head
Posts: 149
Joined: Thu Oct 19, 2017 1:56 am

Re: Adding Feedback widget to topics

Post by AlexFox »

Dave Lee wrote:...
Hi Dave, I love this set-up and I've tried to implement something similar but I seem to get an error after clicking Yes or No;

Code: Select all

Running command: ga("send", "event", "Feedback - Yes", "N/A", "http://mypage.com")
Command ignored. Unknown target: undefined
I've completed all of the google analytic setup prerequisites and I'm using google analytic debugger so I can see it's functioning correctly in all other aspects..

Does your version of this still work? Has anyone else had a similar problem?

Thanks!
Post Reply