Custom Flairs

In March 2025, Chattable introduced custom flairs for every chat. A flair is an extra CSS class name added to the sender info of a message. This allows you to customize each message per the user flair if it exists.

Let's say for example, I gave myself a flair called "fire", every message I send will have a CSS class called "fire" appended to the .senderInfo element. We can use this to add flames to my username via CSS.

How do I set flairs?

Flairs are given to users using JavaScript on the client side (your site). (Soon Owners will be able to right click messages to assign flairs) You'll be able to decide how the flair is set (e.g. via command, a button on your page, or something else entirely). Below is how you set a flair using the Chattable JS Library,

chattable.setFlair("string");

The snippet above set's the current user's flair to "string". If we use inspect element, we can see that every message sent by the client that ran this code will have a class named "string" appended to their sender info. Flairs can be used to customize more than just the name, if you use psuedo elements you can use flairs to allow your users to select profile photos!

Important Notice

Custom Flairs are unique to each chat and do not carry over in between chats. Custom Flairs are not saved to the user's account, the current flair is stored as a cookie and can be cleared anytime when the localStorage object gets wiped.