How to Embed Chateasily on Your Website

Add a fully functional live chat room to any website in under 2 minutes. No coding experience required. This guide walks you through every step — from creating your room to pasting the embed code.

What You’ll Get

When you embed Chateasily, your website visitors get a real-time chat experience — group messages, voice notes, emoji reactions, and guest access — all running inside a small widget on your page. You choose how it looks and where it appears.

Before You Start

You’ll need two things:

1. A Chateasily account — Sign up for free (takes 10 seconds)
2. A chat room — Create one from the chat interface, or use an existing room

Step 1: Create a Chat Room

Step 2: Enable Embedding

Step 3: Add the Code to Your Website

Bubble Mode (Floating Chat Button)

Paste this single script tag anywhere in your website’s HTML — ideally just before the closing </body> tag:

HTML
<script
  src="https://chat.chateasily.com/embed-loader.js"
  data-room-id="YOUR_ROOM_ID"
  data-theme="dark"
  data-position="bottom-right"
></script>

This adds a chat bubble to the bottom-right corner of your page. When visitors click it, the chat window expands.

Inline Mode (Embedded Panel)

To embed the chat directly in your page content, add a container div and the script tag together:

HTML
<div id="chateasily-container"
     style="width:100%; height:500px;"></div>

<script
  src="https://chat.chateasily.com/embed-loader.js?room=YOUR_ROOM_ID&theme=dark"
  data-room-id="YOUR_ROOM_ID"
  data-mode="inline"
  data-theme="dark"
></script>

The chat will render at full width inside the container. Adjust the height value to fit your layout.

Configuration Options

All configuration is done through data-* attributes on the script tag. Here’s every option available:

Platform-Specific Instructions

WordPress

Two easy methods:

1. Custom HTML Widget: Go to Appearance > Widgets, add a Custom HTML widget to your footer area, and paste the embed code.
2. Theme Footer: Go to Appearance > Theme File Editor, open footer.php, and paste the script tag just before </body>.

Shopify

1. Go to Online Store > Themes > Edit Code
2. Open theme.liquid
3. Paste the embed code just before </body>
4. Click Save

Squarespace

1. Go to Settings > Advanced > Code Injection
2. Paste the embed code in the Footer section
3. Click Save

Wix

1. Go to Settings > Custom Code
2. Click Add Custom Code
3. Paste the embed code, set placement to Body – End
4. Apply to All Pages (or choose specific pages)

Plain HTML

Simply paste the script tag in your HTML file, just before </body>:

HTML
<!-- Your page content above -->

<script
  src="https://chat.chateasily.com/embed-loader.js"
  data-room-id="YOUR_ROOM_ID"
  data-theme="dark"
></script>
</body>
</html>

Advanced: Using JavaScript Configuration

For more control, you can configure the widget using a JavaScript object before the embed script loads. This takes priority over data-* attributes:

JavaScript
<script>
  window.__chateasilyConfig = {
    roomId:   'YOUR_ROOM_ID',
    theme:    'dark',
    position: 'bottom-right',
    open:     false
  };
</script>
<script src="https://chat.chateasily.com/embed-loader.js"></script>

Customizing the Height (Inline Mode)

For inline embeds, the height of the chat panel is controlled by the container element. Set it to whatever fits your design:

HTML
<!-- Short panel (good for sidebars) -->
<div id="chateasily-container" style="height: 400px;"></div>

<!-- Full-height panel (good for dedicated chat pages) -->
<div id="chateasily-container" style="height: calc(100vh - 80px);"></div>

The width is always 100% of the container. To control the width, wrap it in a parent element with a fixed or max-width.

What Your Visitors See

When someone visits your page with the embed widget:

1. They see the chat widget — a floating bubble (bubble mode) or embedded panel (inline mode)
2. They choose how to join — three options: enter as a Guest (just a username), Log in to an existing account, or Register a new account
3. They start chatting — full access to messages, voice notes, emoji reactions, and private messaging with other users in the room

Room Moderation for Embedded Rooms

As the room owner, you have full moderation control — even when the room is embedded on another website:

• /ban username — Ban a user by IP (persists even after they leave)
• /mute username — Prevent a user from sending messages
• /kick username — Remove a user from the room immediately
• /voice username — Grant voice to a user in a muted room
• /topic New topic here — Change the room’s topic
• /banlist — View all currently banned users

You can also assign moderator and admin roles to trusted users so they can help manage the room when you’re not around.

Troubleshooting

The widget doesn’t appear

• Make sure Embeddable is toggled ON in Room Settings > Embed
• Check that the data-room-id matches your actual room ID
• Open your browser’s developer console (F12) and look for errors
• If using Allowed Domains, make sure your website’s domain is in the list

The data-* attributes are being stripped

Some page builders (especially WordPress Elementor and Divi) strip data-* attributes from script tags. Use the URL parameter method instead:

HTML
<!-- URL params survive attribute stripping -->
<script
  src="https://chat.chateasily.com/embed-loader.js?room=YOUR_ROOM_ID&theme=dark&position=bottom-right"
></script>

No sound notifications in the embed

Browsers require user interaction before playing audio in iframes. The embed uses allow="autoplay", but some browsers may still block audio until the user interacts with the chat widget. This is expected browser behavior.

Chat appears but users can’t join

• Verify the room is set to Public (or provide the password for private rooms)
• Check that guests are allowed in Room Settings
• Make sure your backend at chat.chateasily.com is running and accessible