Custom HTML tag.html

<style>
  /* inline styling for rating buttons
  #rate-tag{
    text-align: center;
    font-weight: 700;
  }
  #rating-tag a{
    font-size: 2em; 
    filter: grayscale(100%);
  }
  #rating-tag a:hover, #rating-tag a.sent{
    filter: unset;
  }
</style>
<script>
  (function() {
    // Object with our ratings buttons and Google Analytics event data
    var ratings = [{text:'😠', label:'Very Poor', value: 1},
                   {text:'☹️', label:'Poor', value: 2},
                   {text:'😐', label:'Neutral', value: 3},
                   {text:'😊', label:'Very Good', value: 4},
                   {text:'😍', label:'Excellent', value: 5}];
    // Create a new div element
    var div = document.createElement('div');
    div.setAttribute("id", "rate-tag");
    // Add the text content
    div.innerHTML = "Rate this article:<div id='rating-tag'></div>";
    // Getting a page element to add the rating block
    var article = document.querySelector('article');
    // Inject the new element at the end of the article tag
    if (article) {
      article.parentElement.insertBefore(div, article.nextSibling);
      // Add rating buttons/links
      var rate = document.getElementById('rating-tag');
      ratings.forEach(function(el) {
        var a = document.createElement('a');
        a.innerText = el.text;
        a.setAttribute('alt', el.label);
        a.setAttribute('data-label', el.label);
        a.setAttribute('data-value', el.value);
        a.addEventListener('click', {{JS - Rating Event Callback}}, true);
        rate.appendChild(a);
      });
    }
  })();
</script>