← FrontierBase
ガイド

チャンネル設定

ウェブサイトにチャットボットのボタンを置いて設定する方法

サイトにチャットボットのボタンを入れ、名前、言語、表示、許可ドメイン、通知を合わせます。FrontierBase Consoleのチャンネル管理に沿っています。

ウェブサイトにチャットボットのボタンを置いて設定する方法 — FrontierBase
要点

このガイドで分かること

サイトにチャットボットのボタンを入れ、名前、言語、表示、許可ドメイン、通知を合わせます。FrontierBase Consoleのチャンネル管理に沿っています。

  • チャンネル詳細
  • プロフィール管理
  • ボタンインストール
  • ボタン設定
  • 許可ドメイン
  • 通知

FrontierBase Consoleでチャットボットを使う前に、チャンネル設定 → チャンネル管理でチャンネル情報とウィジェット設定を整えます。

名前と言語を決め、プロフィールを設定したあとインストールコードを入れます。表示方式と許可ドメインを確認し、必要なら通知とイシュートラックをオンにします。学習データや応答設定は別メニューです。ウィジェットが表示されても回答が返ってこない場合は、そちらも確認してください。

FrontierBase Consoleにログインし、サイドバーから チャンネル設定 → チャンネル管理 を開きます。

タブ右の ガイド を押すと、同じ画面で手順を確認できます。

1. チャンネル詳細

チャンネルの基本情報を確認・変更するタブです。ここで決めた名前と言語は、コンソール一覧だけでなくプレイグラウンドURLや既定の応答言語にも影響します。

チャンネル名と識別子

チャンネル名はコンソールに表示される名前です。チームが区別しやすい名前にします。

チャンネル識別子はコードやURLでチャンネルを指す値です。作成時に決まり、この画面では編集できません。下にプレイグラウンドのプレビューURLが出ます。公開前にこのURLで動作を確認できます。

変更したら下の 保存 を押します。

国/地域とチャンネル言語

国/地域と チャンネル言語 は同じ行に並びます。チャンネル言語はこのチャンネルの既定の応答言語です。訪問者の言語に合わせるのが基本です。後から変更できますが、学習データや口調とのずれがないか確認します。

プランと状態

プランは契約に応じて表示され、このタブでは直接変更しません。

ステータスはデータセットの準備状況と運用に応じて変わります。ラベル横のヘルプで各状態を確認できます。

  • 保留中: データセットがまだ構成されていません。データセット設定から学習データ画面へ移動できます。
  • アクティブ: 正常に運用中です。必要なら 停止 できます。
  • 一時停止: メッセージの送受信を行いません。有効化で再開できます。
  • 削除済み: これ以上使えません。

保留中のままウィジェットだけ埋め込むと、ボタンが表示されても回答が返ってこないことがあります。公開前に学習データの状態を確認してください。

請求先住所と削除

同じタブ下部に 請求先住所(事業者名、事業者番号、住所)を入れられます。請求情報と一致させてください。

一番下の チャンネル削除 は取り消しにくい操作です。本番はまず一時停止を検討し、削除はテスト用の整理などに使います。

チャンネル詳細 プロフィール管理 ボタンインストール ボタン設定 許可ドメイン 通知 イシュートラック
サポートチャットボット
support-bot
playground.frontierbase.io/@support-bot
日本 ⌄
日本語 ⌄
Pro
アクティブ

2. プロフィール管理

お客様に見えるブランド情報を設定します。ロゴ・カバー、表示名、チャットボタン文言、案内事項、会話開始メッセージを整え、プレビューで確認します。

ロゴとカバー

ロゴはチャットボットヘッダーの画像です。カバーはブランドを表す大きな画像です。アップロード後、プレビューで画像の表示範囲やトリミングを確認します。サイトのヘッダーが暗い場合はロゴの見え方も合わせて確認します。

表示名とボタン文言

表示名はウィジェットヘッダーに出ます。チャンネル名と違って構いません。チャンネル名を社内用、表示名をお客様向けとして使い分けるケースが一般的です。

チャットボタン文言はフローティングボタンなどに表示する短い文言です。チャットする のように、操作が明確に伝わる表現が適しています。

案内事項と会話開始メッセージ

案内事項には営業時間や対応範囲、よく使うリンクを書きます。長い文章は、プレビューでは「もっと見る」の下に折りたたまれます。

