---
title: "AI エージェントを Web サイトに埋め込む"
description: "公開アクセスを有効にし、回答モードを選択してチャットウィジェットの外観をカスタマイズし、ネットワーク設定を済ませたうえで、JavaScript ファイルをダウンロードしてチャットウィンドウを Web ページに埋め込みます"
canonical_url: "https://docs.ardge.com/ja/knowledge/argent/embed-on-website"
---
# AI エージェントを Web サイトに埋め込む

> 公開アクセスを有効にし、回答モードを選択してチャットウィジェットの外観をカスタマイズし、ネットワーク設定を済ませたうえで、JavaScript ファイルをダウンロードしてチャットウィンドウを Web ページに埋め込みます

## 概要

公開アクセスを有効にすると、AI エージェントをチャットウィジェットとして Web サイトに埋め込み、訪問者がログインせずにそのエージェントとチャットできるようになります。

埋め込みは、Web サイトのページで JavaScript ファイル（画面上では argent-widget.js と表記）を読み込むことで行います。このファイルは ARGENT からダウンロードするもので、ダウンロード時点で保存されている外観とメッセージの設定、および ARGENT サービスに接続するための URL が組み込まれています。

この記事では、公開アクセスの有効化、回答モードの選択、ウィジェットの外観の設定、ネットワーク設定、ファイルのダウンロード、埋め込みコードの貼り付けまでの流れを説明します。

## この記事で学べること

- エージェントごとに公開アクセスを有効にし、訪問者が質問したときの回答モードを決める
- チャットウィジェットのタイトル、メッセージ、色、アイコンをカスタマイズする
- ARGENT API ホストと、埋め込みを許可するドメインのホワイトリストを設定する
- チャットウィジェットの JavaScript ファイルをダウンロードし、チャットウィンドウを Web ページに埋め込む

**所要時間: 約 20 分**（ルーターまたはファイアウォールのポートフォワーディング設定を除く）

## 対象バージョン

- ARGENT 1.0.1 以降

## 事前準備

