接客AIをWebサイトに埋め込む方法：3ステップで完了する設置ガイド

接客AIを導入したいが、Webサイトへの埋め込み方法がわからない。技術的な知識がなくても、簡単に設置できる方法を知りたい。JSスニペットやiframeなど、複数の方法があってどれを選べば良いか迷っている。

実際、接客AIをWebサイトに埋め込む方法は、いくつかのパターンがあります。それぞれの特徴を理解し、自社のWebサイト構成に適した方法を選ぶことで、スムーズに導入できます。

この記事では、接客AIをWebサイトに埋め込む3つの主要な方法と、それぞれの実装手順、カスタマイズ方法、トラブルシューティングまで、初心者の方にもわかりやすく解説します。

この記事でわかること

3つの主要な埋め込み方法: JSスニペット、iframe、リンク遷移の特徴と使い分け
実装手順: 各方法の具体的なコード例と設置手順
カスタマイズ方法: ボタンのデザインや位置、動作のカスタマイズ
トラブルシューティング: よくある問題と解決方法
ミーアstoreでの実装: ミーアstore（mia-kit-store-app）での具体的な手順

接客AIのWeb埋め込み方法：3つの主要パターン

接客AIをWebサイトに埋め込む方法は、主に以下の3つのパターンがあります。それぞれの特徴と適した用途を理解することで、最適な方法を選べます。

1. JSスニペット埋め込み方式

特徴:

接客AIサービス提供側が用意したJavaScriptコードを、WebサイトのHTMLに埋め込む方式
埋め込むだけで、自動的にチャットボタンやウィジェットが表示される
カスタマイズ性が高く、ボタンのデザインや位置を自由に調整できる

適した用途:

既存のWebサイトに手軽に追加したい場合
チャットボタンのデザインを自社サイトに合わせたい場合
複数のページに同じ接客AIを設置したい場合

実装例:

<!-- HTMLの<head>タグ内に追加 -->
<script src="https://example.com/chatbot-widget.js"></script>
<script>
  window.ChatbotWidget.init({
    apiKey: 'your-api-key',
    position: 'bottom-right',
    theme: 'light'
  });
</script>

2. iframe埋め込み方式

特徴:

接客AIのチャット画面を、iframeタグで別ページとして埋め込む方式
既存のWebサイトのデザインに影響を与えにくい
セキュリティ面で、親ページと接客AIページを分離できる

適した用途:

既存のWebサイトのデザインを変更したくない場合
接客AIの画面を特定のエリアに固定表示したい場合
セキュリティを重視したい場合

実装例:

<!-- 埋め込みたい場所に追加 -->
<iframe 
  src="https://example.com/chat?tenant=your-tenant-id"
  width="100%"
  height="600"
  frameborder="0"
  allow="microphone"
  style="border: none;"
></iframe>

3. リンク遷移方式

特徴:

接客AIのチャット専用ページへのリンクを設置する方式
実装が最も簡単で、HTMLの知識がなくても設置できる
既存のWebサイトへの影響が最小限

適した用途:

最も簡単に導入したい場合
既存のWebサイトの構造を変更したくない場合
接客AIを別ページで提供したい場合

実装例:

<!-- ボタンやリンクとして設置 -->
<a href="https://example.com/chat?tenant=your-tenant-id" 
   target="_blank" 
   class="chat-button">
  AIに質問する
</a>

<!-- または、JavaScriptで制御 -->
<button onclick="window.open('https://example.com/chat?tenant=your-tenant-id', '_blank')">
  AIに質問する
</button>

各方式の比較と選び方

3つの方式を比較すると、以下のような特徴があります。

方式	実装の簡単さ	カスタマイズ性	既存サイトへの影響	セキュリティ
JSスニペット	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
iframe	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
リンク遷移	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

選び方のポイント:

最も簡単に導入したい: リンク遷移方式
デザインをカスタマイズしたい: JSスニペット方式
既存サイトへの影響を最小限にしたい: iframe方式またはリンク遷移方式

実装手順：ステップバイステップガイド

ステップ1: 接客AIサービスの設定を確認

埋め込みを始める前に、以下の情報を確認します：

APIキーまたはテナントID: 接客AIサービスから提供される識別子
埋め込み用URL: チャット画面のURL
カスタマイズオプション: ボタンのデザイン、位置、テーマなどの設定項目

ステップ2: HTMLにコードを追加

選択した方式に応じて、HTMLにコードを追加します。

JSスニペット方式の場合:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品ページ</title>
  <!-- 接客AIのJSスニペットを追加 -->
  <script src="https://example.com/chatbot-widget.js"></script>
  <script>
    window.ChatbotWidget.init({
      apiKey: 'your-api-key',
      position: 'bottom-right',
      theme: 'light',
      buttonText: 'AIに質問する'
    });
  </script>
</head>
<body>
  <!-- 既存のコンテンツ -->
</body>
</html>

iframe方式の場合:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品ページ</title>
</head>
<body>
  <!-- 既存のコンテンツ -->
  
  <!-- 接客AIを埋め込み -->
  <div class="chat-container">
    <iframe 
      src="https://example.com/chat?tenant=your-tenant-id"
      width="100%"
      height="600"
      frameborder="0"
      allow="microphone"
      style="border: none; border-radius: 8px;"
    ></iframe>
  </div>
