# 5-minute setup

> Create a chat room and paste the install code to show it on your site. Also covers frameworks, CMSs, channel chat rooms, and what to check when the room does not show.

Create a chat room, paste two lines of install code into your page, and the chat room opens in that spot. The examples on this page use the chat room ID `my-room`.

## Create a chat room {#create-room}

In [My chat rooms](/manage), click **Create chat room** and set an ID, a name, and an admin password. The ID is 4–20 characters of letters, digits, `_`, and `-`, and you cannot change it later. The ID becomes the `room` value in the install code.

After you create the room, you go to the install code screen. You can see it again later from the **Install code** menu on the admin page.

## Install code {#install-code}

This is the install code for a chat room without member integration. Paste it where you want the chat room to appear.

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

- Add the `<script>` to the page only once. It loads with `async`, so it does not block page rendering.
- One `<u-chat>` tag is one chat room. Add several `<u-chat>` tags with different IDs to open several chat rooms on one page. Each ID can appear only once per page.
- If you add or remove a `<u-chat>` later with JavaScript, the chat room opens and closes with it. See [Async loading and multiple chat rooms](/en/doc/2.2) for details.
- Other attributes you can put on `<u-chat>` (member integration, skin, entry password, language, and more) are listed in [u-chat attributes](/en/doc/3.1).

## Size {#size}

The chat room follows the size of the `<u-chat>` tag. Set it with `width` and `height` in `style`. `<u-chat>` is an inline element by default, so you must also set `display:inline-block` or `display:block` for the size to apply.

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

The width and height fields on the install code screen accept only a number of 1–4 digits followed by one of the units `px`, `%`, `vh`, `vw`, `em`, or `rem` (`500px`, `100%`, `70vh`, and so on). When you edit the code yourself, you can use any CSS value. If the room is too small, the input box and user list will not display properly.

Under **Loading** on the install code screen, you can choose what shows in that spot until the chat room appears (chat room skeleton, spinner or logo). It goes into the code as a short `<style>` and a class on `<u-chat>`, using CSS only with no JavaScript, and the chat window covers it once drawn. The preview on the right of the screen shows your choice right away.

