ものしりAI
導入ガイド

BASEにチャットボットを設置する方法|HTMLタグ管理Appで無料導入【2026年版】

2026年9月5日ものしりAI編集部

BASEにチャットボットを設置する方法 HTMLタグ管理Appで無料導入する手順

BASEでショップを運営していると、届く問い合わせの中身はだいたい決まってきます。「送料はいくらですか」「返品できますか」「このサイズだと大きいですか」。同じ質問に何度も返信していると、その時間だけで一日が終わります。

しかも問い合わせが来るのは、たいてい営業時間外です。返信が翌日になると、その間にお客様は別のショップで買っています。返信を待たせずにその場で答える仕組みがあれば、応対の手間と機会損失の両方が減ります。

この記事では、BASEのショップにAIチャットボットを設置する手順を、実際の管理画面の流れに沿って説明します。無料でどこまでできるのか、どの資料を用意すれば答えられるようになるのか、設置したのに表示されないときに何を見るのかまで、ひととおり扱います。


この記事で分かること

  • BASEにチャットボットを置く方法が「HTMLタグ管理 App」ひとつに絞られる理由
  • 4ステップの具体的な設置手順(コード編集なし)
  • 無料のまま運用できる範囲と、有料が必要になる分岐点
  • 送料・返品・サイズの質問に答えさせるために、最初に入れるべき資料
  • 「設置したのに出てこない」ときに見る場所

1. BASEでの設置先は「HTMLタグ管理 App」

WordPressのように、テーマのPHPファイルを直接編集する、という選択肢はBASEにはありません。BASEはショップのHTML構造を運営側が管理しているため、外部のスクリプトを差し込む窓口はAppとして正式に用意されたものを使うのが前提になります。

その窓口が「HTMLタグ管理 App」です。BASEの管理画面のAppsから無料でインストールでき、ショップの全ページに任意のHTMLタグを出力できます。チャットボットに限らず、アクセス解析タグや広告タグを入れるときにも使う、標準的な仕組みです。

この構造には、実は運用上の利点があります。

  • デザインテーマを変更しても設定が消えない。タグはテーマとは別の場所に保存されるため、ショップの見た目を作り直しても、チャットボットはそのまま残ります
  • どのページに出すかを1か所で管理できる。商品ページごとに貼って回る必要がありません
  • 設置に必要なのはコピー&ペーストだけ。HTMLを自分で書く場面はありません

逆に言えば、HTMLタグ管理 Appを入れずにBASEへチャットボットを設置する方法は、実質的にありません。ここを最初に押さえておけば、あとの手順は短いです。

図解 BASEでチャットボットを設置する経路 HTMLタグ管理Appがテーマとは独立してショップ全ページにタグを出力する


2. 設置手順(4ステップ)

ここでは、私たちが提供しているものしりAIを例に、実際の流れを説明します。所要時間は5分程度で、BASE側の作業はすべて管理画面内で完結します。

ステップ1: 埋め込みコードを取得する

まずチャットボット側の準備です。ものしりAIにアカウントを作り、管理画面でウィジェットを開いて「埋め込みコード」をコピーします。形はこのような1行のスクリプトタグです。

<script async src="https://monoshiri.ai/widget/embed.js" data-api-key="(発行された自分のキー)" data-api-url="https://api.monoshiri.ai"></script>

設置先のショップのドメインを事前に登録する必要はありません。base.shopのサブドメインでも、独自ドメインを設定したショップでも、同じコードがそのまま動きます。

ステップ2: HTMLタグ管理 Appをインストールする

BASE管理画面の「Apps」から「HTMLタグ管理」を検索し、インストールして有効化します。BASE側の利用料はかかりません。

ステップ3: カスタムタグを新規追加する

インストールしたHTMLタグ管理 Appを開き、「タグを新規追加」から「カスタムタグ(自由記入)」を選びます。タグ名は後から自分が判別できればよいので、「ものしりAI お問い合わせウィジェット」のように分かりやすい名前を付けておきます。

