{% 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/>