For a chat window that opens and closes from a button at the bottom right of the screen, use the [floating widget](/en/doc/2.2#widget).

## React, Vue, Svelte {#frameworks}

Under **Add to your site** on the install code screen, pick the HTML, React · Next.js, Vue · Nuxt, or Svelte · SvelteKit tab to get code for that setup. All of them load `uchat.js` once and place a `<u-chat>` tag.

React · Next.js:

```jsx
'use client'; // Only needed with the Next.js App Router

import { useEffect } from 'react';

export default function ChatRoom() {
	useEffect(() => {
		if (!document.querySelector('script[data-uchat]')) {
			const s = document.createElement('script');
			s.src = 'https://client.uchat.io/uchat.js';
			s.async = true;
			s.dataset.uchat = '';
			document.head.appendChild(s);
		}
	}, []);
	return <u-chat room="my-room" style={{ display: 'inline-block', width: '100%', maxWidth: '500px', height: '500px' }} />;
}
```

In Vue · Nuxt, register `u-chat` as a custom element to avoid warnings (`vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'u-chat' } } })` in `vite.config`).

Svelte · SvelteKit:

```svelte
<svelte:head>
	<script async src="https://client.uchat.io/uchat.js"></script>
</svelte:head>

<u-chat room="my-room" style="display:inline-block; width:100%; max-width:500px; height:500px;"></u-chat>
```

You can also use the npm packages. `UchatRoom` from `@u-chat/react`, `@u-chat/vue` and `@u-chat/svelte` renders the `<u-chat>`, loads `uchat.js` once and closes the chat room when the component goes away. Pass the size with `width` and `height` (numbers are px), member integration with `userData` and an independent server with `src`. Vue needs no `isCustomElement` setting.

```jsx
// npm install @u-chat/react
import { UchatRoom } from '@u-chat/react';

export default function Chat() {
	return <UchatRoom room="my-room" width="100%" height={500} />;
}
```

To attach and detach the chat room on route changes, or to add and clean up events, see [Async loading and multiple chat rooms](/en/doc/2.2).

To show the chat room as a button in the bottom-right corner, use the [floating widget](/en/doc/2.2#widget). The **Floating widget** tab of the install code screen (for member-integrated rooms, **Placement → Floating widget**) generates the code. You can also pick the widget settings there: style (round button, bottom bar or right sidebar), button text, color and image, panel title, language, position and size. React, Vue and Svelte use the npm packages `@u-chat/react`, `@u-chat/vue` and `@u-chat/svelte`.

## Install on a CMS {#cms}

When you turn on **Member integration** on the admin page, you can choose a **Site type** on the install code screen. You get code or an install file for that type that signs people into the chat room with their member information.

| Site type | What you get | How to install |
| --- | --- | --- |
| GnuBoard 4/5 | PHP code | Paste it into the file where the chat room should appear. It passes the logged-in member's nickname, ID, level, admin status, and member icon. |
| GnuBoard 7 | `uchat-chat-gnuboard7.zip` (download it from the address shown when you press **Create code** with this site type on the install code screen; open it while logged in to the admin page) | In the GnuBoard 7 admin, upload it under Plugin management → Manual install and activate it. Then enter the chat room ID and token in the plugin settings and choose where it appears (GnuBoard 7 7.0.10 or later). |
| XpressEngine | `uchat2.zip` (download it from the address shown when you press **Create code** with this site type on the install code screen; open it while logged in to the admin page) | Upload it to the XE widget folder, then add it as a widget. |
| Rhymix | The same `uchat2.zip` as XpressEngine | Upload it to the Rhymix `widgets` folder, then create the code with **Generate code** for the UChat2 widget under Admin → Advanced → Installed widgets and put it on a page or layout. Logged-in members join with their nickname, ID, level and admin status. |
| WordPress | `uchat-wordpress.zip` (download it from the address shown when you press **Create code** with this site type on the install code screen; open it while logged in to the admin page) | Install it from Plugins → Add New → Upload, enter the chat room ID and token under **Settings → 유챗**, then put `[uchat]` in the post, page or template where the room should appear (in a block theme, use the "Shortcode" block; set the size like `[uchat height="600px"]`). Themes with widget areas can use the 유챗 widget instead. The visitor's browser fetches a fresh signature every time the page opens, so it works with page cache plugins. Logged-in members join with their display name (nickname), email (ID) and user level, site administrators join as chat room admins, and visitors who are not logged in join as guests. |
| Other sites | PHP, Node.js, Python, or Java code | Change only the member information variables to match your site. → [Member integration](/en/doc/2.1) |

The GnuBoard7, XpressEngine, Rhymix and WordPress install files are always the same. Choose the **Placement** (Inside the page or [Floating widget](/en/doc/2.2#widget)), **Loading** and the widget style, button and size in each plugin's settings (WordPress: Settings → 유챗, XE and Rhymix: widget settings, GnuBoard7: plugin settings). You don't need to download the file again to change them.

The install files and code either contain the chat room token or ask you to enter it. Keep the token on your server only.

## Channel chat rooms {#channel-rooms}

Channel chat rooms, which work without sign-up, open at `https://uchat.ch/room-name`. Add one to your site with an iframe.

```html
<iframe src="https://uchat.ch/room-name" style="display:inline-block; width:100%; max-width:500px; height:500px;" frameborder=0></iframe>
```

Because a channel chat room is embedded with an iframe, you cannot use `U.chat()` page scripts or the skin UI API on your page. If you need extensions, create a chat room in [My chat rooms](/manage) and install it with `<u-chat>`.

## If it does not show {#not-showing}

| Symptom | What to check |
| --- | --- |
| Nothing shows | Check that the `uchat.js` `<script>` is on the page and that the `<u-chat>` has `display` and `width`/`height`. |
| The second chat room does not open | A `<u-chat>` with the same `room` ID is already on the page. Only the first one with a given ID opens. |
| You changed an attribute but nothing changed | Attribute changes on `<u-chat>` are not detected. Remove the tag and add it again. → [Async loading and multiple chat rooms](/en/doc/2.2) |
| An error such as "The token is missing." | You joined a chat room with member integration turned on without the integration code. → [Member integration](/en/doc/2.1#troubleshooting) |
| You are asked for an entry password | An entry password is set on the admin page. You can pass it in advance with `password` in [u-chat attributes](/en/doc/3.1). |

If you cannot find the cause, open the page with `?uchatdebug=1` added to the URL and check the log in the browser console.