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 tool which is intended to be ran in an <iframe> on your Neocities site(s). When you create a chat, a random chat ID is generated. 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 is embedding their chat into their website, you won't see any of your declared styles applied while visiting the direct link. 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, and security protocols preventing Chattable from just inheriting the parent document's CSS stylesheet, 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?

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 account that created the chat, you can visit here to view and optionally delete the chats you've created.

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.

Still have a question?

Search our FAQ or ask anything on our sub-reddit, r/ChattableDevs