---
title: Webサイトへの埋め込み
---

Dify は、AI アプリケーションをビジネスウェブサイトに埋め込むことをサポートしており、数分でビジネスデータを使用した公式サイトの AI カスタマーサービス、ビジネス知識の Q&A などのアプリケーションを構築できます。

AI アプリケーションをウェブサイトに埋め込む方法は 3 つあります：`<iframe>` タグ方式、`<script>` タグ方式、および Dify Chrome ブラウザ拡張機能のインストール方式です。

WebApp カードの埋め込みボタンをクリックし、埋め込みコードをコピーして、サイトの目標位置に貼り付けます。

## `<iframe>` タグ方式の使用

`<iframe>` コードを、AI アプリケーションを表示するウェブサイトのタグ（`<div>`、`<section>` など）にコピーします。

<Frame caption="埋め込みコードの例">
    <img src="https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/guides/application-publishing/1e2e8c9adc620f9d6b4ea157119e8659.png" alt="ウェブサイト埋め込みのコード例を表示" />
</Frame>

## `<script>` タグ方式の使用

`<script>` コードをウェブサイトの `<head>` または `<body>` タグにコピーします。これにより、ウェブサイトに Dify チャットボットのバブルボタンが表示されます。

script コードを公式サイトの `<body>` に貼り付けると、公式サイトの AI ロボットが表示されます：

<Frame caption="埋め込み後の AI ロボット効果">
  <img src="https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/guides/application-publishing/f5a5e95e1120906669b3c1ad4e186dea.png" alt="ウェブサイトに埋め込まれた後の AI ロボット効果を表示" />
</Frame>

## Dify Chrome ブラウザ拡張機能のインストール方式

