# u-chat attributes

> Attributes of the u-chat tag that embeds a chat room, and the rules for installing and removing it.

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](/en/doc/1.2#install-code).

```html
<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 {#attributes}

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](/en/doc/3.7) |
| `user_data_url` | URL | URL to load the login data from as a script. See [user_data_url](#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](#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](#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 {#size}

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

```html
<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 {#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](/en/doc/3.7) into `window.Uchat_cache.token['chat room ID']`.
3. When the script finishes, the chat room enters with that value.

```js
// 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 {#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`.

```html
<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 {#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 {#lifecycle}

- 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.

```js
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](/en/doc/2.2).