> ## Documentation Index
> Fetch the complete documentation index at: https://enterprise-docs.dify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web アプリの埋め込み

> iframe、チャットウィジェット、カスタム統合を使って、公開した Web アプリを任意のウェブサイトに配置する

公開した Web アプリは、任意のウェブサイトに直接埋め込めます。これは別の公開方法ではなく、すでに作成済みの同じ Web アプリを、独立したページとしてではなく既存のウェブサイト内に表示して配置する方法です。

## Web アプリ埋め込みの仕組み

Dify でアプリを公開すると、Web アプリの URL が発行されます。この URL を直接共有することも、次の方法で同じアプリをウェブサイトに埋め込むこともできます。

<CardGroup cols={2}>
  <Card title="チャットバブルウィジェット" icon="comment">
    フローティングボタンとして Web アプリを表示し、訪問者がクリックすると全画面のインターフェースが開きます
  </Card>

  <Card title="iframe 統合" icon="window">
    ページコンテンツ内に Web アプリを直接埋め込み、常に表示された状態で利用できます
  </Card>

  <Card title="JavaScript 制御" icon="code">
    カスタムスタイルや動作を制御できる高度な埋め込み
  </Card>

  <Card title="レスポンシブデザイン" icon="mobile">
    同じ Web アプリがあらゆる表示形式に自動的に適応します
  </Card>
</CardGroup>

<Info>
  すべての埋め込み方法は、公開した Web アプリを使用します。アプリ設定への変更は、埋め込まれているすべての場所に自動的に反映されます。
</Info>

## チャットバブルウィジェット

チャットバブルは、Web アプリをフローティングボタンとして表示します。訪問者がクリックすると、アプリがオーバーレイで開き、ページにとどまったまま AI 機能を利用できます。

### 設定オプション

チャットバブルは `difyChatbotConfig` オブジェクトを通じてカスタマイズできます。

```javascript theme={null}
window.difyChatbotConfig = {
    // Required: Your app's token from Dify
    token: 'YOUR_TOKEN',
    
    // Optional: Environment settings
    isDev: false,
    baseUrl: 'http://your-dify-host', // Auto-set based on isDev
    
    // Optional: Visual customization
    containerProps: {
        style: {
            right: '20px',
            bottom: '20px'
        },
        className: 'custom-chat-button'
    },
    
    // Optional: Interactive behavior  
    draggable: false,              // Allow users to drag the button
    dragAxis: 'both',             // 'x', 'y', or 'both'
    
    // Optional: Pre-fill user context
    inputs: {
        name: "John Doe",          // Variable names from your Dify app
        department: "Support"
    },
    
    // Optional: System variables for tracking
    systemVariables: {
        user_id: 'USER_123',
        conversation_id: 'CONV_456'
    },
    
    // Optional: User profile information
    userVariables: {
        avatar_url: 'https://example.com/avatar.jpg',
        name: 'John Doe'
    }
}
```

<Steps>
  <Step title="埋め込みトークンを取得">
    Dify アプリで **公開 → 埋め込み** に移動して、固有のトークンを確認します。
  </Step>

  <Step title="スクリプトを追加">
    ウェブサイトの HTML に、設定と Dify の埋め込みスクリプトを含めます。
  </Step>

  <Step title="外観をカスタマイズ">
    ウェブサイトのデザインに合わせて `containerProps` を調整します。
  </Step>

  <Step title="動作をテスト">
    ウェブサイトを開き、チャットボタンを試して、すべてが正しく動作することを確認します。
  </Step>
</Steps>

## iframe 統合

Web アプリをページコンテンツに直接埋め込みます。これにより、アプリがウェブサイトの不可分な一部として表示されます。

```html theme={null}
<iframe 
  src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>
```

### iframe 埋め込みを使う理由

* **常に表示** - Web アプリがボタンの背後に隠れず、すぐにアクセスできます
* **完全な機能** - Web アプリのすべての機能が iframe 内でも同じように動作します
* **ページ統合** - オーバーレイではなく、ネイティブなコンテンツとして表示されます
* **シンプルなセットアップ** - HTML だけで済み、JavaScript の設定は不要です

### カスタマイズオプション

**サイズと位置**：

```html theme={null}
<iframe 
  src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
  width="400px" 
  height="500px"
  style="border: 1px solid #ccc; border-radius: 8px;">
</iframe>
```

**レスポンシブデザイン**：

```html theme={null}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe 
    src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>
```

## 埋め込み方法の選び方

