Knowlege-Base Article reactions event - HL Vanilla Community
<main> <article class="userContent"> <div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/6NLD12AH355D/microsoftteams-image-288-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/6NLD12AH355D/microsoftteams-image-288-29.png" alt="MicrosoftTeams-image (8).png" height="108" width="1356" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>As of release 2020.11 a javascript event (<strong>X-Vanilla-Article-Voted) </strong>is being fired on each user's reaction. This event is passing the article and knowledge-base records (<a href="https://success.vanillaforums.com/kb/articles/202-apiv2-reference-endpoints" rel="nofollow noreferrer ugc">see our docs</a>) as well as the reaction vote registered (yes|no). </p><h4 data-id="using-x-vanilla-article-voted-event">Using X-Vanilla-Article-Voted event</h4><p>As a developer you can hook into this event, by just adding an event listener to your script (see below) and use a call back function you can access the event details. The details object looks like this</p><pre class="code codeBlock" spellcheck="false" tabindex="0">{ article: { articleID: $id ... }, knowledgeBase: { knowledgeBaseID: $Id .... }, userVote: { vote: "yes" }, } </pre><p></p><h4 data-id="mounting-html-in-the-a-page.">Mounting Html in the a page.</h4><p>To integrate any html you wish on the page you can target a div hidden on the article page with the id of <code class="code codeInline" spellcheck="false" tabindex="0">article-reactions-event</code>. </p><p><br></p><h4 data-id="sample-script%3A">Sample script:</h4><p>The following listens for the <strong>X-Vanilla-Article-Voted </strong>then open a pop-up.</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><script> const eventListener = e => { const eventDetials = e.detail; let eventDiv = document.getElementById("article-reactions-event"); let outerDiv = document.createElement("div"); outerDiv.style.position = "fixed"; outerDiv.style.zIndex = "1"; outerDiv.style.margin = "0 auto"; outerDiv.style.left = "0"; outerDiv.style.top = "0"; outerDiv.style.width = "100vw"; outerDiv.style.height = "100vh"; outerDiv.style.backgroundColor = "rgba(50,50,50,.5)"; outerDiv.style.justifyContent = "center"; let innerDiv = document.createElement("div"); innerDiv.style.position = "relative" innerDiv.style.backgroundColor = "white"; innerDiv.style.margin = "0 auto"; innerDiv.style.width = "600px"; innerDiv.style.height = "600px"; innerDiv.style.border = "solid" innerDiv.style.marginTop = "100px"; innerDiv.style.zIndex = "100"; innerDiv.style.textAlign ="center"; const surveyText = `We appreciate your feedback` innerDiv.innerHTML = surveyText; outerDiv.appendChild(innerDiv); eventDiv?.appendChild(outerDiv); }; document.addEventListener("X-Vanilla-Article-Voted", eventListener); </script> </pre><p><br></p> </article> </main>