Chattable Documentation

How do I style my chat?

Ensure your iframe element hosting the chat has the ID chattable in your HTML. This allows the Chattable JS Library to locate and style the chat. Alternatively, use the postMessage method to style without the library.

Add the Chattable Library to your site by including this in your <head> element:

<script src="https://iframe.chat/scripts/main.min.js"></script>

Initialize your chat (required for loading):

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

Ensure chattable.css is in the same folder as your HTML file. The CSS is sent to the iframe to style the chat before rendering. Without initialization, the chat won't load. Use our pre-built themes or a blank CSS file for an unstyled chat.

Using Prebuilt Themes

Choose a theme from our demos and initialize like this:

<script src="https://iframe.chat/scripts/main.min.js"></script>
<script>
  chattable.initialize({
    theme: "Retrowave Red"
  });
</script>

Replace Retrowave Red with your preferred demo theme. Edit theme CSS in the playground.

Styling Tips

Recommended iframe height & width: 250px or greater.
Do not adjust #background, #top_banner, or input area dimensions to maintain user experience.
JavaScript resizes #background and #input based on banner visibility. Disable with:

:root {
                  --advanced-layout: true;
                }

Use display: none; to hide #top_banner or other elements.
Use background property for #top_banner (default is a gradient).
Adjust chat size via iframe's height & width values.

Custom User Flairs

Introduced in March 2025, custom user flairs enhance chat personalization. Learn more here.

Custom Fonts

For web hosts with CORS restrictions, use:

A file hosting service like catbox.moe for resource URLs.
Data URIs (convert files using admin booster's tool). Note: Data URIs increase load times due to their size.

CORS Errors? (postMessage Method)

For CORS issues (e.g., local editing), style your chat using JavaScript:

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

Most sites don't face CORS/CSP issues when using Chattable as intended.

Changing Your Notification Sound

Customize notification sound via CSS variable --notification-sfx:

:root {
                  --notification-sfx: /path/to/audio.mp3;
                }

Predefined CSS Classes & IDs

Chattable's structured layout uses intuitive classes and IDs for easy styling. See the full list here.

Message Markdown

Chats support markdown for text formatting. Examples:

Syntax	Result
`Hello World`	Hello World
`Hello World`	Hello World
`~~Hello World~~`	~~Hello World~~
`Hello World`	`Hello World`
`>Hello World`	Hello World
`[Link](https://iframe.chat/help/)`	Link
`![Alt Text](https://iframe.chat/c.png)`	(Image)

Chat Commands

Custom Commands

Introduced in March 2025. Learn more here.

Default Commands

Syntax	Description	Roles
`!connect`	Disconnects & reconnects to another chat.	All Users
`!online`	Shows current online users.	All Users
`!tutorial`	Runs tutorial for name changes, settings, etc.	All Users
`!help`	Runs tutorial command.	All Users
`!clear`	Clears the chat.	Owner & Moderators
`!lock`	Locks chat to Moderators & Owner.	Owner
`!unlock`	Unlocks chat for all.	Owner
`!reset`	Resets permissions, kicked/banned users, moderators.	Owner

Custom Emojis

Chat owners can set custom emojis via the dashboard. Add a URL and alias (e.g., :happy:) for each emoji.

Chattable API / Library

The API enables styling, custom commands, flairs, message handling, and more. Learn more here.

Frequently Asked Questions

Can I delete/edit my message?

Right-click your message for options. Owners/moderators can manage others' messages.

I lost my chat link and/or chat ID

Visit the dashboard with the account that created the chat to view and moderate.

Can I remove/alter the "Chattable" logo/banner?

Modify #top_banner in CSS or hide with display: none;.

Why is my chat infinitely loading?

Initialize the chat with a stylesheet or send an empty CSS string via postMessage.

Can I edit the HTML?

Not directly, but use the alternate layout: https://iframe.chat/embed/alternate?chat=YOUR_CHAT_ID.

How can I get visitors to set their names?

Add instructions near the chat, use !help, modify #settings icon, or use the alternate layout.

Can I have multiple chats on one page?

Embed chats in separate HTML files using iframes to avoid ID conflicts.

Support

Chattable is in perpetual development. For issues, include screenshots of console errors (open dev tools with CTRL+SHIFT+I or right-click > inspect). Contact us on Reddit at r/ChattableDevs or email chattable@xobyte.org.

Topics

Chattable Help