As of release 2020.11 a javascript event (X-Vanilla-Article-Voted) is being fired on each user's reaction. This event is passing the article and knowledge-base records (see our docs) as well as the reaction vote registered (yes|no).
Using X-Vanilla-Article-Voted event
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
{
article: {
articleID: $id
...
},
knowledgeBase: {
knowledgeBaseID: $Id
....
},
userVote: {
vote: "yes"
},
}
Mounting Html in the a page.
To integrate any html you wish on the page you can target a div hidden on the article page with the id of article-reactions-event.
Sample script:
The following listens for the X-Vanilla-Article-Voted then open a pop-up.
<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>
