WebサイトにAIエージェントを追加する方法(きちんと答えてくれるもの)

「AIエージェントを追加する」ことが、実は設置の話ではない理由

私は、人々がサポートソフトを購入する前に検索窓へ何を入力するかを毎週よく見ていますが、「WebサイトにAIエージェントを追加する方法」は、検索よりも悩みのほうが大きい言葉の1つです。これを検索する人が、スクリプトタグでつまずくことはほとんどありません。つまずくのは3週間後です。ボットが返品期間を60日と案内してしまった(実際は30日)とき、あるいは「担当者と話したい」という要望にお問い合わせフォームで返したときです。

サポート責任者の立場でChatGPTにこの質問をしてみたところ、Webウィジェット、ナレッジソース、引き継ぎの3つについて検索し、最後にどのヘルプデスクを使っているかを聞き返してきました。これは正しい発想です。サイトに置くAIチャットボットには3つの層があり、貼り付けるのはその最上層だけです。

• ウィジェット。 バブル、その色、挨拶文です。このガイドに登場するどのベンダーも、内部的には同じ方法で設置します。ページにスクリプトタグを貼り付けるだけです。
• ナレッジ。 回答の元になるものです。ナレッジベース、ヘルプセンター、製品ページ、PDF、過去のチケットなどです。回答が正しいかどうかを決めるのはこの層です。
• 出口。 答えられないとき、またはお客様が注文の照会を必要とするときに何が起きるかです。出口のないウィジェットは、お客様がすっかり嫌いになった「ちょっと立派なお問い合わせフォーム」です。

実際のeeselの導入でこれが起きるのを見てきました。あるトライアルでは、購入検討者が67項目の丹念な評価を行い、ナレッジの回答は十分だと評価したのに、ウィジェット自体が「かなり遅く、よく固まる」という理由で離脱しました。別のケースでは、医療機器チームがeeselのエージェントに「スニペットをコピーしたけどNetlifyで動かない」と送り、その後「動いた」と送ってきました。どちらも設置層の問題です。ただし、どちらも時間の大半をかける場所ではありません。

ここでのチャットボットとエージェントの違いは、マーケティング上の言葉ではなく実務上のものです。ルールベースのボットはスクリプトに従います。AIエージェントはコンテンツを読み、自分の言葉で答え、チケットの作成のような範囲を限定したアクションを実行できます。力が大きい分、ナレッジと出口がより重要になります。

何かを貼り付ける前に準備すること

ウィジェットを本番ページに近づける前に、次の4つを済ませてください。それぞれ半日あれば終わりますし、どれかを飛ばすと、公開2週間後に取り下げられるボットになりかねません。

1. 上手に答えさせたい質問を20〜30個挙げる

直近1か月分のチャットとメールのチケットを取り出し、最も多い質問を書き出します。これが後でテストセットになります。Zendeskをお使いなら、チケットのエクスポートのガイドに、会話全体を取り出す方法があります。同じセットが学習用の素材にもなります。

2. 読ませるナレッジを整理する

私が確認したどのベンダーも、おおむね同じ情報源から回答します。ヘルプセンターの記事、クロールしたWebページ、アップロードしたファイル、場合によっては過去のチケットです。落とし穴は、クローラーが旧価格が載った2022年のプレスリリースまで、すべてを読んでしまうことです。AI Webサイトエージェントのあるレビュアーは、G2で次のように率直に述べています。

"With all of the content that Piper crawls in the initial onboarding phase, it makes for a hefty QA experience prior to launch... It would be helpful to have a filter to option to see the content publish date so we can exclude older blogs and press releases that we don't want Piper referencing."

Stephanie C., G2

まずナレッジベース監査を行いましょう。古くなったものは削除または除外し、よく聞かれる質問に必要なのに存在しない記事を3〜4本書きます。

3. 難しい質問の送り先を決める

公開前に送り先を決めます。ヘルプデスクのキュー、共有受信箱、または営業時間中のライブ担当者です。次に、引き継ぎの条件を決めます。よくあるのは、お客様が担当者を求めた場合、質問に合う情報源がない場合、そしてAIだけに任せたくない話題(返金、法務、アカウントセキュリティ)です。これらのルールの書き方は、引き継ぎのベストプラクティスのガイドでさらに解説しています。