</body>
</html>

リンク遷移方式の場合:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品ページ</title>
  <style>
    .chat-button {
      display: inline-block;
      padding: 12px 24px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      font-weight: bold;
    }
    .chat-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <!-- 既存のコンテンツ -->
  
  <!-- 接客AIへのリンクを追加 -->
  <a href="https://example.com/chat?tenant=your-tenant-id" 
     target="_blank" 
     class="chat-button">
    AIに質問する
  </a>
</body>
</html>

ステップ3: 動作確認とカスタマイズ

コードを追加したら、以下の点を確認します：

表示確認: チャットボタンやウィジェットが正しく表示されるか
動作確認: クリックしたときにチャット画面が開くか
デザイン確認: 既存のWebサイトのデザインと調和しているか
レスポンシブ確認: スマートフォンやタブレットでも正しく表示されるか

必要に応じて、デザインや位置を調整します。

カスタマイズ方法

ボタンのデザインを変更する

JSスニペット方式の場合:

window.ChatbotWidget.init({
  apiKey: 'your-api-key',
  position: 'bottom-right',
  theme: 'light',
  buttonText: 'AIに質問する',
  buttonColor: '#007bff',
  buttonSize: 'large'
});

リンク遷移方式の場合:

<style>
  .chat-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff; /* 背景色 */
    color: white; /* 文字色 */
    text-decoration: none;
    border-radius: 4px; /* 角丸 */
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影 */
  }
  .chat-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
  }
</style>

位置を変更する

JSスニペット方式の場合:

window.ChatbotWidget.init({
  apiKey: 'your-api-key',
  position: 'bottom-left', // 'bottom-right', 'top-left', 'top-right' など
});

CSSで位置を調整する場合:

.chat-button {
  position: fixed;
  bottom: 20px; /* 下からの距離 */
  right: 20px; /* 右からの距離 */
  z-index: 1000; /* 他の要素の上に表示 */
}

トラブルシューティング

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

原因と解決方法:

JavaScriptが無効になっている: ブラウザの設定でJavaScriptを有効にする
コードの記述ミス: HTMLの構文エラーを確認する
外部スクリプトの読み込みエラー: ネットワーク接続やURLを確認する

チャット画面が開かない

原因と解決方法:

ポップアップブロッカー: ブラウザのポップアップブロッカーを無効にする
URLの誤り: 埋め込み用URLが正しいか確認する
APIキーやテナントIDの誤り: 設定値を再確認する

デザインが崩れる

原因と解決方法:

CSSの競合: 既存のCSSと競合していないか確認する
レスポンシブ対応: モバイル端末での表示を確認する
z-indexの設定: 他の要素と重なっていないか確認する

ちなみにミーアstoreの場合は

ミーアstore（mia-kit-store-app）では、リンク遷移方式を採用しています。既存のWebサイトに、接客AIコンシェルジュのチャットページへのリンクを設置するだけで、簡単に導入できます。

ミーアstoreでの実装手順

管理画面でチャットURLを確認
- 管理画面にログインし、チャットページのURLを確認します
- URLの形式: https://store-app.example.com/ja/chat?agent=your-agent-id
Webサイトにリンクを追加
- 既存のWebサイトの適切な場所に、チャットページへのリンクを追加します
- ボタンやテキストリンクとして設置できます
動作確認
- リンクをクリックして、チャットページが正しく開くか確認します

管理画面での設定

ミーアstoreの管理画面では、以下の設定が可能です：

エージェント設定: AIコンシェルジュの「顔つき」と「話し方」を設定
画像・動画管理: お客様に見せるトップ画面のビジュアルを設定
ドキュメント管理: AIが読むマニュアルやQAを設定

詳細な設定方法については、以下の記事を参考にしてください：

接客AIコンシェルジュ管理画面の使い方：ログインから基本設定まで

まとめ

接客AIをWebサイトに埋め込む方法は、主に3つのパターンがあります。それぞれの特徴を理解し、自社のWebサイト構成に適した方法を選ぶことで、スムーズに導入できます。

JSスニペット方式: カスタマイズ性が高く、柔軟な設定が可能
iframe方式: 既存サイトへの影響が少なく、セキュリティ面で有利
リンク遷移方式: 実装が最も簡単で、初心者でも導入しやすい

実装時は、動作確認とカスタマイズを丁寧に行い、既存のWebサイトのデザインと調和させることが重要です。トラブルが発生した場合は、よくある問題と解決方法を参考に、段階的に原因を特定しましょう。

接客AIのWeb埋め込みを検討している場合は、まず自社のWebサイト構成を確認し、最適な方式を選ぶことから始めましょう。関連記事として、「接客AIとは？導入前に知っておくべき基礎知識」「接客AIの選び方：5つのチェックポイント」「接客AIの導入プロセス：準備から運用開始までの実践ガイド」も参考にしてください。

最終更新日：2025年12月24日

参考資料・出典

[1] Web埋め込みのベストプラクティス
Web標準化推進協議会. https://www.w3.org/

接客AIをWebサイトに埋め込む方法：3ステップで完了する設置ガイド