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://iframe.chat/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.
You can also style your chat inline
Rather than using a separate CSS file on your website (or if you can't get the method above to work) you can style your chat inline with JavaScript. Like this,
document.getElementById("chattable").contentWindow.postMessage("Your CSS here", "*");
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 | |
| .mod | .owner | .beta | #settingsWindow |
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 |
| Link [Here](https://iframe.chat/help/) | Link Here |
|  |  |
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.