4. 約束してはいけないことを書き出す

多くのチームが飛ばすのがこれです。SE Rankingがライブチャットエージェントを設定したとき、方針は明確でした。すぐに、お客様の言語で答え、チームが実現できないこと、たとえばライブ担当者がすぐ対応する、割引する、返金するといったことは約束しない、というものでした。これを書き出すと、AIのハルシネーションへの漠然とした不安が、テスト可能な3〜4個のルールに変わります。

"As a customer, I just want the information I need. While I don't want to talk to a chatbot, I also don't want to talk to a human - and for the same reason: they usually don't have the info I need."

mrandish, Hacker News

このコメントが、方針のすべてです。お客様はボットが嫌いなのではありません。答えが得られないことが嫌いなのです。

導入パスを選ぶ

WebサイトにAIエージェントを置く現実的な方法は5つあり、適切なものは、サイトがWordPressかWebflowかよりも、ヘルプデスクによって大きく変わります。自分の状況にいちばん近いものを選んでください。

セットアップを選ぶと、導入パス、コードの置き場所、そのパスで最もよく起きる落とし穴が表示されます。

パス1:すでにあるチャットウィジェットの中でAIをオンにする

チームがすでにヘルプデスクでチャットに対応しているなら、ここから始めましょう。私は、これが最も過小評価されているパスだと考えています。「出口」の層がすでにできているからです。AIがまず答え、解決できないものは、チームが今使っているのと同じタグとSLAのある同じキューに入ります。

主要な4つのヘルプデスクが、自社のAIエージェントをWebサイトのウィジェットに載せる方法を、それぞれのドキュメントからまとめました。

これらのドキュメントから、セットアップの仕方が変わる点をいくつか挙げます。

• Zendeskは自動解決ごとの課金で、料金ページによるとコミット契約が $1.50、従量課金が $2.00 です。Suite Teamでは月あたりエージェント1人につき5件、Suite Professionalでは10件が含まれます。2026年5月18日以降、Zendeskは結果を解決ティアに分類し、確認された解決のみが課金されます。セットアップの詳細はZendesk AIエージェントのガイドをご覧ください。
• Freshworksは、24時間枠内のすべてのやり取りをセッションとして数えます。注意が必要な点が2つあります。会話開始ワークフローのウェルカムメッセージは、訪問者が返信しなくてもセッションを消費します。また、構築中のエージェントをプレビューするときにもセッションを使います。詳しくはFreddyのセッション消費の内訳をご覧ください。
• Gorgiasがチャット上のAI Agentを使えるのは、Shopifyストアを接続している場合のみで、ドキュメントによればBigCommerce、Magento、WooCommerceのストアは対象外です。AIが完全に解決したチケットには、チケット料金と自動化料金の両方が課金されます(Gorgiasの課金ドキュメントによる)。具体的な数字はGorgias AI Agentの料金の記事をご覧ください。
• HubSpotでは、会話カバレッジの割合を設定して、最初はエージェントが一部のチャットだけを受け持つようにしたり、稼働時間を選んだりできます。これは組み込みのソフトローンチです。残りはBreeze Customer Agentのガイドで解説しています。

このパスでは、標準搭載のエージェントだけが選択肢ではありません。同じウィジェットに別のAIを接続することもできます。SE Rankingがそうしました。eeselはSE Ranking、Planable、SE VisibleのZendeskライブチャットに、プロダクトごとに1エージェントずつ、それぞれ自社のヘルプセンターを元に回答しています。2026年8月8日から9月8日の間に、約2,100件のライブチャットに回答し、約1,260件をチームに引き継ぎ、すべてのチャットが回答または確実な引き継ぎで終わりました。チームはまた、eeselが触れたすべてのチケットに ai_handled タグを付けるよう依頼したため、AIで完結した割合は推測ではなくZendesk上で数えられます。標準搭載のAIを使うか、その上にレイヤーを重ねるかは現実的なトレードオフで、標準搭載かレイヤーかのガイドで解説しています。

