add feedback widget to bottom of docs (#11037)

content/en/docs/home/_index.md

@@ -11,6 +11,7 @@ display_browse_numbers: true
 linkTitle: "Home"
 main_menu: true
 weight: 10
+hide_feedback: true
 menu:
   main:
     title: "Documentation"

layouts/docs/baseof.html

@@ -16,6 +16,52 @@
 			{{ block "side-menu" . }}<div id="docsToc" style="display:none;"></div>{{ end }}
 			<div id="{{ block "content-id" . }}docsContent{{ end }}">
 				{{ block "content" . }}{{ end }}
+				{{ if not .Params.hide_feedback }}
+					<h2>Feedback</h2>
+					<p class="feedback--prompt">Was this page helpful?</p>
+					<button class="button feedback--yes">Yes</button>
+					<button class="button feedback--no">No</button>
+					<p class="feedback--response feedback--response__hidden">
+						Thanks for the feedback. If you have a specific, answerable question about how to use Kubernetes,
+						ask it on <a target="_blank" rel="noopener"
+						href="https://stackoverflow.com/questions/tagged/kubernetes">Stack Overflow</a>. Open
+						an issue in the GitHub repo if you want to <a class="feedback--link" target="_blank" rel="noopener"
+						href="https://github.com/kubernetes/website/issues/new?title=Issue%20with%20k8s.io">report a problem</a> or
+						<a class="feedback--link" target="_blank" rel="noopener"
+						href="https://github.com/kubernetes/website/issues/new?title=Improvement%20for%20k8s.io">suggest an improvement</a>.
+					</p>
+					<script>
+						const yes = document.querySelector('.feedback--yes');
+						const no = document.querySelector('.feedback--no');
+						document.querySelectorAll('.feedback--link').forEach(link => {
+							link.href = link.href + window.location.pathname;
+						});
+						const sendFeedback = (value) => {
+							if (!gtag) { console.log('!gtag'); }
+							gtag('event', 'click', {
+								'event_category': 'Helpful',
+								'event_label': window.location.pathname,
+								value
+							});
+						};
+						const disableButtons = () => {
+							yes.disabled = true;
+							yes.classList.add('feedback--button__disabled');
+							no.disabled = true;
+							no.classList.add('feedback--button__disabled');
+						};
+						yes.addEventListener('click', () => {
+							sendFeedback(1);
+							disableButtons();
+							document.querySelector('.feedback--response').classList.remove('feedback--response__hidden');
+						});
+						no.addEventListener('click', () => {
+							sendFeedback(0);
+							disableButtons();
+							document.querySelector('.feedback--response').classList.remove('feedback--response__hidden');
+						});
+					</script>
+				{{ end }}
 			</div>
 		</section>
     <div id="pre-footer"> <!-- This is at the bottom of every topic underneath the TOC and content -->

sass/_base.sass

@@ -1019,6 +1019,22 @@ dd
 	a.issue
 		margin-left: 0px
 
+.feedback--no
+	margin-left: 1em
+
+.feedback--prompt
+	margin-bottom: 1em
+
+.feedback--response
+	margin-top: 1em
+
+.feedback--button__disabled
+	background-color: #f7f7f7
+	color: graytext
+
+.feedback--response__hidden
+	display: none
+
 .fixed footer
 	position: fixed
 	bottom: 0