<AccordionGroup>
  <Accordion title="カスタマーサポートアプリ">
    **チャットバブル** が最適です。必要になるまで邪魔にならず、フローティングボタンによって訪問者はブラウジングを続けながらすばやくヘルプにアクセスできます。
  </Accordion>

  <Accordion title="フォーム・ワークフローアプリ">
    アプリがメインコンテンツとなる専用ページには **iframe 埋め込み** が適しています。訪問者は余計なクリックなしに、すぐにアプリを見て使えます。
  </Accordion>

  <Accordion title="製品デモ">
    ランディングページに **iframe 埋め込み** を使い、訪問者がその場で AI 機能を試せるようにします。興味から実際の利用までの障壁がありません。
  </Accordion>

  <Accordion title="複数ページへの統合">
    同じアプリをサイト全体でアクセス可能にしたい場合は **チャットバブル** を使います。1 つの埋め込みコードで、すべてのページからアクセスできます。
  </Accordion>
</AccordionGroup>

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

**ウィジェットが表示されない**：

* アプリトークンが、Dify の公開 → 埋め込みセクションに表示されているものと一致していることを確認します
* 埋め込みスクリプトより前に設定が読み込まれていることを確認します
* ブラウザのコンソールに JavaScript エラーがないか確認します

**iframe が読み込まれない**：

* Web アプリの URL に正しいトークンが含まれていることを確認します
* サイトが iframe コンテンツを許可していることを確認します（Content Security Policy を確認）
* サイトと Dify アプリの両方が HTTPS を使用していることを確認します

<Warning>
  埋め込む前に、Web アプリを公開しておく必要があります。アプリ設定を更新した場合は、埋め込み版に変更を反映するために再公開してください。
</Warning>

CSS 変数または `containerProps` オプションを使用して、デフォルトのボタンスタイルをオーバーライドできます。CSS の詳細度に基づいてこれらの方法を適用し、希望するカスタマイズを実現してください。

### 1. CSS 変数の変更

カスタマイズには、以下の CSS 変数がサポートされています。

```css theme={null}
/* Button distance to bottom, default is `1rem` */
--dify-chatbot-bubble-button-bottom

/* Button distance to right, default is `1rem` */
--dify-chatbot-bubble-button-right

/* Button distance to left, default is `unset` */
--dify-chatbot-bubble-button-left

/* Button distance to top, default is `unset` */
--dify-chatbot-bubble-button-top

/* Button background color, default is `#155EEF` */
--dify-chatbot-bubble-button-bg-color

/* Button width, default is `50px` */
--dify-chatbot-bubble-button-width

/* Button height, default is `50px` */
--dify-chatbot-bubble-button-height

/* Button border radius, default is `25px` */
--dify-chatbot-bubble-button-border-radius

/* Button box shadow, default is `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
--dify-chatbot-bubble-button-box-shadow

/* Button hover transform, default is `scale(1.1)` */
--dify-chatbot-bubble-button-hover-transform
```

背景色を #ABCDEF に変更するには、次の CSS を追加します。

```css theme={null}
#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
}
```

### 2. `containerProps` の使用

`style` 属性を使用してインラインスタイルを設定します。

```javascript theme={null}
window.difyChatbotConfig = {
    // ... other configurations
    containerProps: {
        style: {
            backgroundColor: '#ABCDEF',
            width: '60px',
            height: '60px',
            borderRadius: '30px',
        },
        // For minor style overrides, you can also use a string value for the `style` attribute:
        // style: 'background-color: #ABCDEF; width: 60px;',
    },
}
```

`className` 属性を使用して CSS クラスを適用します。

```javascript theme={null}
window.difyChatbotConfig = {
    // ... other configurations
    containerProps: {
        className: 'dify-chatbot-bubble-button-custom my-custom-class',
    },
}
```

### 3. `inputs` の渡し方

サポートされている入力は 4 種類です。

1. **`text-input`**：任意の値を受け入れます。入力文字列が最大許容長を超える場合は切り捨てられます。
2. **`paragraph`**：`text-input` と同様で、任意の値を受け入れ、最大長を超える場合は文字列を切り捨てます。
3. **`number`**：数値または数値文字列を受け入れます。文字列が指定された場合は、`Number` 関数を使用して数値に変換されます。
4. **`options`**：事前設定されたオプションのいずれかと一致する限り、任意の値を受け入れます。

設定例：

```javascript theme={null}
window.difyChatbotConfig = {
    // Other configuration settings...
    inputs: {
        name: 'apple',
    },
}
```

注：embed.js スクリプトを使用して iframe を作成する際、各入力値は処理（GZIP で圧縮し base64 でエンコード）されてから URL に追加されます。

例えば、処理された入力値を含む URL は次のようになります。
`http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D`