{% if site.feedback %}<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> <h5 class=“feedback–title”>Feedback</h5> <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”>
Glad to hear it! Please <a href="{{ site.repo }}/issues/new">tell us how we can improve</a>.
</p> <p class=“feedback–response feedback–response-no”>
Sorry to hear that. Please <a href="{{ site.repo }}/issues/new">tell us how we can improve</a>.
</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>{% endif %}<br/>