Deceiving notification badge of Shopify Inbox Widget

journtalat
Tourist
4 0 1

bb.png

 

This is what a customer sees on my store. Even though there is no message sent by me.

It gets the attention of customers to click on it but the problem is, why would I want that?
I want them to be fully focused on my website, not the notification that pops up for nothing.

Since there is no option to remove it, I tried adding these codes to base.css and theme.liquid in <styles>

 

 

.chat-notification {
display: none!important;
}

 

and

 

span.chat-notification {
visibility: hidden!important;
}

 

and many more to no avail.

Any suggestions for the problem or comments on why Shopify took this unneccessary action?

Replies 3 (3)

journtalat
Tourist
4 0 1

It's been 3 days and 0 comment. It seems the universe is telling me to use something else. OK!

doyenn
Tourist
5 0 0

I agree, it's obnoxious design and should be editable / removable... wish I was a coder who could offer a solution.

DonD
Tourist
8 1 4

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.