How do I style my chat?

First and foremost, it is important that the ID of your iframe hosting your chat is set to chattable in your HTML. This allows you to apply styles to your chat using our JS library that allows you to choose your own CSS file to be applied to your chat. Please review this list to learn which elements you can style within Chattable!

To add our library to your site & start styling your chat, paste this snippet into your <head> element,

<script src="https://chattable.neocities.org/scripts/main.min.js"></script> <script> chattable.initialize({ stylesheet : "chattable.css", }); </script>

For this to work, you must have a CSS file named chattable.css in the same folder as your HTML document. Otherwise, you can change the path/URL to any stylesheet URL you want! You can view a working example of this in action here for your reference.

Using Demo Themes

You can optionally style your chat using a theme from ones of our demos by initializing your chat like this,

chattable.initialize({ theme : "Retrowave Red" });

The above code will make your chat look like the Retrowave Red demo. You can replace the theme with any of the ones available on the demo page. You can also get the CSS for these demos in the playground.

Changing your notification sound for your chat

You can customize your notification sfx from your CSS using a custom CSS variable that Chattable listens for, called --notification-sfx. This is how you implement it,

:root { --notification-sfx: /path/to/audio.mp3; }

Predefined CSS Classes & IDs

When styling your chat, keep in mind the predefined classes & IDs. Below is a table listing each customizable element(s). Hover over each one for a brief description of which element(s) each selector will select.

.allMessages .msgWrapper .sent #top_banner #timestamp
.senderInfo .msgBody .received blockquote #loadMore
#background #input #settings .ctxMenuOption #scrollToBottom
.mod .owner .beta #settingsWindow .pinned
#replyBanner .highlight

* Items that are marked with strikethrough are deprecated and should not be used. They exist only to support styling of old messages and aren't used in current messages.

Message Markdown

All chats now support markdown! What is markdown you might ask? Markdown is a lightweight markup language that you can use to add formatting elements to plaintext. Meaning you can type something like *this* to make your text look like this. Here's some helpful Markdown tips,

Syntax Result
*Hello World* Hello World
**Hello World** Hello World
~~Hello World~~ Hello World
`Hello World` Hello World
>Hello World
Hello World
Link [Here](https://iframe.chat/help/) Link Here
![Alt Text](https://iframe.chat/c.png) Alt Text

Chat Commands

There is a short list of commands that comes pre-built into every chat. These commands are only accessible to people with certain roles, e.g owner or moderator. The commands are as follows,

Syntax Description Roles
!clear Clears the chat Owner & Moderators

Ran into another problem?

Chattable is still in development, but I am always happy to help.

If contacting us about an issue you are having, please let us know of any console errors you get in your browser's built-in dev tools. To open dev tools, try pressing CTRL+SHIFT+I or right click > inspect. Thank you!

You can always find us on Reddit, r/ChattableDevs or email us directly with any questions or concerns you may have at chattable@xobyte.org, whichever you prefer.