メインコンテンツへスキップ
このドキュメントは AI によって自動翻訳されています。不正確な部分がある場合は、英語版 を参照してください。
公開した Web アプリは、任意のウェブサイトに直接埋め込めます。これは別の公開方法ではなく、すでに作成済みの同じ Web アプリを、独立したページとしてではなく既存のウェブサイト内に表示して配置する方法です。

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

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

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

フローティングボタンとして Web アプリを表示し、訪問者がクリックすると全画面のインターフェースが開きます

iframe 統合

ページコンテンツ内に Web アプリを直接埋め込み、常に表示された状態で利用できます

JavaScript 制御

カスタムスタイルや動作を制御できる高度な埋め込み

レスポンシブデザイン

同じ Web アプリがあらゆる表示形式に自動的に適応します
すべての埋め込み方法は、公開した Web アプリを使用します。アプリ設定への変更は、埋め込まれているすべての場所に自動的に反映されます。

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

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

​
設定オプション

チャットバブルは difyChatbotConfig オブジェクトを通じてカスタマイズできます。 
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'
    }
}
1

埋め込みトークンを取得

Dify アプリで 公開 → 埋め込み に移動して、固有のトークンを確認します。
2

スクリプトを追加

ウェブサイトの HTML に、設定と Dify の埋め込みスクリプトを含めます。
3

外観をカスタマイズ

ウェブサイトのデザインに合わせて containerProps を調整します。
4

動作をテスト

ウェブサイトを開き、チャットボタンを試して、すべてが正しく動作することを確認します。

​
iframe 統合

Web アプリをページコンテンツに直接埋め込みます。これにより、アプリがウェブサイトの不可分な一部として表示されます。 
<iframe 
  src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>

​
iframe 埋め込みを使う理由

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

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

サイズと位置： 
<iframe 
  src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
  width="400px" 
  height="500px"
  style="border: 1px solid #ccc; border-radius: 8px;">
</iframe>
レスポンシブデザイン： 
<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>

​
埋め込み方法の選び方

チャットバブル が最適です。必要になるまで邪魔にならず、フローティングボタンによって訪問者はブラウジングを続けながらすばやくヘルプにアクセスできます。
アプリがメインコンテンツとなる専用ページには iframe 埋め込み が適しています。訪問者は余計なクリックなしに、すぐにアプリを見て使えます。
ランディングページに iframe 埋め込み を使い、訪問者がその場で AI 機能を試せるようにします。興味から実際の利用までの障壁がありません。
同じアプリをサイト全体でアクセス可能にしたい場合は チャットバブル を使います。1 つの埋め込みコードで、すべてのページからアクセスできます。

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

ウィジェットが表示されない：
  • アプリトークンが、Dify の公開 → 埋め込みセクションに表示されているものと一致していることを確認します
  • 埋め込みスクリプトより前に設定が読み込まれていることを確認します
  • ブラウザのコンソールに JavaScript エラーがないか確認します
iframe が読み込まれない：
  • Web アプリの URL に正しいトークンが含まれていることを確認します
  • サイトが iframe コンテンツを許可していることを確認します（Content Security Policy を確認）
  • サイトと Dify アプリの両方が HTTPS を使用していることを確認します
埋め込む前に、Web アプリを公開しておく必要があります。アプリ設定を更新した場合は、埋め込み版に変更を反映するために再公開してください。
CSS 変数または containerProps オプションを使用して、デフォルトのボタンスタイルをオーバーライドできます。CSS の詳細度に基づいてこれらの方法を適用し、希望するカスタマイズを実現してください。

​
1. CSS 変数の変更

カスタマイズには、以下の CSS 変数がサポートされています。 
/* 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 を追加します。 
#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
}

​
2. containerProps の使用

style 属性を使用してインラインスタイルを設定します。 
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 クラスを適用します。 
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：事前設定されたオプションのいずれかと一致する限り、任意の値を受け入れます。
設定例： 
window.difyChatbotConfig = {
    // Other configuration settings...
    inputs: {
        name: 'apple',
    },
}
注：embed.js スクリプトを使用して iframe を作成する際、各入力値は処理（GZIP で圧縮し base64 でエンコード）されてから URL に追加されます。 例えば、処理された入力値を含む URL は次のようになります。 http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D
最終更新日 2026年6月25日