Web アプリの埋め込み

このドキュメントは 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: 'https://udify.app', // 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'
    }
}

埋め込みトークンを取得

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

スクリプトを追加

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

外観をカスタマイズ

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

動作をテスト

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

iframe 統合

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

<iframe 
  src="https://udify.app/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>

iframe 埋め込みを使う理由

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

カスタマイズオプション

サイズと位置：

<iframe 
  src="https://udify.app/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="https://udify.app/chatbot/YOUR_APP_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>

埋め込み方法の選び方

カスタマーサポートアプリ

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

フォーム・Workflow アプリ

アプリがメインコンテンツとなる専用ページには 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 種類です。

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

設定例：

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

注：embed.js スクリプトを使用して iframe を作成する際、各入力値は処理（GZIP で圧縮し base64 でエンコード）されてから URL に追加されます。例えば、処理された入力値を含む URL は次のようになります。 http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D

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

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

iframe 統合

JavaScript 制御

レスポンシブデザイン

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

​設定オプション

​iframe 統合

​iframe 埋め込みを使う理由

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

​埋め込み方法の選び方

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

​1. CSS 変数の変更

​2. containerProps の使用

​3. inputs の渡し方

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

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

設定オプション

iframe 統合

iframe 埋め込みを使う理由

カスタマイズオプション

埋め込み方法の選び方

トラブルシューティング

1. CSS 変数の変更

2. `containerProps` の使用

3. `inputs` の渡し方