パス2と3:スクリプトタグでスタンドアロンのAIチャットウィジェットを追加する

現在チャットを運用していない場合や、ヘルプデスクのチャットがサイトにない場合は、スタンドアロンのウィジェットを追加します。どれも内部の仕組みは同じです。短いスクリプトがベンダーのコードを読み込み、そのコードがバブルを描画してベンダーのサーバーと通信します。

eeselのものは、チャットバブルのドキュメントにあるとおりです。

<script>
(function(){
  var script = document.createElement('script');
  script.src = 'https://cdn.eesel.ai/loader.js';
  script.async = true;
  script.onload = function() {
    if (window.EeselWidgetWithTrigger) {
      window.EeselWidgetWithTrigger({ triggerId: 'YOUR_TRIGGER_ID' });
    } else {
      window.__EESEL_WIDGET_V2_CONFIG__ = { EESEL_TRIGGER_ID: 'YOUR_TRIGGER_ID' };
    }
  };
  document.head.appendChild(script);
})();
</script>

ローダーは非同期なのでページの表示を妨げず、保存した設定は約30秒でライブのバブルに反映されるため、貼り付けるのは1回だけで済みます。Tidioも同じ考え方です。JavaScript1行、またはWordPressプラグイン、またはShopifyアプリで、ドキュメントでは両方ではなく1つの導入方法だけを使うよう案内しています。Voiceflowでは、まずエージェントのバージョンを公開し、その後Widgetタブからスニペットをコピーするよう求められます。

どこに貼り付けるか、そしてプランで許可されているかは、プラットフォームによって異なります。各プラットフォームの公式ドキュメントに基づく設置場所は次のとおりです。

Shopifyについては、もう一度確認する価値があります。Shopifyの開発者向けドキュメントによると、アプリ埋め込みブロックはアプリのインストール後、マーチャントがテーマエディタでオンにするまで無効化されています。この初期設定こそ、ベンダーに「インストールしたのに何も表示されない」と連絡が来る最大の原因です。どのアプリがこれを自動で処理してくれるかは、Shopifyチャットボットアプリのまとめをご覧ください。

スクリプトは読み込まれるのに、チャットが動かないとき

サイトがContent Security Policyヘッダーを送信している場合、貼り付けたウィジェットが、製品が壊れているように見える形で失敗することがあります。MDNはこれを3つのCSPルールに分けて説明しています。script-src はスクリプトが読み込まれるかどうか、connect-src はベンダーのサーバーに到達できるかどうか、frame-src はiframeのチャットウィンドウが開けるかどうかを決めます。connect-src だけが抜けていると、バブルは開くのに、いつまでも答えが返りません。eeselの場合、ドキュメントではスクリプトと接続の両方で https://cdn.eesel.ai を許可するよう案内しています。

パス4と5:ヘルプデスクがない場合、またはコードに触れない場合

多くのチームが行き詰まる状況が2つあります。引き継ぎ先のヘルプデスクがない場合と、Webサイトが別の人の管理下にあり、変更に1か月かかる場合です。

前者には、出口にヘルプデスクを必要としないウィジェットを選びます。eeselのバブルは、メールで引き継ぐことも、ヘルプデスクがあればそこにチケットを作成して引き継ぐこともでき、ルールは普通の言葉で設定できます(「返金に触れたら必ず担当者にエスカレーションする」など)。引き継ぐ際は、訪問者の名前とメールアドレスを尋ね、チャットの要約を最初のメッセージとしてチケットを作成し、タグを付けます。

後者は、最初はサイトに一切触れずに進めます。公開チャットリンクは、ベンダーがホストするチャットページで、ナビゲーション、フッター、ヘルプセンターからリンクします。eeselのものはサインインがなく、リンクを知っていれば誰でもチャットできます。公開されているサポート情報には問題ありませんが、アカウント固有の内容には向きません。インライン埋め込みはその中間です。iframe1つ(デフォルトは420×600ピクセル)を、お問い合わせページなど1ページにだけ貼り付けます。eeselのドキュメントによると、保存時にiframeを削除するページエディタがあるため、その場合はページテンプレートに貼り付けてください。

