Your wish has come true 🙂
The problem is that the Inbox app chat notification dot is added dynamically using javascript so it is not addressable until after that happens. To make matters worse, it is deep within a ShadowRoot which makes it tricky to address. After a late-nighter though, I figured out how to do this, it works for sure in Refresh theme and probably in most themes.
Add the following code into theme.liquid just above the </body> tag:
<script>
function accGetCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function accSetCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
let accChatOpened = accGetCookie("acc_chat_opened");
if (accChatOpened=="") {
var index=0;
setTimeout(function accCheckForChatNode() {
if (document.body.contains(document.getElementById('shopify-chat'))) {
setTimeout(accAdjustChatNotification, 300);
} else {
index += 1;
if (index < 20){setTimeout(accCheckForChatNode, 50);}
}
}, 50);
function accAdjustChatNotification() {
const accChatDiv = document.getElementById('shopify-chat');
accChatDiv.addEventListener('click', () => {
accSetCookie("acc_chat_opened","true","365");
});
const accNotification = document.getElementById('shopify-chat').childNodes[0].shadowRoot.childNodes[3].childNodes[0].childNodes[2];
if (accNotification.innerHTML=="1") {
accNotification.outerHTML="";
}
}
}
</script>
Explanation:
Once the shopper clicks on the widget to open it, the notification dot goes away on its own. So we use a cookie to track that event. First we check to see if the cookie is present, indicating the shopper has clicked the widget. If so, we leave the widget alone.
If the cookie is absent, indicating the shopper has not clicked the widget (so the false notification "1" will display), we take action to hide the notification (but only if the value is "1"). Also we attach an event listener to the widget to set the cookie when it is clicked.
Finally, we are polling the DOM every 50 milliseconds to check if the node we are interested in is present. Once the parent node is present, we wait an additional 300 milliseconds to hide the notification.
