ウェブサイトにチャットサポートは必要？AI チャットウィジェットを 5 分で埋め込む方法

サイトを見ている訪問者が、商品について小さな疑問を持ったとします。答えが見つからなければ、わざわざメールで問い合わせたりはせず、そのままタブを閉じてしまいます。 サイトの右下にあるチャットボタン（Webchat）の役割は、疑問が生まれたその瞬間に受け止めることです。 この記事では、ウェブサイトのサポートの選択肢を比較し、AI ウェブサイトチャットを自社サイトに埋め込む方法を紹介します。

ウェブサイトのサポート、3 つの選択肢

• 有人のオンラインチャット：体験は最も良いものの、シフトを組む人手が必要です。営業時間外や休日は機能しません
• 従来型のサポートプラグイン：実態はメッセージフォームか定型文で、返信が届くころには訪問者はとっくに離れています
• AI チャットボット＋有人のバックアップ：AI がナレッジベースをもとによくある質問の大半に即答し、答えられないものは人に引き継ぎます。現時点で最もコストパフォーマンスの高い方法です

ステップ 1：チャットボットを用意する

ウェブサイトチャットは 1 つの「チャネル」にすぎず、裏で質問に答えるのはあなたのチャットボットです。まだ作っていなければ、 こちらのガイドに沿ってプロジェクトを作成し、 よくある Q&A を AI ナレッジベース（「Knowledge」）に入れてください。同じボットで LINE とウェブサイトの両方に対応でき、作り直す必要はありません。

ステップ 2：ウェブサイトチャット（Webchat）の見た目を設定する

プロジェクトの「Channels」で「Add channel」を押して「Website chat」を選ぶか、「Settings」›「Website chat」を開きます（詳しくはウェブサイトチャットのヘルプをご覧ください）。

• ブランド名、あいさつメッセージ、ブランドカラー、ロゴを設定し、チャットウィンドウをサイトの雰囲気に合わせます
• チャットボタンの位置（左下／右下）と、パソコン・スマホそれぞれでの画面端からの距離を選びます
• 必要に応じて「When visitors want a person」（訪問者が人と話したいとき）で接続済みの LINE 公式アカウントや Facebook ページを選ぶと、訪問者は LINE や Messenger で会話を続けられます

ステップ 3：サイトに埋め込む

「Add the code to your website」のステップでコードをコピーし、サイトの全ページの </body> の直前に貼り付けます。形式は次のようになります。

<script>
  window.ChatbottaConfig = { chatbotId: 'あなたのプロジェクト ID' };
</script>
<script src="https://app.chatbotta.com/webchat-widget.js" async></script>

• 一般的なサイト / WordPress：テーマのフッターに貼り付けるか、プラグインで挿入します
• Google Tag Manager：設定画面に GTM 専用のコードがあります。カスタム HTML タグを追加してコンテナを公開すれば完了です

応用：サイトから会話を始める

埋め込み後は、サイトの JavaScript から window.Chatbotta でチャットウィンドウを操作できます。 たとえば訪問者が料金ページを見ているときに、「プラン紹介」のステップからボットに話しかけさせ、会員番号を会話に渡すことができます。

<script>
  function withChatbotta(fn) {
    if (window.Chatbotta) fn(window.Chatbotta)
    else window.addEventListener('chatbotta:ready', function () { fn(window.Chatbotta) }, { once: true })
  }
  withChatbotta(function (chat) {
    chat.setVariables({ member_id: 'A123' })
    chat.triggerFlow('プラン紹介ステップのステップ ID')
  })
</script>

• ステップ ID：フローでステップを選んで「Step settings」を開き、「Advanced」を展開して「Step ID」の横の「Copy」を押します。ステップは公開済みである必要があります
• フィールド：事前にフィールドパネルで「Let your website set it」を選んでおく必要があり、テキストと数値のみ受け付けます
• その他の機能：ウィンドウの開閉や、訪問者としてメッセージを送ることもできます。詳しくはウェブサイトチャット JavaScript API のヘルプをご覧ください

ステップ 4：実際に試して管理する

• シークレットウィンドウでサイトを開き、実際にチャットボタンを押していくつか質問してみます
• ウェブサイト訪問者との会話はチャット（「Chats」）に届き、LINE、Messenger、Instagram の会話とまとめて管理できます
• 人の対応が必要なときは、担当者が「Chats」でそのまま引き継ぎます。訪問者のチャットウィンドウには担当者からの返信が表示されます

ウェブサイト向け AI チャットサポートの機能をもっと知りたい方は、 ウェブサイト AI チャットサポート（Webchat）の紹介ページをご覧ください。

よくある質問