パス6:開発者向けルート、CLIとAPI

サイトがカスタムアプリの場合や、セットアップをコードで管理したい場合は、すべてのページではなく、アプリのルートレイアウトでスクリプトを1回だけ読み込みます。eeselのドキュメントでは、Next.jsなら app/layout.tsx で next/script を使う方法が示されています。セルフホストのWordPressでは、WordPress関数の wp_enqueue_script に in_footer と defer を指定すると、ウィジェットがページをブロックしません。

さらに興味深い変化は、セットアップ自体にもうダッシュボードが要らないことです。eesel CLI(@eesel/cli、Node 18.17以上)は、ダッシュボードで設定するのと同じエージェントを、ターミナルから操作するものです。人が実行することも、スクリプトで自動化することもでき、すべてのコマンドがJSONを出力するため、Claude Code、Cursor、Codexのようなコーディングエージェントがセットアップ全体を実行することもできます。

npx @eesel/cli init chat-bubble --site https://your-site.com   # no account needed
eesel login                                                     # keep the workspace
eesel files upload ./refund-policy.pdf
eesel chat "what's our refund policy?"
eesel chat "run a simulation on our last 100 tickets and tell me what you would have got wrong"

init chat-bubble は、エージェントを選択または作成し、チャットバブルのチャネルを追加し、埋め込みスニペットとホスト型のテスト用リンクを出力します。匿名のワークスペースには、7日間有効な$5分の利用枠が付きます。コマンドは再実行しても安全で、書き込みは --dry-run に対応し、セットアップのコマンドは無料です(課金されるのはチャットだけです)。正直な制限が2つあります。バブルのスタイル設定と引き継ぎルールの記述にはまだコマンドがないため、ダッシュボードのチャットで行います。また、このワークスペースはMCPサーバーでもあり、eesel mcp token で、そのまま使える claude mcp add の行が出力されます。ウィジェットなしでAIを使いたい場合は、ヘッドレスサポートのガイドでそのパターンを解説しており、AIエージェントCLIの記事ではベンダー間でCLIを比較しています。

ステップバイステップ:WebサイトにAIエージェントを追加する

どのパスを選んでも、手順は同じです。以下は私が踏む順序で、設置はあえて終盤に置いています。

ステップ1:ナレッジをつなぐ

エージェントを、ヘルプセンター、お客様の質問に答える公開ページ、ポリシーが書かれたPDFやドキュメントに向けます。上限はベンダーごとに異なります。Freshworksはエージェントあたり10 URL、1サイトあたり最大3,000ページまで、HubSpotはドメイン内で最大5,000 URLまでクロールでき、Tidioの優先ページスキャンは100ページで止まります。HubSpotは、非公開の情報源は引用されなくても、その内容が回答に表れる可能性があるとも警告しているため、社内ドキュメントをアップロードする前によく考えてください。さらに詳しくは、AIサポートエージェントの学習のガイドをご覧ください。

ステップ2:照会させたいシステムをつなぐ

ナレッジは返品ポリシーを説明できますが、お客様に注文の所在を伝えられるのは連携だけです。オンラインで販売しているならストアを接続して、エージェントが実際の注文、在庫、価格を読めるようにします。SaaSなら、アカウントの状態を考えましょう。最初は読み取り専用にします。eesel自身のドキュメントでも、返金、キャンセル、費用が発生するものは、最初は承認の後ろに置くよう勧めています。WISMO自動化は、定番の最初のユースケースです。

ステップ3:ルールと引き継ぎを書く

先ほどの「約束しないことのリスト」を指示として書き、次に出口を設定します。引き継ぎを誰が受け、どのチャネルを通り、その間エージェントが何と言うかです。

ここで取り上げたどのベンダーも、担当者を求められればそのまま引き継ぎます。違いはデフォルトにあります。Gorgiasには、怒りや法的な脅しなどに対する、オフにできない組み込みの引き継ぎシグナルがあります。TidioはLyroがすぐに引き継いだ場合、Lyroの枠から差し引きません。Freshworksはセッションを使い切るとエージェントを止め、チャットをライブ担当者に引き渡します。ご自身のものでぜひ確認したいのは、待っている間に訪問者が目にする文言です。メールアドレスを集めないまま「後ほどご連絡します」と表示するのは、行き止まりだからです。