会話開始メッセージはチャットを開いたときの最初の挨拶です。長すぎると入力前にスクロールが必要になるので、1〜2文が目安です。

プレビューでヘッダー・会話開始メッセージ・入力欄を確認してから保存します。プレビューだけではサイトに反映されません。

チャンネル詳細 プロフィール管理 ボタンインストール ボタン設定 許可ドメイン 通知 イシュートラック

お客様に表示されるブランド情報を設定します。

ロゴ
カバー
カバー画像
FrontierBase ヘルパー
チャットする
平日 10:00–18:00 に対応します。注文の問い合わせは注文番号をお知らせください。
こんにちは。ご用件をお聞かせください。
FrontierBase ヘルパー

こんにちは。ご用件をお聞かせください。

3. ボタンインストール

サイトにチャットボットを表示するインストールコードをコピーするタブです。コードを設置しても 許可ドメイン にサイトが登録されていないと読み込まれないことがあります。インストールとドメイン登録を続けて行います。

インストールコードを設置する

  1. インストールコード の コードをコピー を押します。
  2. HTMLの body 内、できれば </body> 直前に貼り付けます。
  3. ページを再読み込みしてボタンが出るか確認します。

コードはチャンネルごとに異なります。手で書き換えると動かない、または別チャンネルにつながる場合があります。コピーしたまま貼ってください。

テーマの「カスタムスクリプト」欄がある場合はそこに入れても構いません。キャッシュ系プラグインがあるサイトは、反映前にキャッシュ削除が必要なことがあります。

Google Analytics(任意)

同じタブで Google Analytics 測定ID(例: G-XXXXXXXXXX)を設定できます。ウィジェット実行時に適用されます。PRO以上 のプランが必要です。

学習データとスクリプトオプション

dataset_ids を空にすると、有効な学習データが1件のときに自動で使います。複数ある場合は使うIDを1つだけ渡します。コンソールの案内例に従ってください。

チャンネル詳細 プロフィール管理 ボタンインストール ボタン設定 許可ドメイン 通知 イシュートラック

インストールコードをコピーし、必要に応じて Google Analytics を連携します。

HTMLファイルのbodyタグ内に以下のスクリプトを挿入してください。

<script src="https://cdn.frontierbase.io/widget.js" data-channel="support-bot"></script>
コードをコピー

許可ドメインタブにサイトドメインを登録すると、ウィジェットを安全に読み込めます。

4. ボタン設定

チャットウィジェットの表示方法を選びます。モードを変えたら保存し、プレイグラウンドか実ページで一度開いて確認します。

表示モード

  • フローティングモード: 角のフローティングボタン。多くのサイトに向きます。
  • 全画面モード: 開くと画面を覆うオーバーレイ。会話に集中したいときに向きます。
  • エージェントレイアウトモード: 画面端から開き、本文を横に押し出して表示します。本文と並べて長い会話を見るときに向きます。

タブ内の 例 画像で見た目を比較できます。

プレイグラウンド

公開前にプレイグラウンドURLで試します。チャンネル詳細に表示されるプレビューURLと同じ形式です。プロフィールや会話開始メッセージ、学習データの反映をここで確認します。

フローティング表示設定

フローティング時は フローティング表示設定 で、PC・タブレット・モバイルごとに表示のオン/オフ、左右の配置、左・下・右の余白を設定できます。

モバイルの固定メニューや購入ボタンと重なる場合は下余白を広げるか配置を変えます。タブレットだけオフにする組み合わせも可能です。

チャンネル詳細 プロフィール管理 ボタンインストール ボタン設定 許可ドメイン 通知 イシュートラック

チャットウィジェットの表示方法を選択します。

チャットボットの画面上の出し方を選びます

フローティングモード
全画面モード
エージェントレイアウトモード
PCで表示
タブレットで表示
スマートフォンで表示

5. 許可ドメイン

登録したドメインでのみチャットボットウィジェットを実行できます。インストールコードを入れたすべてのホスト(本番・ステージング・ローカルなど)を登録します。

ドメインを追加

  1. ドメインを追加 を押します。
  2. example.com のようにホストだけ入力します。https:// やパスは不要です。
  3. 一覧に追加されたことを確認します。

