u-chat attributes

One <u-chat> tag is one chat room. This page lists the attributes you can use on the tag and how it behaves when you add, remove, or change it. For the install code itself, see 5-minute setup.

<script async src="https://client.uchat.io/uchat.js"></script>
<u-chat room="my-room" lang="ko" style="display:inline-block; width:100%; max-width:400px; height:600px;"></u-chat>

Attribute list

Every attribute except style and wrap is passed on as a chat room install option. All values are strings.

Attribute	Format	Description
room	Chat room ID	Required. The tag is ignored without it
user_data	Signed string	Member integration login data. Generate it on your server. Format: Member integration signature spec
user_data_url	URL	URL to load the login data from as a script. See user_data_url below
skin	Skin name	Skin to use. If omitted, the skin chosen in the admin page is used
skin_arguments	JSON string	Overrides skin settings on this page only. See skin_arguments below
password	String	Entry password (or admin password). Enters a password-protected chat room without asking
lang	Language code	Chat room UI language. See lang below
invite	Nickname	Invites this nickname to your private channel right after entering. Does not work together with user_data_url

• Attribute names are case-insensitive, following HTML rules.
• If you give both user_data and user_data_url, user_data is used.
• In a chat room with member integration turned on, entering without user_data or user_data_url is rejected with error 203.
• The password value is visible as-is in the page source. On a page anyone can view, setting a password is pointless.

Size

Set the size with style. The chat room iframe fills the tag at 100% width and height.

<u-chat room="my-room" style="display:inline-block; width:100%; height:70vh;"></u-chat>

<u-chat> is an inline element by default, so give it display:inline-block (or block) together with a height. If the height is 0, the chat room is not visible. The install code in the admin page produces values made of a 1 to 4 digit number followed by px, %, vh, vw, em, or rem.

user_data_url

Use this when you cannot write user_data directly into the page (static pages, cached pages).

1. The chat room loads {user_data_url}?room={chat room ID} as a <script>.
2. That script must put the signed string into window.Uchat_cache.token['chat room ID'].
3. When the script finishes, the chat room enters with that value.

// Response from https://example.com/uchat-token.js?room=my-room (the server builds it for the logged-in member)
window.Uchat_cache.token['my-room'] = 'id user1|level 5|nick %ED%99%8D%EA%B8%B8%EB%8F%99|room my-room|time 1700000000|hash ...';

This response runs as a script. Serve it from the same origin as your site, and add Cache-Control: no-store because the value differs for each member.

skin_arguments

Overrides the skin settings from the admin page with values used only on this page. The merged values can be read from page scripts as room.skin.arguments.

<u-chat room="my-room" skin_arguments='{"lang":"en"}' style="display:inline-block; width:100%; max-width:400px; height:600px;"></u-chat>

Invalid JSON is treated as {} without an error, so nothing changes. If your values are not applied, check the JSON syntax (double quotes, commas) first. Wrapping the attribute value in single quotes lets you use double quotes inside the JSON as-is.

lang

The chat room UI language is the first match in the order below. Languages with a language pack are ko, en, and ja.

1. The lang attribute
2. lang from the admin page (or skin_arguments)
3. <html lang> of the page the chat room is embedded in
4. The browser language
5. English

For values with a region, such as ko-KR or ja_JP, only the first part is used.

Installing, removing, and changing attributes

• When uchat.js first loads, it installs every <u-chat> on the page. After that, it installs a tag when it is added to the document and destroys it when it is removed (MutationObserver).
• Changing attributes does not reinstall the chat room. To change room, user_data, and so on, remove the tag and insert a new one.

function replaceRoom(container, attrs) {
	container.querySelector('u-chat')?.remove();
	const tag = document.createElement('u-chat');
	for (const [name, value] of Object.entries(attrs)) tag.setAttribute(name, value);
	tag.style.cssText = 'display:inline-block; width:100%; max-width:400px; height:600px;';
	container.appendChild(tag);
}

• Only one tag per room value is installed on a page. A second tag is ignored.
• Removing a tag also removes events registered only for that chat room (U.chat('my-room').on, room.on). Events registered with U.chat('*') remain.

For handling tags with async loading and in SPAs, see Async loading and multiple chat rooms.