What is Chattable?
Chattable is a FREE, simple, embeddable, and CSS style-able live chat for your Neocities website. Using fast & secure methods to instantly talk amongst your site's users. Using an iFrame & a Script tag, you'll have a well-implemented, private, and encrypted chat that you can apply your own styles to.
How does Chattable work?
Using Google Firebase for a realtime database instead of a dedicated server with backend scripting, I've created this website that was intended to be ran in an <iframe> on Web Developer's websites. When you create a chat a random chat ID is generated if you don't select a custom chat ID, this chat ID is referenced in the link to your chat e.g chattable.neocities.org/embed?chat=000, the chat ID for this chat would be 000. It is possible to just visit the link to your chat directly, however, due to the nature of Chattable and the idea being that the developer can customize their chat, you won't see any styles or CSS stylesheet other than what I provided as your default, minimally styled chat. To make your chat look fancy, or however you please, you will need to embed it into your website using an iFrame and add a stylesheet to it using a <script> tag, due to the nature of cross-origin scripting Chattable is built to handle all contentWindow.postMessage() requests as CSS rules, and the string is put into a <style> tag.
How do I style my chat?
First and foremost, you can NOT edit the stylesheet of the chat itself from the direct link to your chat. As stated above, Chattable was built with the intention that it is embedded into website in an <iframe>. When you create a chat, you are given a code snippet similar to this...
<iframe src="Your Chat Link" id="chattable"></iframe>
<script>iframe.contentWindow.postMessage(`
/**
YOUR CSS STYLESHEET
**/
`, "*")</script>
In order to style your chat, you must declare your CSS rules for chat at the same place it was implemented. It has to be done like this to avoid cross-origin errors. Below is a list of classes & elements that are used in Chattable for you to style,
| .allMessages | .msgWrapper | .sent |
| .senderInfo | .msgBody | .received |
| #background | #input | #settings |
| .mod | .owner | #timestamp |
It is very important that your <iframe>'s ID attribute is set to 'chattable' otherwise your specified CSS will not be implemented into the chat. For any questions, please feel free to contact me using the link at the bottom of this page. You can try a working example of Chattable here and a cross-domain example here.
Editing your stylesheet
To edit your stylesheet you must be knowledgable in CSS. This is not a pick-a-design chatting interface, but rather a code-it-yourself with a bare bone functional & minimally styled chat by default. Make sure your embedded chat is in an iFrame element with the ID set to "chattable". Once that is done, you will need to use JavaScript to communicate with chattable and set a stylesheet. On the same page that your embedded chat is located add this to your javascript,
document.getElementById("chattable").contentWindow.postMessage(`
[the css magic goes here]
`, "*")
With this, you will be able to set ANY css rule to your chat in the [the css magic goes here] area. Invert the settings icon by using #settings { filter: invert(100%); } or change the text color of sent messages with .sent { color: red; }. Mix & match! The possibilities are endless. Check out some example on my showcase page. Feel free to view the code and see what I did to style each one! Happy coding!
Add'l FAQs
Q:I've promoted/demoted someone in my chat but they haven't lost/gained moderator priviledges when I right click their messsage.
A:As soon as you promote/demote someone it's immediately updated, reload your page. My context menu script does not update with the database, only when a message is recieved and when the page is being loaded.
Q:Someone is being annoying in my chat, how do I remove them or ban them?
A:You can right click their name and prevent them from accessing your chat. It's not 100% fool proof and I won't disclose a way to get around it, but if they continue you may need to create a new chat.
Q:Can I delete a message?
A:Yes, right click the message you want to delete if you're the chat owner or moderator, any user can delete their own messages also by right clicking them.
Q:My chat no longer exists or has been deleted?
A:Chats that contain no messages are automatically deleted, so don't delete every message in your chat. Also, chats that have no activity for several months can be deleted manually by me at my discretion. These can not be undone, but you can reuse your chad ID if it has been previously deleted.
Q:I lost my chat link and/or my chat ID
A:If you're using the same device you used when creating the chat, you can go here to view and moderate the chats you've created. They're stored as cookies so please don't clear your cookies otherwise you'll lose the ability to moderate/delete your chat.
Q:Can I remove or alter the "Chattable" logo/banner at the top of my chat?
A:Absolutely. If the banner does not fit your website's aesthetic or for whatever purpose it may be, you can access & modify this banner using #top_banner in your CSS. To delete the banner entirely, simply declare display: none; on this element.
Have a more specific question?
Ask anything on our sub-reddit, r/ChattableDevs