5-minute setup

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

In My chat rooms, 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

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

<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 for details.
• Other attributes you can put on <u-chat> (member integration, skin, entry password, language, and more) are listed in u-chat attributes.

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.

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

React, Vue, Svelte

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:

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

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

To show the chat room as a button in the bottom-right corner, use the floating 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

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

The GnuBoard7, XpressEngine, Rhymix and WordPress install files are always the same. Choose the Placement (Inside the page or Floating 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 chat rooms, which work without sign-up, open at https://uchat.ch/room-name. Add one to your site with an iframe.

<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 and install it with <u-chat>.

If it does not show

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
An error such as "The token is missing."	You joined a chat room with member integration turned on without the integration code. → Member integration
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.

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