DevRevのPLuGチャットの見た目と機能をカスタマイズしてみた

DevRevのPLuGチャット設定画面にある4つのタブ（設定・スタイル設定・タブ・レイアウト）を網羅的に確認し、テーマ変更・アクセントカラー変更・タブ追加・ウェルカムメッセージ日本語化などのカスタマイズを試してみました。
2026.07.07
こんにちは、昴です。

以前の記事（DevRevのPLuGウィジェットをWebサイトに埋め込んでみた）では、PLuGウィジェットをHTMLファイルに埋め込んでVercel上で表示させるところまで試しました。 今回は、DevRevコンソールのPLuGチャット設定画面にある各種カスタマイズ項目を網羅的に確認していきます。テーマの変更やタブの追加、ウェルカムメッセージの日本語化など、コードを一切触らずにコンソールだけで設定できます。
 はじめにPLuGは、WebサイトやWebアプリに埋め込んで使うDevRevのカスタマーサポート用チャットウィジェットです。画面の隅にチャットボタンを表示させることで、ユーザーがページを離れることなくその場からサポートチームへ問い合わせを送れるようになります。「自社のサービスやサイトにチャットサポートの入口を設けたい」「ユーザーが困ったときにすぐ相談できる仕組みを作りたい」という場面で活躍します。ZendeskのWebウィジェットやIntercomのチャットバブルと同じジャンルのものです。
PLuGチャットの設定画面には、大きく4つのタブがあります。
設定：アプリIDや言語設定など基本情報
スタイル設定：テーマとアクセントカラー
タブ：ウィジェット内に表示するタブ（Home / Conversations / Tickets / Help）
レイアウト：タイトルやウェルカムメッセージなどウィジェット内のレイアウト
画面右側には常にリアルタイムプレビューが表示されるため、変更のたびにデプロイし直す必要はありません。今回は設定内容を確認しながらそのままコンソールで調整していきます。
 前提・検証環境本記事の手順を進めるにあたり、以下の環境および権限が必要です。
DevRevアカウントが開設済みであること
Adminまたはそれに準じる権限を持つユーザーでログインしていること
 実践DevRevコンソールから 設定 > PLuG & ポータル > PLuGチャット へ移動します。
 設定まず「設定」タブを確認します。
「ユニークなアプリID」は、ウィジェットをWebサイトに埋め込む際に使用するIDです（前回の記事で使用したものです）。その他にも以下のような設定項目があります。
PLuGの表示：特定のページでPLuGウィジェットを非表示にするURLルールを設定できます。
新規の会話の開始：ウィジェットからカスタマーが会話を開始できるかどうか、およびボタンのテキストを変更できます。
一度に1メッセージ：AIの応答が完了するまでユーザーの送信を無効にするオプションです。
また、今回は最後の保存・公開時に確認していますが、設定タブの中から「プレイグラウンド」へ移動して確認することができます。
 スタイル設定「スタイル設定」タブではウィジェットの見た目を変更できます。
設定できる主な項目は以下のとおりです。
ランチャーのロゴ：画面右下に表示されるチャットボタンのアイコンを変更できます（デフォルト 20×20px）。
ランチャーの配置：チャットボタンを左右どちらに配置するか選べます。
余白：ボタン周囲の横・下部の余白をpx単位で調整できます。
ブランドロゴ：ウィジェット上部に表示するロゴを設定できます。
外観（テーマ）：ライトとダークの2種類から選べます。
アクセントの色：ボタンやアクセント要素の色を変更できます。
カスタムスタイルシート：CSSファイルをアップロードしてより細かいスタイル調整も可能です。
まず「PLuGランチャーをカスタマイズ」に画像をアップロードし、ランチャーを変更します。チャットが閉じているときにアップロードした画像がランチャーとして表示されることが確認できます。
次にテーマをダークに切り替えてみました。右側のプレビューが暗い背景に変わります。
次に、ライトテーマに戻してアクセントカラーをオレンジ（#F46201）に変更してみました。
プレビューの「Send us a message」ボタンやランチャーのアイコンがオレンジに変わっているのが確認できます。自社のブランドカラーに合わせた調整がコンソール上だけで完結します。
 タブ「タブ」タブでは、ウィジェット内に表示するタブのオン・オフを切り替えられます。
デフォルトの状態は以下のとおりです。
ホーム：お知らせやニュースなど、カスタマイズ可能なホーム画面（常時オン・変更不可）
会話：会話用の受信トレイ（デフォルトオン）
チケット：チケットを作成・表示・追跡（デフォルトオン）
ヘルプ：ヘルプ記事とドキュメント（デフォルトオフ）
試しにヘルプタブのトグルをオンにしてみました。
プレビューのタブ一覧に「Help」が追加されているのが確認できます。ナレッジベースや記事をユーザーに直接見せたい場合はこのタブを有効にすると便利です。
 レイアウト「レイアウト」タブでは、ウィジェット内のテキストやコンテンツを調整できます。
設定できる主な項目は以下のとおりです。
タイトル / ウェルカムメッセージ：ウィジェットヘッダーに表示されるタイトルとメッセージを変更できます（50文字まで）
検索：PLuGホームに検索バーを表示するかどうか
最近の会話：PLuGホームに最近の会話カードを表示するかどうか
最近のチケット：PLuGホームに最近のチケットカードを表示するかどうか
試しに「ウェルカムメッセージ」をデフォルトの「Hello! How can we help?」から「何かお困りですか？」に変更しました。
右側のプレビューのヘッダー部分が「何かお困りですか？」に変わっているのが確認できます。
 保存して公開する設定が完了したら、右上の「保存して公開」をクリックします。
「公開」ダイアログが表示されます。「プレイグラウンドで表示」をクリックすると、PLuGプレイグラウンドという公式のプレビュー環境へ移動できます。
PLuGプレイグラウンド（plug-platform.devrev.ai/try-plug）は、自分のWebサイトへのデプロイなしに、設定を反映したウィジェットの実際の見た目をその場で確認できる公式の環境です。今回設定したカスタマイズ内容が正しく反映されているのが確認できました。（「設定」タブのプレイグラウンドからも確認できます。）
 まとめ今回はDevRevのPLuGチャット設定画面にある4つのタブの内容を網羅的に紹介しました。 スタイル設定ではテーマやアクセントカラー、タブでは表示する機能の追加・削除、レイアウトではウェルカムメッセージの変更など、コードを触ることなくコンソールだけでウィジェットの見た目や機能を調整できます。右側のリアルタイムプレビューで即座に確認できるため、試行錯誤がしやすいのも嬉しいポイントです。

本ブログが少しでも参考になれば幸いです。