To better give Owners control over hiding offensive content, I’ve just deployed a .has-bad-words class that gets applied to message that have, well, bad words. “Bad words” are defined by our list built in to the chat, as well as any you choose to set up in the Chat Settings->“Advanced” section.
By default, you are able to automatically hide bad words like so:
This helps, but it’s still not great – it’s unprofessional and most moderators would want to clean that up. So, let’s utilize the new “has-bad-words” class and get rid of this content:
.has-bad-words{display:none;}
Just like that, we can completely erase the message.
But, what if we want to still see that someone tried to say something? Simple enough; let’s hide the text, then apply a little message showing that the content is hidden, using the following code:
.rank-visitor .has-bad-words .msgTextOnly{display:none;}.has-bad-words .msgText:before{content:'[Inappropriate content hidden]';display:block !important;font-size:initial;opacity:0.5;}
Almost there. I’m the Owner of the chat, so I still want to be able to see what was said. Let’s try applying that display:none; attribute to chats that have the rank-visitor class, so that Visitors (unranked) users won’t see the message, but my moderators and I can.
.rank-visitor .has-bad-words .msgTextOnly{display:none;}.has-bad-words .msgText:before{content:'[Inappropriate content hidden]';display:block !important;font-size:initial;opacity:0.5;}
Owner’s view:
Visitor’s view:
Very nice.
Using this quick CSS trick, our chat will continue looking professional, while still empowering the moderation team to view and handle troublemakers.
Please let me know what you think, and if there are any other CSS classes you can think of that would help make your chat run more smoothly, feel free to reply with your ideas and I’ll be happy to take them under consideration! 
Happy chatting!