diff --git a/kuma/wiki/templates/wiki/document.html b/kuma/wiki/templates/wiki/document.html
index 559889c3b38..3a7e2b7e899 100644
--- a/kuma/wiki/templates/wiki/document.html
+++ b/kuma/wiki/templates/wiki/document.html
@@ -416,4 +416,7 @@
{{ _('Document Tags and Contributors') }}
{# This can be removed once the social network button multivariate test is completed. #}
mdn.optimizely.push(['activate', 2796520257]);
+ {% if waffle.flag('share_links') or waffle.flag('helpfulness') %}
+ {{ js('document') }}
+ {% endif %}
{% endblock %}
diff --git a/media/js/components.js b/media/js/components.js
index 5045b0be9fa..149329ea0f8 100644
--- a/media/js/components.js
+++ b/media/js/components.js
@@ -429,6 +429,7 @@
{ state: 'success', className: 'success', iconName: 'icon-smile' },
{ state: 'error', className: 'error', iconName: 'icon-frown' },
{ state: 'warning', className: 'warning', iconName: 'icon-warning-sign' },
+ { state: 'question', className: 'question', iconName: 'icon-question-sign' },
defaultState
];
var statesObj = {};
diff --git a/media/js/helpfulness.js b/media/js/helpfulness.js
new file mode 100644
index 00000000000..b1e3addf5f3
--- /dev/null
+++ b/media/js/helpfulness.js
@@ -0,0 +1,91 @@
+(function(win, doc, $) {
+
+ // this feature requires localStorage
+ if (('localStorage' in win)) {
+ var ignore = localStorage.getItem('helpful-ignore') === 'true'; // true if ever clicked ignore
+ var asked_recently = parseInt(localStorage.getItem(doc.location + '#answered-helpful'), 10) > Date.now();
+ if (!ignore && !asked_recently) {
+ // ask about helpfulness after 1 min
+ setTimeout(inquire, 60000);
+ }
+ }
+
+ // create a notification
+ function inquire() {
+ // dimension7 is "helpfulness"
+ if(win.ga) ga('set', 'dimension7', 'Yes');
+
+ // ask a simple question
+ var ask = gettext('Did this page help you?') +
+ '
' +
+ gettext('Yes') +
+ '' +
+ gettext('No') +
+ '' +
+ gettext('Never ask me again') +
+ '';
+ var notification = mdn.Notifier.growl(ask, {closable: true, duration: 0}).question();
+
+ // answers to the simple question include...
+ $('#helpful-yes').on('click', function(e) {
+ e.preventDefault();
+ confirm('Thanks for your feedback!', 'success', 'Yes');
+ });
+ $('#helpful-no').on('click', function(e) {
+ e.preventDefault();
+ confirm('', 'error', 'No');
+ });
+ $('#helpful-ignore').on('click', function(e) {
+ e.preventDefault();
+ localStorage.setItem('helpful-ignore', 'true');
+ confirm("We won't bug you again.", 'info', 'Ignore');
+ });
+
+ // create a dropdown in case the page is unhelpful
+ var unhelpful_options = [
+ {val: 'Translate', text: gettext('Translate it into my language')},
+ {val: 'Make-Simpler', text: gettext('Make explanations clearer')},
+ {val: 'Needs-More-Info', text: gettext('Add more details')},
+ {val: 'Needs-Correction', text: gettext('Fix incorrect information')},
+ {val: 'Other', text: gettext('Something else')}
+ ]
+ var $select = $('').attr({
+ id: 'helpful-detail'
+ }).append($('