/>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 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 that is located in the same folder as your HTML file. 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 (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 by passing CSS as a string to the iframe for rendering, like this,

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

*CORS Restrictions will not occur for free accounts on Neocities because CORS restrictions only block cross-domain requests, and Chattable is hosted on the same domain as your site (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

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	#is_typing

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)

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.