プロンプトに従って、[Dify Chrome ブラウザ拡張機能](https://chromewebstore.google.com/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf)をインストールします。

## Dify チャットボットバブルボタンのカスタマイズ

ウェブサイトに Dify チャットボットバブルボタンを使用する場合（つまり、`<script>` タグ方式で AI アプリケーションをウェブサイトに埋め込む場合）、ボタンのスタイル、位置、その他の設定をカスタマイズできます。

Dify チャットボットバブルボタンは、以下の設定オプションでカスタマイズできます：

```javascript
window.difyChatbotConfig = {
    // 必須、Dify によって自動的に生成されます
    token: 'YOUR_TOKEN',
    // オプション、デフォルトは false です
    isDev: false,
    // オプション、isDev が true の場合、デフォルトは 'https://dev.udify.app'、それ以外の場合は 'https://udify.app' です
    baseUrl: 'YOUR_BASE_URL',
    // オプション、`id` 以外の有効な HTMLElement 属性（例：`style`、`className` など）を受け入れます
    containerProps: {},
    // オプション、ボタンのドラッグを許可するかどうか、デフォルトは `false` です
    draggable: false,
    // オプション、ボタンのドラッグを許可する軸、デフォルトは `both`、`x`、`y`、`both` のいずれかを指定できます
    dragAxis: 'both',
    // オプション、dify チャットボットに設定されている入力オブジェクト
    inputs: {
        // キーは変数名です
        // 例：
        // name: "NAME"
    },
    // オプション、dify チャットボットに設定されているシステム変数
    systemVariables: {
        // 例：
        // user_id: 'USER_ID',
        // conversation_id: 'CONVERSATION_ID',
    },
    // オプション、dify チャットボットに設定されているユーザー情報変数
    userVariables: {
        // 例：
        // avatar_url: 'AVATAR_URL',
        // name: 'NAME',
    },
};
```

### デフォルトボタンスタイルの上書き

CSS 変数または `containerProps` オプションを使用して、CSS の優先度ルールに従ってデフォルトのボタンスタイルを上書きできます。

*   **CSS 変数の変更**

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

    ```css
    /* 下端からの距離、デフォルトは `1rem` */
    --dify-chatbot-bubble-button-bottom
    
    /* 右端からの距離、デフォルトは `1rem` */
    --dify-chatbot-bubble-button-right
    
    /* 左端からの距離、デフォルトは `unset` */
    --dify-chatbot-bubble-button-left
    
    /* 上端からの距離、デフォルトは `unset` */
    --dify-chatbot-bubble-button-top
    
    /* 背景色、デフォルトは `#155EEF` */
    --dify-chatbot-bubble-button-bg-color
    
    /* 幅、デフォルトは `50px` */
    --dify-chatbot-bubble-button-width
    
    /* 高さ、デフォルトは `50px` */
    --dify-chatbot-bubble-button-height
    
    /* 角丸、デフォルトは `25px` */
    --dify-chatbot-bubble-button-border-radius
    
    /* ボックスシャドウ、デフォルトは `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
    --dify-chatbot-bubble-button-box-shadow
    
    /* ホバー時の変形、デフォルトは `scale(1.1)` */
    --dify-chatbot-bubble-button-hover-transform
    ```
    
    例えば、ボタンの背景色を #ABCDEF に変更するには、以下の CSS を追加します：
    
    ```css
    #dify-chatbot-bubble-button {
        --dify-chatbot-bubble-button-bg-color: #ABCDEF;
    }
    ```

*   **`containerProps` オプションの使用**

    `style` 属性を使用してインラインスタイルを設定：
    
    ```javascript
    window.difyChatbotConfig = {
        // ... 他の設定
        containerProps: {
            style: {
                backgroundColor: '#ABCDEF',
                width: '60px',
                height: '60px',
                borderRadius: '30px',
            },
            // 軽微なスタイル変更の場合、`style` 属性の値として文字列も使用できます：
            // style: 'background-color: #ABCDEF; width: 60px;',
        },
    }
    ```
    
    `className` 属性を使用して CSS クラスを適用：
    
    ```javascript
    window.difyChatbotConfig = {
        // ... 他の設定
        containerProps: {
            className: 'dify-chatbot-bubble-button-custom my-custom-class',
        },
    };
    ```

## 埋め込みウェブサイトのアプリケーションに `inputs` を渡す

埋め込んだ AI アプリケーションに初期入力を渡すことができます。4 種類の入力タイプがサポートされています：

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

`<iframe>` タグ方式と `<script>` タグ方式で AI アプリケーションをウェブサイトに埋め込む場合、`inputs` を渡す方法も異なります。

以下では、変数名が `name`、値が `apple` の場合を例に説明します。

### `<iframe>` タグ方式の使用

AI アプリケーションが `<iframe>` タグ方式でウェブサイトに埋め込まれている場合、URL にパラメータを追加する方式で `inputs` を渡すことができます。

渡される変数の値を最初に GZIP で圧縮し、base64 でエンコードし、得られた base64 値を encodeURIComponent でエンコードしてから、URL に追加する必要があります。

例えば、変数名が `name`、値が `apple` の場合、まず `apple` を圧縮して base64 エンコード `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA==` を得て、次に encodeURIComponent でエンコードして `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D` を得ます。最終的な入力値 URL は次のようになります： `http://localhost/chatbot/{token}?name=H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D`。

### `<script>` タグ方式の使用

AI アプリケーションが `<script>` タグ方式でウェブサイトに埋め込まれている場合、前述の設定オプションを通じて `inputs` を渡すだけです。設定例：

```javascript
window.difyChatbotConfig = {
    // ... 他の設定
    inputs: {
        name: 'apple',
    },
}
```

{/*
Contributing Section
DO NOT edit this section!
It will be automatically generated by the script.
*/}

---

[このページを編集する](https://github.com/langgenius/dify-docs/edit/main/ja-jp/guides/application-publishing/embedding-in-websites.mdx) | [問題を報告する](https://github.com/langgenius/dify-docs/issues/new?template=docs.yml)

