From 65c93dad0664f3413c2375dbb4ce81e9fea1d40e Mon Sep 17 00:00:00 2001
From: Kayce Basques <kayce@google.com>
Date: Tue, 11 Dec 2018 14:29:10 -0800
Subject: [PATCH] add feedback widget

---
 layouts/_default/content.html  |  5 ++-
 layouts/partials/feedback.html | 57 ++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 layouts/partials/feedback.html

diff --git a/layouts/_default/content.html b/layouts/_default/content.html
index 1fd193cce6..489c32b762 100644
--- a/layouts/_default/content.html
+++ b/layouts/_default/content.html
@@ -2,5 +2,8 @@
 	<h1>{{ .Title }}</h1>
 	{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 	{{ .Content }}
+	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
+		{{ partial "feedback.html" .Site.Params.ui.feedback }}
+	{{ end }}
 	<div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/partials/feedback.html b/layouts/partials/feedback.html
new file mode 100644
index 0000000000..0978321907
--- /dev/null
+++ b/layouts/partials/feedback.html
@@ -0,0 +1,57 @@
+<style>
+  .feedback--answer {
+    display: inline-block;
+  }
+  .feedback--answer-no {
+    margin-left: 1em;
+  }
+  .feedback--response {
+    display: none;
+    margin-top: 1em;
+  }
+  .feedback--response__visible {
+    display: block;
+  }
+</style>
+<h2 class="feedback--title">Feedback</h2>
+<p class="feedback--question">Was this page helpful?</p>
+<button class="feedback--answer feedback--answer-yes">Yes</button>
+<button class="feedback--answer feedback--answer-no">No</button>
+<p class="feedback--response feedback--response-yes">
+  {{ .yes | safeHTML }}
+</p>
+<p class="feedback--response feedback--response-no">
+  {{ .no | safeHTML }}
+</p>
+<script>
+  const yesButton = document.querySelector('.feedback--answer-yes');
+  const noButton = document.querySelector('.feedback--answer-no');
+  const yesResponse = document.querySelector('.feedback--response-yes');
+  const noResponse = document.querySelector('.feedback--response-no');
+  const disableButtons = () => {
+    yesButton.disabled = true;
+    noButton.disabled = true;
+  };
+  const sendFeedback = (value) => {
+    if (typeof ga !== 'function') return;
+    const args = {
+      command: 'send',
+      hitType: 'event',
+      category: 'Helpful',
+      action: 'click',
+      label: window.location.pathname,
+      value: value
+    };
+    ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
+  };
+  yesButton.addEventListener('click', () => {
+    yesResponse.classList.add('feedback--response__visible');
+    disableButtons();
+    sendFeedback(1);
+  });
+  noButton.addEventListener('click', () => {
+    noResponse.classList.add('feedback--response__visible');
+    disableButtons();
+    sendFeedback(0);
+  });
+</script>