複数のタグを運用していくと、どれが何のタグか分からなくなります。ここで名前を雑に付けないことが、地味に効きます。

ステップ4: 貼り付けて保存する

「タグ」欄に、ステップ1でコピーしたスクリプトタグをそのまま貼り付けます。表示するページは通常「全ページ」で問題ありません。商品ページだけに出したくなる気持ちは分かりますが、送料や返品の質問はトップページやカート前でも出るため、最初は全ページで様子を見るほうが取りこぼしが減ります。

保存したらショップを開いて、右下にチャットボタンが出ているか確認します。これで設置は完了です。

より詳しい要件と画面つきの手順はBASE連携ページにまとめています。BASE以外のサイトも含めたウィジェット全般の考え方はチャットウィジェット導入ガイドを参照してください。


3. 無料でどこまでできるのか

BASEにチャットボットを入れるとき、費用は2か所に分かれます。

BASE側: HTMLタグ管理 Appは無料です。スタンダードプラン(月額固定費なし)のままでも使えるため、BASEの有料プランに上げる必要はありません

チャットボット側: ここが実質的な費用です。無料プランの有無と上限がサービスによって違います。

参考として、ものしりAIの場合の数字を挙げます。

Free Light Standard Pro
月額(税込) 0円 2,980円 7,980円 29,800円
AIの回答数(月間) 150回 1,000回 3,000回 20,000回
フォルダ数 1 5 10 30
1フォルダあたりファイル数 30件 100件 300件 300件
チャットウィジェット 1つ(月150回) 1つ 1つ 1つ

※ 2026年9月時点。最新の内容は料金プランをご確認ください。

無料のままで足りるケース

  • 立ち上げ直後で、月の訪問者がまだ多くないショップ
  • そもそも問い合わせの母数が少なく、まず反応を見たい段階
  • セール期間だけ試してみたい、といった限定的な使い方

有料が必要になる分岐点

  • 月150回を超えて質問される。1日5回のペースで到達します
  • 商品カテゴリごとに資料を分けたい(無料プランはフォルダ1つまで)
  • 上限に達すると質問機能が一時停止するため、セール中に止まると困る

正直に言うと、チャットボットが機能し始めると無料枠は早く尽きます。無料プランは「自分のショップでちゃんと使えるか確かめる」ためのものと考え、月150回に届きそうなら有料前提で設計するのが現実的です。逆に、数か月経っても上限に届かないなら「問い合わせがそもそも少ない」という事実が分かったことになり、それはそれで有用な情報です。

「無料」の中身の分け方は、WordPressにチャットボットを無料で入れる方法で3つの型に整理しています。考え方はBASEでもそのまま使えます。


4. 送料・返品・サイズに答えさせるための資料

設置しただけでは、チャットボットは何も答えられません。AIが読む資料の質が、そのまま回答の質になります

シナリオや想定問答の分岐を作る必要はありません。テキストやPDFをアップロードすると、AIがその内容をもとに回答します。ECショップなら、最初に入れるべきは次の5つです。

  1. 送料表 — 地域別・重量別の料金、送料無料の条件、複数注文時の扱い
  2. 返品・交換ポリシー — 受付期間、送料の負担、対象外の商品
  3. 配送日数の目安 — 発送までの日数、地域別の到着目安、繁忙期の扱い
  4. サイズ表・素材表記 — 実寸、着用感、洗濯方法
  5. 特定商取引法に基づく表記 — すでにショップに掲載しているページをそのままコピーすれば十分です

コツは、すでにショップページに書いてある内容をそのままファイルにすることです。新しく文章を書き起こす必要はありません。書き起こそうとすると、それだけで導入が止まります。

「サイズ感は?」のような曖昧な質問にも答えさせたい場合は、商品説明に書いている「ゆったりめの作りです」といった表現も一緒に入れておくと、AIがその文脈を拾います。


5. つまずきポイント

チャットボタンが表示されない

