/>help>

Search

How do I style my chat?

Make sure the ID of your iframe element that is hosting the chat is set to chattable in your HTML. This allows the Chattable JS Library to locate the chat for styling. You can optionally use the postMessage method to style your chat to avoid using the Chattable JS Library if desired. Once you're all set up, be sure to check out the list of elements you can style within Chattable.

To add the Chattable Library to your site & and to use it, paste this snippet into your <head> element,

<script src="https://chattable.neocities.org/scripts/main.min.js"></script>

Then, initialize your chat. This is required in order for your chat to load.

<script> chattable.initialize({ stylesheet : "chattable.css", }); </script>

If you want to copy and paste the snippet above directly, make sure you have a CSS file named chattable.css that is located in the same folder as the HTML file that your chat is on.

When you initialize your chat, you're sending the CSS to the iframe. This let's us know how to style your chat before it's rendered. Not initializing the chat will result in the chat not loading. If you aren't great with CSS, we have a few pre-built themes which you can use to style your chat instead of a custom stylesheet. You can also send the chat a blank CSS file or string if you wish to stick with an unstyled chat (booooring).

Using our prebuilt themes

To style your chat with our preset themes you will need to initialize your chat differently than we did above. You will need the Chattable JS Library for this. First pick a theme you like from one of our demos. Then, initialize your chat like this,

<script src="https://chattable.neocities.org/scripts/main.min.js"></script> <script> chattable.initialize({ theme : "Retrowave Red" // use the name of your preferred demo }); </script>

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 edit the CSS for these demos in the playground.

CORS Errors? (postMessage Method)

In some instances (like when editing your site locally on your computer) you may find yourself unable to import a custom CSS file using the first method above due to CORS (Cross-Origin Resource Sharing) restrictions*. You can still style your chat using JavaScript, like this,

<script> window.addEventListener("load", function(){ // wait for the window to load before trying to access DOM document.getElementById("chattable").contentWindow.postMessage(` body { /* Your CSS can go here... */ } `, "*"); }); </script>

*Chattable currently does not induce CORS Errors on free websites hosted on Neocities.

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

Chattable was built with customization in mind, featuring a well-structured chat layout and intuitive, easy-to-remember classes and IDs for seamless styling. Explore our full list of predefined classes and IDs to simplify your design process.

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
!connect Disconnects & reconnects to another chat All Users
!lock Locks the chat to only allow messages from Moderators & Owner. Owner
!unlock Unocks the chat to allow messages from anyone. Owner
!reset Reset's the chat permissions. All kicked users, banned users, and moderators are reset. Owner

Custom Emojis

If you own a chat, you have the ability to set custom emojis for you & your visitors to use inside your chat. To set them, access your dashboard, choose which chat you want to add emojis to by clicking the pencil icon & selecting "View", now at the bottom of the page you can add emojis to your chat!

Frequently Asked Questions (FAQs)

Q:Can I delete/edit my message?

A:Yes, right click your message for these options, if you are a chat owner or moderator you can also right click other messages for more options.

Q:My chat no longer exists or has been deleted?

A:Chats that contain no messages with no activity detected within a set amount of time are automatically deleted. This can not be undone, but you can reuse a chat 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 the dashboard to view and moderate 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.

Q:Why is my chat infinitely loading?

A:The chat is scripted to require a stylesheet to finish loading. The recommended solution is to initialize your chat by following the "How do I style my chat?" directions here. Otherwise, you can bypass this by sending an empty CSS string via the postMessage method. That is, if you want your chat to load without a stylesheet.

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, screenshots of any console errors in your browser's built-in dev tools can save us loads of work. 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.