"If the only "customer support" a company offers is to talk to a chatbot, I think of that as the exact same thing as not having customer support at all, even if the chatbot can be talked into letting me talk to a human."

JohnFen, Hacker News

ステップ4:誰かに見せる前に、実際の質問でテストする

先ほどの20〜30個の質問に加えて、厄介なものも試します。怒ったメッセージ、2つの質問が1つになったもの、販売終了した製品についての質問です。FreshworksのEvaluate agentは、1バッチあたり最大50件のクエリを実行でき、解決済みの過去の会話をインポートできます。eeselのシミュレーションは、実際の過去のチケットに対してエージェントを動かし、各回答を採点し、指示の変更案を提案します。どちらの場合も、間違った回答は自分の目で読んでください。より詳しいテスト計画は、AIエージェントのテストのガイドにあります。

探すべき失敗は、自信たっぷりの間違いです。

"The problem with 'hallucination' is quite apparant and the bot WILL generate a totally wrong answer with that greatest of eloquence and confidence, which might (rightfully so) throw some people off."

Rik H., Capterra

ステップ5:ウィジェットを設置する

ここでスニペットを貼り付けます。上のウィジェットで選んだパスを使ってください。モバイルで確認し、Cookieバナーやカート追加の固定バーに重なっていないか確認し(eeselのバブルには、まさにこのための下方向のオフセットがあります)、低速な回線でも確認します。遅いウィジェットは、間違った回答と同じくらい信頼を損ないます。先の67項目のトライアルがそれを示しました。

ステップ6:ゆっくり広げる

初日からサイト全体でオンにしないでください。段階的に広げ、現在の段階で回答が安定してから次に進みます。

ツールによって、これをサポートする方法は異なります。HubSpotのカバレッジの割合と稼働時間、Tidioの担当者がオフラインのときだけ答えるオプション、eeselのページ単位のスニペット(出したいページにだけ貼る)は、いずれも小さく始められます。数週間のサポートパイロットは、最初の段階として妥当です。

ステップ7:正しいものを測定する

3つの数字を追います。AIが引き継ぎなしで回答した頻度、引き継ぎが実際に必要で実行された頻度、そしてお客様がチャットにつけた評価です。最初の数字には注意が必要です。不満のまま閉じられたチャットは解決ではありません。だからこそZendeskは今、確認された解決のみを課金し、SE Rankingはすべてのチャットに役に立った・立たなかったのタグを付けています。ご自身のヘルプデスクでこれらを定義する方法は、パイロットのスコアカードとAIサポートの指標のガイドで解説しています。

WebサイトにAIエージェントを追加するときのよくある間違い

これらのほとんどは複数回見てきたもので、AIモデルの話ではありません。

• メールアドレスを集めるだけのボットを出す。 ウィジェットが最初にすることが連絡先の入力依頼と返信の約束なら、それは顔のついたお問い合わせフォームです。先に答え、詳細は引き継ぎのときだけ集めましょう。
• 何でも読ませる。 古いブログ記事、販売終了した製品、プレスリリースが回答に混ざります。公開前に除外してください。
• 出口がない。 上のHacker Newsのスレッドは例外ではありません。数百万人の顧客を持つある小売事業者は、「サポート担当者が人間ではないという理由で、アカウントを解約する人がいた」と書き、サイトのチャットボットを撤去しました。目に見えて機能する「担当者と話す」選択肢が、AIエージェントをそうした話にしないための鍵です。
• 1ページに2つのバブル。 既存のヘルプデスクのチャットの隣にAIウィジェットを追加すると、全員が混乱します。AIを既存のウィジェットに入れる(パス1)か、置き換えるかのどちらかにしましょう。
• 実績の前に権限を与える。 あるHacker Newsのコメントが、その不安をうまく言い表しています。「ハルシネーションを起こして、お客様に永久無料サービスを与えてしまったらどうする?」答えは、アクションをなくすことではなく、承認つきで範囲を限定したアクションにすることです。
• 設置の細部を忘れる。 オフのままのShopifyアプリ埋め込み、再公開していないWebflowサイト、スニペットを消したWixのドメイン変更、ベンダーをブロックするCSPルール。どれもお客様にはエラーが表示されず、ただバブルがそこにないだけです。