- このエージェントを作成し、動作を確認済みであること。[初めての AI エージェントを作成する](https://docs.ardge.com/ja/knowledge/argent/first-ai-agent) を参照してください
- ルーターまたはファイアウォールの設定権限があり、ポートフォワーディングのルールを追加できること
- Web サイトの静的アセットディレクトリへのアップロード権限と、対象ページの HTML の編集権限があること

## ステップ 1: 公開アクセスを有効にする

1. **AI エージェント** ページに移動し、対象のエージェントのカードをクリックします
2. **埋め込みウィジェット** タブに切り替えます
3. **公開アクセス** のトグルスイッチをオンにします

有効にすると、ページの下部に **回答モード**、**チャットウィジェットの外観**、**埋め込みチャットウィンドウ** の 3 つのセクションが表示されます。**埋め込みチャットウィンドウ** セクションには、このエージェントの **エージェント ID** が表示されます。

<warning>

**公開する前に、ナレッジソースを公開しても問題ないか確認してください：**

公開アクセスを有効にすると、どの訪問者でもこのエージェントに質問できるようになります。ファイル自体が回答に表示されることはありませんが、ファイルの内容が回答に含まれる場合があります。

</warning>

![公開アクセスがオフの埋め込みウィジェットタブ](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-1-1.webp)

![公開アクセスをオンにした後の回答モードとチャットウィジェットの外観](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-1-2.webp)

## ステップ 2: 回答モードを選択する

**回答モード** セクションで、訪問者が質問したときのエージェントの回答方法を選択します。デフォルトは **じっくり考える** です。訪問者が自分で変更することはできません。

<table>
<thead>
  <tr>
    <th>
      モード
    </th>
    
    <th>
      回答方法
    </th>
    
    <th>
      適した用途
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        クイック回答
      </strong>
    </td>
    
    <td>
      直接検索して簡潔に回答します
    </td>
    
    <td>
      単一の質問や日常的な調べもの
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        じっくり考える
      </strong>
    </td>
    
    <td>
      複数回の推論と、データベースをまたいだ照合を経て回答します
    </td>
    
    <td>
      複雑な質問や、大量のファイルを調べる必要がある質問
    </td>
  </tr>
</tbody>
</table>

## ステップ 3: チャットウィジェットの外観を設定する

**チャットウィジェットの外観** セクションで、次の表に従って設定を調整します。右側にはリアルタイムのプレビューが表示され、**デスクトップ** と **モバイル** の表示を切り替えられます。設定が終わったら、このセクションの **保存** をクリックします。

<table>
<thead>
  <tr>
    <th>
      項目
    </th>
    
    <th>
      入力値
    </th>
    
    <th>
      ルールと注意事項
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        チャットウィンドウのタイトル
      </strong>
    </td>
    
    <td>
      チャットウィンドウ上部のタイトルバーに表示する文字
    </td>
    
    <td>
      任意。32 文字以内
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        チャットランチャーのテキスト
      </strong>
    </td>
    
    <td>
      ランチャーボタンの横に表示する案内文
    </td>
    
    <td>
      任意。32 文字以内
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        カラー設定
      </strong>
    </td>
    
    <td>
      <strong>
        シンプル
      </strong>
      
       を選ぶと 1 つの <strong>
        テーマカラー
      </strong>
      
       をすべての要素に適用し、<strong>
        詳細
      </strong>
      
       を選ぶと要素ごとに個別に設定できます
    </td>
    
    <td>
      カラーコードを直接入力するか、カラーピッカーを使用します
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        ランチャーボタンのアイコン
      </strong>
    </td>
    
    <td>
      右下のチャットランチャーのアイコン
    </td>
    
    <td>
      任意。アップロードしない場合はデフォルトのチャットアイコンが使用されます。背景が透明な正方形の PNG を推奨します
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        サポートアバターのアイコン
      </strong>
    </td>
    
    <td>
      チャット内のサポート側のアバター
    </td>
    
    <td>
      任意。アップロードしない場合はデフォルトのボットアイコンが使用されます
    </td>
  </tr>
</tbody>
</table>

**詳細** を選択すると、**ウィンドウバー**、**ランチャーボタン**、**吹き出し**、**送信ボタン**、**サポートアバター** の 5 つの要素の色をそれぞれ設定できます。

保存に成功すると、「**保存しました／チャットウィジェットの設定を更新しました。**」と表示されます。

![チャットウィンドウのタイトルとチャットランチャーのテキストを入力した状態。右側はライブプレビュー](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-3-1.webp)

![シンプルのテーマカラーとアイコンのアップロード欄](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-3-2.webp)

![詳細モードの 5 つの要素の色](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-3-3.webp)

![チャットウィジェットの設定を保存したメッセージ](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-3-4.webp)

## ステップ 4: ネットワーク設定を行う

**埋め込みチャットウィンドウ** セクションの **ネットワーク設定** ステップでは、まずルーターまたはファイアウォールでポートフォワーディングのルールを設定し、外部ネットワークから ARGENT サービスにアクセスできるようにします。そのうえで次の 2 つの項目を入力し、**保存** をクリックします。

<table>
<thead>
  <tr>
    <th>
      項目
    </th>
    
    <th>
      入力値
    </th>
    
    <th>
      ルールと注意事項
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        ARGENT API ホスト
      </strong>
    </td>
    
    <td>
      ARGENT サービスにアクセスする URL（例：<code>
        https://argent.example.com
      </code>
      
      ）
    </td>
    
    <td>
      必須。デフォルトでは、現在 ARGENT を開いている URL が入力されています。訪問者が外部ネットワークからこの URL に接続できる必要があるため、接続できない場合は外部向けの URL に変更してください。チャットウィジェットはこの URL を使ってバックエンドサービスに接続します
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        許可するドメイン
      </strong>
    </td>
    
    <td>
      このチャットウィジェットを読み込めるドメイン（例：<code>
        https://www.example.com
      </code>
      
      ）
    </td>
    
    <td>
      必須。1 つ以上入力します。完全な URL を入力する必要があります。<strong>
        ドメインを追加
      </strong>
      
       をクリックすると行を追加できます
    </td>
  </tr>
</tbody>
</table>

![埋め込みチャットウィンドウのネットワーク設定](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-4-1.webp)

![入力して保存したネットワーク設定](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-4-2.webp)

<warning>

**2 つの項目を両方とも入力するまでダウンロードできません：**

入力が完了していない場合、次のステップの **ダウンロード** ボタンはクリックできず、「**ウィジェットをダウンロードする前に、許可するドメインを 1 つ以上追加してください。**」と表示されます。

</warning>

## ステップ 5: JavaScript ファイルをダウンロードしてアップロードする

1. **JavaScript ファイルをアップロード** ステップで **ダウンロード** をクリックし、チャットウィジェットの JavaScript ファイルを取得します。ファイル名は `argent-widget-v<バージョン>-<Agent ID の先頭 8 文字>.js` の形式です（例：`argent-widget-v1.0.0-eda52162.js`）
2. そのファイルを Web サイトの静的アセットディレクトリにアップロードします

<warning>

**外観やメッセージを変更したら、ダウンロードとアップロードをやり直す必要があります：**

ダウンロードしたファイルには、ダウンロード時点で保存されている外観とメッセージの設定が組み込まれています。後で ARGENT でこれらの設定を変更しても、Web サイト上のチャットウィジェットは自動的には更新されません。もう一度ダウンロードして、Web サイト上のファイルを上書きしてください。

</warning>

## ステップ 6: 埋め込みコードを貼り付ける

1. **チャットウィンドウの埋め込みコード** ステップの **ウィジェット JS ファイルの配置場所** 欄に、ステップ 5 のファイルの配置先のパスを入力します（例：`https://www.example.com/assets`）
2. コードブロックのコピーアイコンをクリックすると、「**コピーしました／埋め込みコードをクリップボードにコピーしました。**」と表示されます
3. チャットウィンドウを表示したい Web ページにコードを貼り付けます

コード内の URL と Agent ID は、入力した内容にもとづいてページが生成します。形式は次のとおりです。

```html
<!-- ARGENT Chat Widget v1.0.0 (agent id: <Agent ID>) -->
<script
  src="https://www.example.com/assets/argent-widget-v1.0.0-<Agent ID の先頭 8 文字>.js"
  async
></script>
```

完了すると、その Web ページの右下にチャットランチャーボタンが表示され、クリックするとチャットウィンドウが開きます。

![ウィジェット JS ファイルの配置場所を入力した埋め込みコード](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-6-1.webp)

![埋め込みコードをコピーしたメッセージ](https://docs.ardge.com/screenshots/knowledge/ja/argent/embed-on-website/step-6-2.webp)

## トラブルシューティング

<table>
<thead>
  <tr>
    <th>
      メッセージ
    </th>
    
    <th>
      考えられる原因
    </th>
    
    <th>
      対処方法
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        ウィジェットエンジンのファイルを取得できませんでした。しばらくしてからもう一度お試しください。
      </code>
    </td>
    
    <td>
      ダウンロードリクエストでファイルを取得できなかった
    </td>
    
    <td>
      しばらくしてから、もう一度 <strong>
        ダウンロード
      </strong>
      
       をクリックします
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        チャットウィジェットの設定を保存できませんでした。しばらくしてからもう一度お試しください。
      </code>
    </td>
    
    <td>
      外観またはネットワーク設定の保存リクエストが送信されなかった
    </td>
    
    <td>
      しばらくしてから、もう一度 <strong>
        保存
      </strong>
      
       をクリックします
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ウィジェットをダウンロードする前に、許可するドメインを 1 つ以上追加してください。
      </code>
    </td>
    
    <td>
      <strong>
        許可するドメイン
      </strong>
      
       が空になっている
    </td>
    
    <td>
      ステップ 4 に戻り、<strong>
        ドメインを追加
      </strong>
      
       をクリックして完全な URL を入力します
    </td>
  </tr>
</tbody>
</table>

## 関連記事

- [初めての AI エージェントを作成する](https://docs.ardge.com/ja/knowledge/argent/first-ai-agent)
- [ARGENT の利用状況とチャット履歴を確認する](https://docs.ardge.com/ja/knowledge/argent/usage-analytics)


## Sitemap

See the full [sitemap](https://docs.ardge.com/sitemap.md) for all pages.