- Home
- リファレンス
- インターネットにボットを公開する
- 公開ページを設定する
公開ページを設定する
独立したページとして提供されるチャット画面(公開ページ)の公開状態やデザインをカスタマイズする方法について説明します。
エンドユーザー向けの独立したチャットページ(公開ページ)の外観と内容を、ブランドや用途に合わせて自由にカスタマイズできます。各種設定後、プレビューを確認してから保存してください。
公開状態を変更する
公開ページ画面右上の [公開ページ公開状態] で現在の公開状態を確認できます。
- アクセス拒否: 公開ページが無効になっています。
- パブリックアクセス: 緑色のインジケーターで表示。公開ページに誰でもアクセスできる状態です。
- 認証済みのみ: 黄色のインジケーターで表示。公開ページを有効にします。パブリックアクセスとは異なり、事前に設定した 外部認証 での本人確認に成功したエンドユーザーだけがアクセスできます。
社内限定公開を行う際の全体的な流れは、 SSO を利用して社内限定公開のボットを設置する を参照してください。
-
管理コンソールにログイン して、メニューの [設置設定] → [公開ページ] を順にクリックします。
公開ページ画面が表示されます。
-
[公開ページ公開状態] の [変更] をクリックします。
「アクセス制御レベルの選択」画面が表示されます。
-
新しいアクセス制御レベルを選択します。
- アクセス拒否: 公開ページを利用しません。公開ページの URL にアクセスすると、エラーページ (404 Not Found) が表示されます。
- パブリックアクセス: 公開ページを利用します。誰でもアクセスできます。
- 認証済みのみ: 公開ページを利用します。事前に設定した 外部認証 での本人確認に成功したエンドユーザーだけがアクセスできます。
-
[保存] → [変更する] を順にクリックします。
公開ページの公開状態が変更されます。
プレビューで公開ページの外観を確認する
画面中央のプレビューエリアで、現在の設定による公開ページの外観をリアルタイムで確認できます。設定を変更すると、プレビューに即座に反映されます。
公開ページの外観をカスタマイズする
画面下部のタブを選択して、外観をカスタマイズします。
[ヘッダー]
公開ページ上部に表示されるヘッダー領域のデザインをカスタマイズします。
| 項目 | 説明 |
|---|---|
| [ロゴURL(フルパス)] | ヘッダーに表示するロゴ画像の URL を入力します。公開されている画像 URL(PNG、JPG、SVG 形式)を指定してください。 |
| [ヘッダー] | ヘッダーに表示するテキストです。ブランド名やサービス名を設定します。 |
| [背景色] | ヘッダー領域の背景色を指定します。 例: #1d8091 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [テキスト色] | ヘッダーに表示するテキストの色を指定します。 例: #ffffff カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [フォントサイズ] | ヘッダーに表示するテキストのフォントサイズを、ピクセル単位 (12~32) で指定します。推奨: 16-24px |
[説明文]
公開ページ上部に表示される説明文のデザインをカスタマイズします。
| 項目 | 説明 |
|---|---|
| [ページ説明文] | ページの内容を要約する短い説明文です。 |
| [テキスト色] | 説明文のテキスト色を指定します。 例: #64748b カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [フォントサイズ] | 説明文のフォントサイズをピクセル単位 (10~40) で指定します。 |
[ページ全体]
ページの全体的なデザインや背景に関する設定です。
| 項目 | 説明 |
|---|---|
| [フォントファミリー] | ページ全体で使用するフォントを指定します。 例: ‘Noto Sans JP’, ‘Hiragino Kaku Gothic ProN’, ‘Hiragino Sans’, ‘Yu Gothic’, ‘Meiryo’, sans-serif |
| [背景色] | ページ全体の背景色を指定します。 例: #f8f9fa カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [背景画像URL] | ページ全体の背景として表示する画像を URL で指定します。 |
| [背景画像の配置] | 背景画像をどのように表示するかを選択します。
|
| [背景画像の透過度(%)] | 背景画像の透明度を 0%(完全な透明)から 100%(完全な不透明)の間で設定します。 |
[メッセージエリア]
ユーザーとボットの対話が表示されるエリアの背景デザインを設定します。
| 項目 | 説明 |
|---|---|
| [背景色] | 対話が表示されるエリアの背景色を指定します。 例: #ffffff カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [透過度(%)] | 背景色の透明度を 0%から 100%の間で設定します。 |
| [背景画像URL] | 背景として表示する画像を URL で指定します。 |
| [背景画像の配置] | 背景画像の表示方法を選択します。
|
| [背景画像の透過度(%)] | 背景画像の透明度を 0%(完全な透明)から 100%(完全な不透明)の間で設定します。 |
[ボットメッセージ]
ボットが送信するメッセージ(吹き出し)のデザインを設定します。
| 項目 | 説明 |
|---|---|
| [ボットアバター画像URL] | ボットメッセージの横に表示されるアバター画像を URL で指定します。公開されている画像 URL(PNG、JPG、SVG 形式)を指定してください。 空の場合はアバターなしで表示されます。 |
| [ボットアバターサイズ] | アバター画像のサイズを CSS の単位で指定します。 例: 32px |
| [ウェルカムメッセージ] | ユーザーが公開ページにアクセスしたときに、ボットから最初に送られるメッセージです。挨拶や簡単な案内を記述します。 |
| [背景色] | ボットの吹き出しの背景色を指定します。 例: #f8fafc カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [テキスト色] | ボットの吹き出しのテキスト色を指定します。 例: #334155 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [フォントサイズ] | ボットのメッセージのフォントサイズをピクセル単位 (10~24) で指定します。 |
| [リンク色] | ボットのメッセージに含まれるリンクのテキスト色を指定します。 例: #1d8091 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [透過度(%)] | ボットの吹き出しの透明度を 0%(完全な透明)から 100%(完全な不透明)の間で設定します。 |
[ユーザーメッセージ]
ユーザーが送信するメッセージ(吹き出し)のデザインを設定します。
| 項目 | 説明 |
|---|---|
| [背景色] | ユーザーの吹き出しの背景色を指定します。 例: #1d8091 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [テキスト色] | ユーザーの吹き出しのテキスト色を指定します。 例: #ffffff カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [フォントサイズ] | ユーザーのメッセージのフォントサイズをピクセル単位 (10~24) で指定します。 |
| [透過度(%)] | ユーザーの吹き出しの透明度を 0%から 100%の間で設定します。 |
[入力エリア]
ユーザーがメッセージを入力するエリアのデザインを設定します。
| 項目 | 説明 |
|---|---|
| [プレースホルダー] | 入力ボックス内に、入力例として薄く表示されるテキストです。 例: 質問を入力してください… |
| [入力エリア背景色] | 入力ボックスや送信ボタンを含む、入力エリア全体の背景色を指定します。 例: #f5f5f5 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [入力ボックス背景色] | ユーザーが文字を入力するテキストボックス自体の背景色を指定します。 例: #ffffff カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [テキスト色] | ユーザーが入力する文字の色を指定します。 例: #2c3e50 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [フォントサイズ] | 入力文字のフォントサイズをピクセル単位 (12~24) で指定します。 例: 16 iPhone で自動ズームが発生することを防ぐため、16 以上の設定を推奨します。 |
| [送信ボタン色] | 送信ボタンのアイコンの色を指定します。 例: #1d8091 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
[その他の外観]
公開ページの最も基本的な情報を設定します。
| 項目 | 説明 |
|---|---|
| [ブラウザタブのタイトル] | ブラウザのタブや検索結果に表示されるページのタイトルです。顧客がページの内容を理解しやすいように、明確なタイトルを設定してください。 |
ボタン
- [別ウィンドウで開く] : 公開ページを別ウィンドウで表示します。このウィンドウは、 公開ページ公開状態 の設定に関わらず表示できます。
- [デフォルトに戻す] : すべてのタブの設定をデフォルトに戻します。
- [保存] : すべてのタブの設定を保存します。
公開ページの URL を確認・共有する
-
管理コンソールにログイン して、メニューの [設置設定] → [公開ページ] を順にクリックします。
公開ページ画面が表示されます。画面上部に [公開ページURL] が表示されます。
-
URL を確認・共有するには、以下のボタンを使用します。
- [コピー] : URL をクリップボードにコピーします。
- [表示] : 公開ページを新しいタブで開いて確認します。
エンドユーザーとしてチャットを試す
エンドユーザー向けの公開ページはメールアドレスやパスワードを入力せずにアクセスできます。
-
公開ページ画面で [公開ページ URL] の [表示] をクリックします。
エンドユーザー向けの公開ページが新しいタブで開きます。
-
メッセージ入力エリアに質問を入力します。
入力エリアで改行するには、Shift + Enter キーを押します。
-
[
]
をクリックします。- ボットの回答が表示されます。回答が返ってくるまでに時間がかかることがあります。
- 再質問する場合は、メッセージ入力エリアに質問を入力して
[
]
をクリックします。
- 新しいチャットを開始するには、ページを再読み込みしてください。
- 過去のチャット内容はチャットログ画面で確認できます。詳しくは、 チャットログを確認する を参照してください。
Wisora