エンドユーザー向けの独立したチャットページ(公開ページ)の外観と内容を、ブランドや用途に合わせて自由にカスタマイズできます。各種設定後、プレビューを確認してから保存してください。
公開状態を変更する
公開ページ画面右上の [公開ページ公開状態] で現在の公開状態を確認できます。
- アクセス拒否: 公開ページが無効になっています。
- パブリックアクセス: 緑色のインジケーターで表示。公開ページに誰でもアクセスできる状態です。
-
管理コンソールにログイン して、メニューの [設置設定] → [公開ページ] の順にクリックします。
公開ページ画面が表示されます。
-
[公開ページ公開状態] の [変更] をクリックします。
「アクセス制御レベルの選択」画面が表示されます。
-
新しいアクセス制御レベルを選択します。
- アクセス拒否: 公開ページを利用しません。公開ページの 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) で指定します。 |
[送信ボタン色] | 送信ボタンのアイコンの色を指定します。 例: #1d8091 カラーコード(#000000 形式)を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
[その他の外観]
公開ページの最も基本的な情報を設定します。
項目 | 説明 |
---|---|
[ブラウザタブのタイトル] | ブラウザのタブや検索結果に表示されるページのタイトルです。顧客がページの内容を理解しやすいように、明確なタイトルを設定してください。 |
ボタン
- [別ウィンドウで開く] : 公開ページを別ウィンドウで表示します。このウィンドウは、公開ページ公開状態 の設定に関わらず表示できます。
- [デフォルトに戻す] : すべてのタブの設定をデフォルトに戻します。
- [保存] : すべてのタブの設定を保存します。
公開ページの URL を確認・共有する
-
管理コンソールにログイン して、メニューの [設置設定] → [公開ページ] の順にクリックします。
公開ページ画面が表示されます。画面上部に [公開ページURL] が表示されます。
-
URL を確認・共有するには、以下のボタンを使用します。
- [コピー] : URL をクリップボードにコピーします。
- [表示] : 公開ページを新しいタブで開いて確認します。
エンドユーザーとしてチャットを試す
エンドユーザー向けの公開ページはメールアドレスやパスワードを入力せずにアクセスできます。
-
公開ページ画面で [公開ページ URL] の [表示] をクリックします。
エンドユーザー向けの公開ページが新しいタブで開きます。
-
メッセージ入力エリアに質問を入力します。
入力エリアで改行するには、Shift + Enter キーを押します。
-
[
] をクリックします。
- ボットの回答が表示されます。回答が返ってくるまでに時間がかかることがあります。
- 再質問する場合は、メッセージ入力エリアに質問を入力して
[
] をクリックします。
- 新しいチャットを開始するには、ページを再読み込みしてください。
- 過去のチャット内容はチャットログ画面で確認できます。詳しくは、チャットログを確認する を参照してください。