Skip to main content

このドキュメントは AI によって自動翻訳されています。不正確な部分がある場合は、英語版 を参照してください。

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

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

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

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

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

iframe 統合

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

JavaScript 制御

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

レスポンシブデザイン

同じ Web アプリがあらゆる表示形式に自動的に適応します

Info

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

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

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

設定オプション#

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

埋め込みトークンを取得

Dify アプリで アクセスポイント タブを開き、Web アプリ カードの サイトに埋め込む をクリックして、固有のトークンを確認します。

スクリプトを追加

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

外観をカスタマイズ

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

動作をテスト

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

iframe 統合#

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

iframe 埋め込みを使う理由#

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

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

サイズと位置：

レスポンシブデザイン：

埋め込み方法の選び方#

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

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

フォームと Workflow アプリ

アプリがメインコンテンツとなる専用ページには iframe 埋め込み が適しています。訪問者は余計なクリックなしに、すぐにアプリを見て使えます。

製品デモ

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

複数ページへの統合

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

高度な設定#

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

1. CSS 変数の変更#

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

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

2. containerProps の使用#

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

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

3. inputs の渡し方#

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

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

設定例：

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

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

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

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

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

iframe が読み込まれない：

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

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