さらに長いリストは、AIチャットボットの問題とAIのハルシネーションの記事をご覧ください。

WebサイトでAIエージェントを運用するコスト

設置はほぼどこでも無料です。支払うのはAIの働きに対してで、その数え方はベンダーごとに異なります。見出しの価格よりも単位のほうが重要です。セッション単位で課金するベンダーは何も進まなかったチャットにも課金しますが、解決単位で課金するベンダーはそうではありません。

その下にある席コストも忘れないでください。ZendeskのAI agentsは年払いでエージェント1人あたり月額 $55 からのSuiteプラン上にあり、HubSpotのCustomer AgentはService Hub Professional(席あたり月額 $90 から、別途 $1,500 のオンボーディング費用)が必要で、FreshworksのチャットAIエージェントにはFreshdesk Omniプランが必要です。より詳しい比較は、チャットボットのコストのガイドと、Lyro料金、Voiceflow料金の記事が、それぞれ内訳を解説しています。

eeselをWebサイトに設置する方法

eeselは、サポート向けに採用するAIチームメイトで、Webサイト上ではチャットバブル、1ページへのインラインチャット、またはホスト型のチャットリンクとして現れ、いずれも同じナレッジを持つ同じエージェントが動きます。ヘルプセンター、Webサイト、Google Drive、Notion、Confluence、Shopify、過去のチケットから回答し、どのヘルプデスクとも、ヘルプデスクがなくても使えます。

実際のサイトでは次のようになっています。

• **SamCart**は、Freshdeskのメールチケット用に1つ、Webサイトのチャットバブル用に別の1つのエージェントを運用し、それぞれに固有の挨拶文とトーンを持たせ、どちらも約280件のヘルプセンター記事から回答しています。チャットは回答の前に名前とメールアドレスを尋ね、チームがフォローアップできるようにしています。
• **BEAUTEK**は、beautek.deでドイツ語のKI-Chatを運用し、製品と注文の質問に答え、AIによる回答であることをはっきり伝え、重要な内容にはチームの電話番号を案内します。ある月には、77件のWebサイトチャットに回答し、20件のZendeskチケットを作成し、その大半は営業リードでした。
• **ClutchLoop**は、エージェントをLoopyと名付けました。clutchloop.comで注文状況、返品、商品の質問に答え、Shopifyで実際の価格と在庫を照会し、チャットに担当者が必要なときはGorgiasのチケットを作成します。

料金については、eeselは月額固定の1本の価格で、メッセージが何往復してもチャット1回が1クレジット、プランは500クレジットの $299 から、席ごとの料金やプラットフォーム料金はありません。無料トライアルは、カード不要で7日間・100クレジットです。

向かないケースもあります。ZendeskやFreshdesk自身のAIで満足していて基本機能だけで足りるなら、標準搭載のエージェントのほうが請求が1つにまとまります。eeselのバブルから別のライブチャットウィジェットへの引き継ぎが使えるのは、Zendesk MessengerまたはFreshchatのみです。SOC 2 Type II監査は進行中で、観察期間は2026年10月1日に始まりました。SOC 2 Type II認証を受けた処理事業者を使用しており、お客様のデータでモデルを学習させることはありません。

eeselでWebサイトにAIエージェントを追加する

すでに書いてあることから回答し、それ以外はチャットの要約付きでチームに引き継ぐエージェントをサイトに置きたいなら、eeselのチャットバブルはスクリプトタグ1つで、お客様の目に触れる前にプレビューリンクで試せます。ヘルプセンターをつなぎ、先月の質問をシミュレーションで再生し、それからスニペットを貼り付けてください。チームがすでにZendeskやFreshdeskを中心に動いているなら、SE Rankingのように、そのチャットの中に入れることもできます。

eeselを7日間無料で試すか、デモを予約して、ご自身のサイト上でのセットアップをご覧ください。