レッスン3：AIチャットボットをWebサイトに設置する
このレッスンでは、サポートウィジェットを作成してAIチャットボットを設定し、FAQサイトや外部Webサイトに設置するまでの流れをご案内します。レッスンを終えると、エンドユーザーがWebサイト上でAIチャットボットに質問できる状態になります。
このレッスンでわかること
サポートウィジェットを作成してから設置するまでの全体の流れ
AIチャットボットとFAQサイトの記事の関係
AIチャットボットの回答方法（生成AI型・AI検索型）を設定する記事
FAQサイトと外部Webサイトへの設置方法を説明している記事
各ステップでつまずきやすい点
このレッスンのゴール
サポートウィジェットがFAQサイトまたは外部Webサイトに設置され、エンドユーザーがサポートウィジェットからAIチャットボットに質問できる状態になっていることが、このレッスンのゴールです。
始める前に準備するもの
「レッスン1：FAQサイトを作成して公開する」を終えて、記事を公開したFAQサイトがあること（AIチャットボットは、FAQサイトの記事をもとに質問に回答します。サポートウィジェットでAIチャットボット機能を使う場合は、AIチャットボットが回答するための「サイト」を選択します）
ヘルプドッグのアカウント（ステップ1で登録できます）
FAQサイトに設置する場合：FAQサイトの設定を変更できる権限
外部Webサイトに設置する場合：サポートウィジェットの設置用のコードを貼り付けるWebページ
進め方
ステップ1：ヘルプドッグにログインする
ログインページ（https://app.helpdog.ai/signin）から、ヘルプドッグの管理画面にログインします。アカウントをまだお持ちでない場合は、アカウント登録ページ（https://app.helpdog.ai/signup/）から登録できます（クレジットカード不要、無料プランあり）。
ログインできない場合は「ログインできないときの対処方法」をご確認ください。
ステップ2：サポートウィジェットを作成する
「ウィジェット・AIチャット」から、ウィジェット名を入力してサポートウィジェットを作成します。
詳しい手順は「サポートウィジェットを作成する」をご確認ください。
補足：はじめて作成する場合と2つ目以降で、手順が異なります
サポートウィジェットは、はじめて作成する場合と、2つ目以降を作成する場合で手順が異なります。手順記事で、該当する手順をご確認ください。
ステップ3：サポートウィジェットに表示する機能を設定する
サポートウィジェットに表示する「AIチャットボット」「サイト」「フォーム」の機能ごとに、ON／OFF、タブ名、アイコンを設定します。AIチャットボットを利用するため、AIチャットボット機能をONにします。
詳しい内容は「サポートウィジェットに表示する機能を設定する」をご確認ください。
補足：AIチャットボット機能には、回答に使う「サイト」の選択が必要です
AIチャットボット機能をONにする場合は、AIチャットボットが回答するための「サイト」を選択します。レッスン1で作成したFAQサイトを選択してください。
ステップ4：AIチャットボットの回答方法を設定する
AIチャットボットの回答方法を「生成AI型」「AI検索型」から選択します。生成AI型は、AIを利用した検索を行ったあと、LLMにより自然な言葉で要約して回答します。AI検索型は、AIを利用した検索を行い、該当する記事へのリンクを表示します。
詳しい手順は「AIチャットボットの回答方法を設定する」をご確認ください。
補足：初めて設定する際は「生成AI型」が設定されます
サポートウィジェットでAIチャットボットを初めて設定する際は、「生成AI型」が設定されます。生成AI型は有料（無料利用枠あり）、AI検索型は無料です。
ステップ5：FAQサイト、または外部Webサイトにサポートウィジェットを設置する
FAQサイトに設置する場合は、FAQサイトの設定ページの「ウィジェットの設置」で、設置するサポートウィジェットを選択します。外部Webサイトに設置する場合は、サポートウィジェットの「設置方法」ページにある「設置用のコード」をコピーして、Webページに貼り付けます。
詳しい手順は「FAQサイトにサポートウィジェットを設置する」「外部Webサイトにサポートウィジェットを設置する」をご確認ください。Googleタグマネージャー（GTM）を利用して設置する場合は、「外部Webサイトにサポートウィジェットを設置する（Googleタグマネージャー）」をご確認ください。
補足：1つのFAQサイトに設置できるサポートウィジェットは1つです
1つのFAQサイトに複数のサポートウィジェットを設置することはできません。スクリプトを利用して外部Webサイトに設置する方式では、1つのWebページに複数のサポートウィジェットを設置できます。
ステップ6：表示を確認する
サポートウィジェットを設置したFAQサイトまたはWebページを開き、ウィジェットボタンからサポートウィジェットを開いて、AIチャットボットに質問できることを確認します。
ウィジェットボタンや吹き出しの見た目は、「ウィジェットボタンを設定する」「吹き出しを設定する」で変更できます。
補足：ウィジェットボタンは、デスクトップとモバイルごとに表示を設定できます
ウィジェットボタンは、デスクトップとモバイルごとに、表示のON／OFFと表示位置を設定できます。ウィジェットボタンが表示されない場合は、表示の設定をご確認ください。
完了チェックリスト
□ ヘルプドッグにログインできた
□ サポートウィジェットを作成できた
□ AIチャットボット機能をONにして、回答に使うFAQサイトを選択できた
□ AIチャットボットの回答方法を設定できた
□ FAQサイト、または外部Webサイトにサポートウィジェットを設置できた
□ 設置したページで、AIチャットボットに質問できることを確認できた
次のレッスン
次は「レッスン4：チームメンバーを招待する」で、チームにユーザーを招待する流れをご確認ください。
