/>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 lets you apply custom styles to your chat using the Chattable API, which allows you to choose your own CSS file. You can optionally use the postMessage method to style your chat to avoid using the Chattable API if desired. Check out the list of elements you can style within Chattable below.

To add the Chattable API 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> <script> chattable.initialize({ stylesheet : "/chattable.css", }); </script>

For this snippet above to work, you must have a CSS file named chattable.css in the root folder of your website. Otherwise, you can change the path/URL to any stylesheet URL you want! You can view a working example of this in action here, and view the code for your reference.

Using Themes

You can optionally style your chat using a preset theme from ones of our demos by initializing your chat like this,

chattable.initialize({ theme : "Retrowave Red" });

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

CSS CORS Issues? (postMessage Method)

In some instances, 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 inline using JavaScript. Like this,

<script> let chattable = document.getElementById("chattable"); chattable.contentWindow.postMessage(` body { /* Your CSS can go here... */ } `, "*"); </script>

This method does not require the Chattable API. All the methods above are perfectly valid and fully supported for styling your chat.

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

When styling your chat, keep in mind the predefined classes & IDs. Below is a table listing each customizable element(s). Hover over each one for a brief description of which element(s) each selector will select.

.allMessages .msgWrapper .sent #top_banner #timestamp
.senderInfo .msgBody .received blockquote #loadMore
#background #input #settings .ctxMenuOption #scrollToBottom
.mod .owner .beta #settingsWindow .pinned
#replyBanner .highlight .emoji #emojiTray

Customizing the Settings Page/Menu

The CSS you send to your chat is inherited by the settings page/menu. Just add some rules in your CSS to target elements on the settings page. Here are some elements that can be found only within the settings page,

#settingsMenu #save #name #account

* Items that are marked with strikethrough are deprecated and should not be used. They exist only to support styling of old messages and aren't used in current messages.

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

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.

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.