5分で設置

チャットルームを1つ作成し、2行の設置コードをページに貼り付けると、その場所にチャットルームが開きます。このページの例では、チャットルームID my-room を使います。

チャットルームを作成する

マイチャットルームでチャットルームを作成を押し、ID・名前・管理者パスワードを決めます。IDは英字・数字・_・- の4〜20文字で、あとから変更できません。IDが設置コードの room の値になります。

作成すると設置コードの画面に移動します。あとから管理ページの設置コードメニューでもう一度確認できます。

設置コード

会員連携を使わないチャットルームの設置コードです。チャットルームを表示したい場所に貼り付けてください。

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

• <script> はページに一度だけ入れます。async で読み込むので、ページの表示を妨げません。
• <u-chat> タグ1つがチャットルーム1つです。IDの異なる <u-chat> を複数置くと、1ページに複数のチャットルームが開きます。同じIDはページに1つしか置けません。
• JavaScriptで <u-chat> をあとから追加・削除しても、それに合わせてチャットルームが開閉します。詳しい動作は非同期読み込みと複数のチャットルームにあります。
• <u-chat> に指定できるほかの属性(会員連携、スキン、入室パスワード、言語など)はu-chat の属性にあります。

サイズ

チャットルームは <u-chat> タグのサイズに従います。style の width と height で指定してください。<u-chat> はデフォルトでインライン要素なので、display:inline-block または display:block も一緒に指定しないとサイズが反映されません。

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

設置コード画面の幅・高さの欄には、1〜4桁の数字に単位 px、%、vh、vw、em、rem のいずれかを付けた値(500px、100%、70vh など)だけを入力できます。コードを直接編集する場合は、CSSの値を自由に使えます。小さすぎると入力欄やユーザー一覧が正しく表示されません。

設置コード画面の 読み込み表示 で、チャットルームが表示されるまでその場所に出す形(チャットルームの骨組み、回る円、ロゴ)を選べます。コードには短い <style> と <u-chat> のクラスとして入り、JavaScript を使わず CSS だけで描きます。チャット画面が描かれるとその上を覆って消えます。画面右のプレビューで選んだ形をすぐに確認できます。

画面右下のボタンで開閉するチャットウィンドウが必要な場合は、フローティングウィジェットを使ってください。

React・Vue・Svelte

設置コード画面のサイトに貼り付けるでHTML、React · Next.js、Vue · Nuxt、Svelte · SvelteKitのタブを選ぶと、その方式に合ったコードが表示されます。どれも uchat.js を一度だけ読み込み、<u-chat> タグを置く方式です。

React · Next.js:

'use client'; // 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' }} />;
}

Vue · Nuxtでは、u-chat をカスタム要素として登録しないと警告が出ます(vite.config の vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === 'u-chat' } } }))。

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>

npm パッケージで設置することもできます。@u-chat/react・@u-chat/vue・@u-chat/svelte の UchatRoom は <u-chat> を描き、uchat.js を一度だけ読み込み、コンポーネントがなくなるとチャットルームも閉じます。サイズは width・height(数字は px)、会員連携は userData、独立サーバーは src で渡します。Vue は isCustomElement の設定なしで使えます。

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

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

画面遷移のときにチャットルームを付け外ししたり、イベントを登録・解除したりする方法は非同期読み込みと複数のチャットルームを参照してください。

チャットルームをページ右下のボタンで表示するにはフローティングウィジェットを使います。設置コード画面の フローティングウィジェット タブ(会員連携のルームは 設置の形 → フローティングウィジェット)でコードを作れます。形(丸いボタン・下部バー・右サイドバー)、ボタンの文字・色・画像、ウィンドウのタイトル、言語、位置・サイズなどのウィジェット設定もその画面で選べます。React・Vue・Svelte は npm パッケージ @u-chat/react・@u-chat/vue・@u-chat/svelte で設置します。

CMSへの設置

管理ページの会員連携をオンにすると、設置コード画面でサイトの種類を選べます。選んだ種類に合わせて、会員情報で入室するコードや設置ファイルが提供されます。