許可ドメインは 最低1件 残す必要があります。最後の1件は削除できません。

* を登録すると すべてのドメインを許可 します。テストには便利ですが、本番は実ドメインだけ残す方が安全です。

www.example.com と example.com は別登録が必要な場合があります。ウィジェットが出ないときは、ブラウザのホスト名と一覧が一致するか先に確認します。

チャンネル詳細 プロフィール管理 ボタンインストール ボタン設定 許可ドメイン 通知 イシュートラック
すべてのドメインを許可 (*) ドメインを追加
#ドメイン作成日操作
1example.com2026-09-17削除
2staging.example.com2026-09-17削除
チャットボットを使うサイトのドメインを登録します。許可ドメインは最低1件必要です。* を入れるとすべてのドメインを許可します。

6. 通知

チャンネル関連のメールを項目ごとにオンにします。全部オンにするとメールが増えるので、実際に確認する項目だけ残します。変更後は 保存 が必要です。

支払い・トークン

  • 支払い通知: 次回定期支払いの1日前に管理者へメールします。
  • トークン残量: 残量が 50%・10% を下回るとメールします。利用が多いチャンネルではオン推奨です。

要約メール

  • 応答サマリー: 前日のチャット対応をまとめた要約を毎日送ります。
  • 未回答の質問: ボットが答えられなかった質問を毎日まとめます。学習データの追加候補を選ぶときに便利です。

メールはチャンネルまたはアカウントに登録された管理者アドレスに届きます。届かない場合は、迷惑メールフォルダーと登録済みアドレスを確認します。

チャンネル詳細 プロフィール管理 ボタンインストール ボタン設定 許可ドメイン 通知 イシュートラック
支払い通知次回の定期支払いの1日前に管理者へメールします。
トークン残量トークンが 50%・10% を下回ると管理者へメールします。
応答サマリー前日のチャット対応をまとめた要約を毎日メールします。
未回答の質問答えられなかった質問を毎日メールでまとめます。
保存

7. イシュートラック

チャットボットが学習データだけでは回答できない場合、訪問者に問い合わせを案内できます。内容はコンソールで確認し、必要なら Zendesk や Webhook に転送します。

イシュートラックをオンにする

上部スイッチで イシュートラック をオンにします。オフの間は問い合わせ案内と連動設定が無効です。オンでも学習データが充実していれば通常回答で終わることが多く、学習データが登録されていない場合は問い合わせ案内が出やすくなります。

Zendesk

Zendesk をオンにし、サブドメイン、Zendesk メール、APIトークン を入力します。入力内容が正しくない場合、問い合わせはコンソールに残ってもチケットが作成されないことがあります。保存後にテスト問い合わせを1件入れて確認します。

Webhook

自社システムへ送る場合は Webhook をオンにします。通知先URL にはHTTPS URLを入力し、必要なら セキュリティキー を設定します。ファイアウォールの内側にある場合は、FrontierBaseからアクセスできることを確認します。

終わったら 保存 します。問い合わせ履歴に蓄積された内容を確認し、繰り返し寄せられる質問は学習データへ反映します。

チャンネル詳細 プロフィール管理 ボタンインストール ボタン設定 許可ドメイン 通知 イシュートラック
イシュートラック学習データだけでは回答できない場合、訪問者に問い合わせフォームを案内します。
Zendesk問い合わせ受付時に Zendesk チケットを作成します。
Webhook問い合わせ受付時に指定URLへ通知します。
https://hooks.example.com/frontierbase
保存

設定の順番

  1. チャンネル詳細で名前・言語・状態を確認し、保留中なら学習データから準備します。
  2. プロフィール管理でロゴ・表示名・会話開始メッセージを整え、プレビューで確認します。
  3. ボタンインストールでコードを入れ、許可ドメインにホストを登録します。
  4. ボタン設定で表示モードと余白を選び、プレイグラウンドで試します。
  5. 運用に合わせて 通知 と イシュートラック をオンにして保存します。

ウィジェットが表示されない場合は、許可ドメインとインストールコードが同じチャンネルのものか確認します。表示されても回答が返ってこない場合は、チャンネルの状態と学習データを確認します。チャンネル管理が終わったら、FrontierBase Consoleで学習データと応答設定を確認してください。

ほかの使い方を見るFrontierBase →