見る順番はこれです。

  1. HTMLタグ管理 Appでタグが有効になっているか。保存しただけで有効化していないケースが最も多いです
  2. チャットボット側でウィジェットが公開状態になっているか。管理画面で下書きのままだと、コードを貼っても何も出ません
  3. ブラウザのキャッシュ。スーパーリロード(Windows: Ctrl+F5 / Mac: Command+Shift+R)で再確認します

図解 BASEでチャットボタンが表示されないときの切り分け手順

BASEショップアプリ(スマホアプリ)内では表示されないことがある

BASEには購入者向けのスマホアプリがあり、その中でショップを表示することができます。アプリ内の表示はBASE側の仕様に依存するため、外部スクリプトであるチャットウィジェットは表示されない場合があります。ブラウザで開いたショップページでは通常どおり動作します。

アプリ経由の流入が多いショップでは、チャットボットだけに問い合わせ導線を寄せず、従来のお問い合わせフォームも残しておくのが安全です。

右下でボタンが重なる

BASEのショップには、カートボタンやAppが追加する各種フローティング要素が並ぶことがあります。右下は混みやすい場所です。重なる場合は、チャットボット側の設定でボタンの表示位置を左下に変更すると解決します。ものしりAIでは管理画面から位置を切り替えられます。

複数のチャットボタンを同時に出すのは、訪問者が混乱するので避けてください。

スマホで見え方が変わる

多くのウィジェットは、スマートフォンでは全画面表示に切り替わります。BASEのショップはスマホからの購入比率が高いため、設置後に必ず実機のスマートフォンで開いて確認してください。PCのブラウザ幅を縮めるだけでは気づけない崩れがあります。

決済やカート操作はできない

チャットボットができるのは、資料に基づいて質問に答えることです。注文の確定・カートへの追加・決済の処理といったショップの操作は行いません。「注文をキャンセルしたい」のような依頼には、有人の問い合わせ窓口へ案内する形になります。ウィジェットの設定で問い合わせフォームのURLを登録しておくと、AIが答えきれないときの逃し先が用意できます。


6. 設置してからが本番

チャットボットは「置いたら終わり」の道具ではありません。効果が出るかどうかは、設置後に会話ログを見るかどうかでほぼ決まります。

ものしりAIでは管理画面で、訪問者の質問・AIの回答・評価を確認できます。ここで見るべきは、うまく答えられた会話ではなく、答えられなかった会話です。それはそのまま「ショップに書かれていない情報」のリストになります。

実際によくあるのは、次のようなパターンです。

  • 送料無料の条件が商品ページに書いていない → 送料表に条件を追記する
  • 「明日届きますか」という質問が多い → 発送スケジュールの資料を追加する
  • 特定の商品のサイズ質問が集中する → その商品ページの説明文自体を直す

3つ目が重要です。チャットボットに集まる質問は、ショップページの改善リストでもあります。問い合わせを減らす一番効く手は、そもそも聞かれない状態を作ることです。


まとめ

  • BASEでの設置先は「HTMLタグ管理 App」ひとつ。BASE側の利用料はかからず、スタンダードプランのままで使える
  • 手順は埋め込みコード取得 → App追加 → カスタムタグ新規追加 → 貼り付けて保存の4ステップ。コード編集は不要で5分程度
  • タグはテーマとは別に保存されるため、デザインテーマを変えても設定が消えない
  • 無料プランの分岐点はほぼ月間の回答回数。ものしりAIのFreeは月150回で、1日5回のペースで到達する
  • 回答の質は入れる資料の質で決まる。送料表・返品ポリシー・配送日数・サイズ表・特商法表記を、既存ページからコピーして入れる
  • 表示されないときは、タグの有効化 → ウィジェットの公開状態 → キャッシュの順に見る
  • BASEショップアプリ内では表示されない場合があるため、従来の問い合わせ導線も残す
  • 設置後は会話ログを見て、答えられなかった質問を資料とショップページに反映する

この記事をシェア

関連記事

ものしりAIを無料で試してみませんか?

ドキュメントをアップロードするだけで、AIに質問できる環境が作れます。ユーザー数無制限の無料プランで、まずはお試しください。

クレジットカード不要 / 最短1分で利用開始