What are they

Custom user flairs are used to customize users messages in your chat in ways that can be unique to them. These flairs are set in JavaScript but the magic happens with your CSS. In order to use custom flairs to it's fullest extent, you must understand the logic behind user flairs and how they work.

How to set them

Before you can get or set a user's flair in JavaScript, ensure you have the Chattable library inside your <head> element.

<script src="https://iframe.chat/scripts/main.min.js"></script>

Setting a user flair is a client side JS action. This means that setting the flair of a specific user requires that the set flair code runs in this specific user's device. To set the flair of the current user, the correct method is

chattable.setFlair("bot")

Once the user's flair is set, all new messages from this user will have an additional class added to the .senderInfo element of their rendered message. As the owner of a chat, you can also right click on a user's message and set their flair through the action menu. To add multiple flairs or classes to a user simply separate each class with a space when setting the flair. For example:

chattable.setFlair("bot moderator")

How to remove them

To remove a flair use

chattable.setFlair("none") // or
chattable.setFlair(null)

How they work

When you set a flair that string is stored on the current device in localStorage and is retrieved when the current user sends a new message. Their message packet will indicate that a flair is present and when this message is rendered it concatenates the className string for the .senderInfo element with the string provided when the flair was set.