Customize your Community Room

Add a live community chat room to any WordPress page or post. Everything is configured with simple data- attributes, with no coding required beyond pasting a snippet.

Quick start

In WordPress, edit the page or post where you want the room to appear.
Add a Custom HTML block (not a Paragraph or Classic block).
Paste the snippet below and replace YOUR_ROOM_KEY with your room key from the dashboard under the Community Rooms tab.
Update or publish the page.

<div id="HumanWidget-community-room"
     data-room-key="YOUR_ROOM_KEY"></div>
<script src="https://dashboard.humanwidget.com/Rooms/community-room-widget.js"></script>

Important: the <script> tag must come after the <div>, and the <div> must keep the id HumanWidget-community-room exactly as shown.

Attribute reference

All attributes go on the <div id="HumanWidget-community-room"> unless noted otherwise.

Attribute	Required	Default	What it does
`data-room-key`	Yes	none	Identifies which room to load. Find it in your dashboard.
`data-accent`	No	Purple (`#bd7bff`)	Sets the widget’s accent color: buttons, your own message bubbles, the pinned-message banner, highlights, input focus color and placeholder text. Hover and shade colors are derived automatically.
`data-hide-header`	No	`false`	Set to `"true"` to hide the top header bar. See the note below.
`data-hide-border`	No	`false`	Set to `"true"` to remove the thin outer border, so the room blends into your page.
`data-width`	No	`100%`	Width of the widget. Any CSS length (`100%`, `480px`, `40rem`).
`data-height`	No	`590px`	Height of the widget. Any CSS length (`590px`, `70vh`).
`data-radius`	No	`20px`	Corner rounding. Use `0` for square corners.
`data-scroll-start`	No	`bottom`	Where the chat opens: `bottom` (latest messages) or `top` (beginning of the history).
`data-start-text`	No	Built-in “Beginning of the conversation” label (translated)	Replaces the label at the very top of the conversation. Use `data-start-text=""` to hide it completely.
data-signin-placeholder	No	Built-in view mode “Sign in to join the conversation” text (translated)	Replaces the text in the message box in view mode.
data-message-placeholder	No	Built-in “Type your message” text (translated)	Replaces the text in the message box in after signing in.
data-pending-text	No	Built-in “Pending Approval” text (translated)	Replaces the text that appears after a message has been sent and approval from mods is required.
data-hide-presence-notices	No	false	Set to “true“, Hides all presence notifications. E.g: “NAME has joined the chat” will be hidden.
data-bg	No	White	Set to transparent to make the background transparent or change the background color using #

Notes on specific attributes

data-accent

Accepts 3- or 6-digit hex colors, with or without the # (#e05a7a, e05a7a, #f60).
Invalid values are ignored and the default purple is used.
Text on accent-colored surfaces (buttons, your own bubbles, the send icon) automatically switches between white and dark so it stays readable. Very light accents such as yellow get dark text.

data-hide-header

The header contains the room name, online count, the Rules button, the sound toggle and your name badge. Hiding it hides all of these, so visitors won’t be able to reopen the rules or toggle notification sounds from inside the chat.

data-start-text

Plain text only (any HTML is escaped).
The text you enter is used in all languages. For a multilingual site, set it per page.
If the attribute is not present, the standard translated label is shown.

Examples

Branded and borderless

<div id="HumanWidget-community-room"
     data-room-key="YOUR_ROOM_KEY"
     data-accent="#e05a7a"
     data-hide-header="true"
     data-hide-border="true"></div>
<script src="https://dashboard.humanwidget.com/Rooms/community-room-widget.js"></script>

Compact room that opens at the start of the history

<div id="HumanWidget-community-room"
     data-room-key="YOUR_ROOM_KEY"
     data-width="420px"
     data-height="480px"
     data-radius="12px"
     data-scroll-start="top"></div>
<script src="https://dashboard.humanwidget.com/Rooms/community-room-widget.js"></script>

Custom welcome label

<div id="HumanWidget-community-room"
     data-room-key="YOUR_ROOM_KEY"
     data-start-text="Welcome to the lounge!"></div>
<script src="https://dashboard.humanwidget.com/Rooms/community-room-widget.js"></script>

No label at all

<div id="HumanWidget-community-room"
     data-room-key="YOUR_ROOM_KEY"
     data-start-text=""></div>
<script src="https://dashboard.humanwidget.com/Rooms/community-room-widget.js"></script>

Full-width, tall, square corners

<div id="HumanWidget-community-room"
     data-room-key="YOUR_ROOM_KEY"
     data-width="100%"
     data-height="80vh"
     data-radius="0"
     data-hide-border="true"></div>
<script src="https://dashboard.humanwidget.com/Rooms/community-room-widget.js"></script>

Built-in behavior (no setup needed)

Rules and code of conduct: if your room has rules, new visitors must open and read them, then tick the agreement checkbox before joining.
Returning visitors: once someone has joined on a device, their name is remembered. On later visits they only need to tick the checkbox again and don’t have to reopen the rules. On a new device or browser, or after choosing Not you?, they go through the full step again.
Pinned message: a moderator’s pinned message shows as a banner at the top of the chat. Tap it to expand or collapse it.
Moderation: moderators can hide or approve messages and ban participants directly from the chat.
Preview mode: if enabled for the room, visitors can read the conversation before joining.
Languages: the widget follows the language of your site where translations are available.

WordPress tips and troubleshooting

The widget doesn’t appear

Make sure you used a Custom HTML block. Paragraph and Classic blocks may strip or rewrite the code.
Check that data-room-key is correct and that the script tag comes after the div.

Only one room per page

The container id is fixed, so a page can show one community room at a time.

It works when logged in but not for visitors

Clear your caching plugin’s cache and your CDN’s cache after adding or changing the snippet.

Optimization plugins

Plugins that combine, minify, delay or defer JavaScript (for example WP Rocket, Autoptimize, LiteSpeed Cache, or Cloudflare Rocket Loader) can interfere with the widget script. If the room fails to load, exclude community-room-widget.js from those optimizations.

Page builders (Elementor, Divi, Bricks and others)

Use the builder’s HTML or Custom Code element and paste the same snippet.

Styling clashes with your theme

The widget applies its own styles to its inputs, buttons and links, so most themes won’t change its look. If something still looks off, contact support with a link to the page.

Changes didn’t take effect

Hard refresh your browser (Ctrl/Cmd + Shift + R), and clear the site cache.