サイトの種類	受け取るもの	設置方法
GnuBoard 4/5	PHPコード	チャットルームを表示するファイルに貼り付けます。ログイン中の会員のニックネーム・ID・レベル・管理者かどうかと会員アイコンが入ります。
GnuBoard 7	uchat-chat-gnuboard7.zip(設置コード画面でこのサイトの種類を選んでコードを作成を押すと表示されるアドレスからダウンロードします。管理ページにログインしたまま開きます)	GnuBoard 7の管理画面 → プラグイン管理 → 手動インストールでアップロードして有効化したあと、プラグイン設定にチャットルームIDとトークンを入力し、表示位置を選びます(GnuBoard 7 7.0.10以上)。
XpressEngine	uchat2.zip(設置コード画面でこのサイトの種類を選んでコードを作成を押すと表示されるアドレスからダウンロードします。管理ページにログインしたまま開きます)	XEのウィジェットフォルダにアップロードしてから、ウィジェットとして追加します。
Rhymix	XpressEngineと同じ uchat2.zip	Rhymixの widgets フォルダにアップロードしてから、管理画面 → 高度な設定 → インストールされたウィジェットでUChat2ウィジェットのコード生成を使ってコードを作り、ページやレイアウトに入れます。ログインした会員はニックネーム・ID・レベル・管理者かどうかで入室します。
WordPress	uchat-wordpress.zip(設置コード画面でこのサイトの種類を選んでコードを作成を押すと表示されるアドレスからダウンロードします。管理ページにログインしたまま開きます)	プラグイン → 新規追加 → アップロードでインストールし、設定 → 유챗にチャットルームIDとトークンを入力してから、チャットルームを表示する投稿・固定ページ・テンプレートに [uchat] を入れます(ブロックテーマは「ショートコード」ブロック、サイズは [uchat height="600px"] のように指定)。ウィジェットエリアのあるテーマは유챗ウィジェットで入れても構いません。署名は訪問者のブラウザーがページを開くたびに新しく取得するため、ページキャッシュプラグインと一緒に使えます。ログインした会員は表示名(ニックネーム)・メールアドレス(ID)・ユーザーレベルで、サイト管理者はチャットルームの管理者として、ログインしていない訪問者はゲストとして入室します。
その他のサイト	PHP・Node.js・Python・Javaのコード	会員情報の変数だけを自分のサイトに合わせて書き換えます。→ 会員連携

GnuBoard7・XpressEngine・Rhymix・WordPress の設置ファイルはいつも同じで、設置の形(ページ内に設置 または フローティングウィジェット)、読み込み表示、ウィジェットの形・ボタン・サイズは各プラグインの設定で選びます(WordPress は 設定 → 유챗、XE・Rhymix はウィジェット設定、GnuBoard7 はプラグイン設定)。変えるときにファイルをダウンロードし直す必要はありません。

設置ファイルやコードには、チャットルームのトークンが含まれるか、トークンを入力するようになっています。トークンはサーバーにだけ置いてください。

チャンネルのチャットルーム

会員登録なしで使えるチャンネルのチャットルームは、https://uchat.ch/room-name のアドレスで開きます。自分のサイトにはiframeで設置します。

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

チャンネルのチャットルームはiframeで設置するため、U.chat() のページスクリプトとスキンUI APIは自分のページで使えません。拡張機能が必要な場合は、マイチャットルームでチャットルームを作成し、<u-chat> で設置してください。

表示されないときの確認

症状	確認すること
何も表示されない	uchat.js の <script> がページにあるか、<u-chat> に display と width・height を指定したかを確認します。
2つ目のチャットルームが開かない	同じ room IDの <u-chat> がすでにページにあります。同じIDは最初のものだけが開きます。
属性を変えたのに変わらない	<u-chat> の属性の変更は検知しません。タグを削除して入れ直してください。→ 非同期読み込みと複数のチャットルーム
「トークンがありません。」のようなエラー	会員連携がオンのチャットルームに、連携コードなしで入室しました。→ 会員連携
入室パスワードを求められる	管理ページで入室パスワードが設定されています。u-chat の属性の password であらかじめ渡せます。

原因がわからない場合は、ページのアドレスに ?uchatdebug=1 を付けて開き、ブラウザのコンソールのログを確認してください。