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.

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.