/>help>

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.

Styling Tips

The recommended height & width for an embedded chat is 250px or greater.
The #background, #top_banner & input area's dimensions should not be adjusted in order to protect each visitor's experience.
Use display: none; to hide the #top_banner or other elements you want removed.
To change the height & width of the chat on your website, adjust the iframe's height & width values.

Custom Fonts

If you are using a free Neocities account to host your website, you will encounter issues using custom fonts. This is because of the CORS policy set for free Neocities websites blocking Chattable from accessing your font file. To get work around this you can,

Use a file hosting service like catbox.moe, which will give you a URL to any resources you upload.
Convert the file to a data uri, you can use admin booster's tool to convert any file to a data uri. Data URI's prevent having to host the file/resource anywhere at all and instead contain the entire file's data inside the URI itself. Consequentially, this means the URL will be very long and will slightly increase load times!

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>

*Free websites hosted on Neocities currently do not encounter CORS or CSP issues when using Chattable as intended.

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)

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	Unlocks 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.