ウェブサイト埋め込み

カスタマイズ可能なウィジェットとiframe埋め込みで任意のWebサイトにAIチャット機能を追加

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

Difyアプリをウェブサイトに埋め込むことで、訪問者に直接AI機能を提供できます。フローティングチャットボタン、フルスクリーンチャットインターフェース、または埋め込みウィジェットなど、Difyはあらゆるウェブサイト技術で動作する柔軟なオプションを提供します。

​

埋め込みオプション

チャットバブルボタン

AIアシスタントを開くフローティングチャットボタン—カスタマーサポートに最適

iframe埋め込み

直接アクセス用のWebページコンテンツ内の完全埋め込みインターフェース

カスタム統合

ユーザー体験を完全に制御するためのJavaScript API使用

レスポンシブデザイン

すべての埋め込みが異なる画面サイズとデバイスに自動的に適応

​

チャットバブル設定

フローティングチャットボタンは最も人気の埋め込み方法です。クリック時にAIアシスタントを開くカスタマイズ可能なボタンをウェブサイトに追加します。

​

設定オプション

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

window.difyChatbotConfig = {
    // 必須：Difyからのアプリのトークン
    token: 'YOUR_TOKEN',
    
    // オプション：環境設定
    isDev: false,
    baseUrl: 'https://udify.app', // isDevに基づいて自動設定
    
    // オプション：視覚的カスタマイズ
    containerProps: {
        style: {
            right: '20px',
            bottom: '20px'
        },
        className: 'custom-chat-button'
    },
    
    // オプション：インタラクティブ動作  
    draggable: false,              // ユーザーがボタンをドラッグできるようにする
    dragAxis: 'both',             // 'x', 'y', または 'both'
    
    // オプション：ユーザーコンテキストの事前入力
    inputs: {
        name: "John Doe",          // Difyアプリからの変数名
        department: "Support"
    },
    
    // オプション：追跡用のシステム変数
    systemVariables: {
        user_id: 'USER_123',
        conversation_id: 'CONV_456'
    },
    
    // オプション：ユーザープロファイル情報
    userVariables: {
        avatar_url: 'https://example.com/avatar.jpg',
        name: 'John Doe'
    }
}

1. 埋め込みトークンを取得

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

2. スクリプトを追加

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

3. 外観をカスタマイズ

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

4. 機能をテスト

   ウェブサイトを開いてチャットボタンを

​

iframe埋め込み

より統合された体験のために、DifyアプリをWebページコンテンツに直接埋め込みます：

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

​

iframeの利点

• 直接統合 - アプリがページコンテンツの一部として表示
• 完全な機能 - すべてのアプリ機能がiframe内で正常に動作
• レスポンシブデザイン - コンテナサイズに自動的に適応
• JavaScriptが不要 - シンプルなHTML実装

​

カスタマイズオプション

サイズと位置：

<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>

​

使用例とベストプラクティス

カスタマーサポート

インスタントヘルプにはチャットバブルを使用します。目立つように配置し、現在のページやユーザーアカウント情報などのコンテキストの事前入力を検討してください。

リード生成

資格審査フォームをコンテンツに直接埋め込みます。より高いエンゲージメントを得るために専用のランディングページでiframe埋め込みを使用します。

製品デモ

埋め込みデモでAI機能を紹介します。訪問者がウェブサイトを離れることなくアプリを試せるようにします。

知識ベース

静的なFAQをインタラクティブなAIアシスタントに置き換えます。ユーザーはドキュメントを検索する代わりにパーソナライズされた回答を得られます。

​

トラブルシューティング

チャットボタンが表示されない：

• トークンが正しいことを確認
• 埋め込みスクリプトが設定の後に読み込まれることを確認
• ブラウザコンソールにJavaScriptエラーがないことを確認

iframeが読み込まれない：

• iframe URLに正しいアプリトークンが含まれていることを確認
• ウェブサイトがiframeコンテンツを許可していることを確認
• DifyアプリがHTTPSを要求する場合、親ページがHTTPS経由で提供されていることを確認

互換性を確保するために、異なるブラウザやデバイスで埋め込みをテストしてください。一部の企業ファイアウォールはiframeコンテンツをブロックする場合があります。

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

​

1.CSS変数の変更

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

/* ボタンの下からの距離、デフォルトは `1rem` */
--dify-chatbot-bubble-button-bottom

/* ボタンの右からの距離、デフォルトは `1rem` */
--dify-chatbot-bubble-button-right

/* ボタンの左からの距離、デフォルトは `unset` */
--dify-chatbot-bubble-button-left

/* ボタンの上からの距離、デフォ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を追加します：

#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
}

​

2.containerPropsの使用

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

window.difyChatbotConfig = {
    // ... その他の設定
    containerProps: {
        style: {
            backgroundColor: '#ABCDEF',
            width: '60px',
            height: '60px',
            borderRadius: '30px',
        },
        // 軽微なスタイルのオーバーライドには、`style`属性に文字列値を使用することもできます：
        // style: 'background-color: #ABCDEF; width: 60px;',
    },
}

className属性を使用してCSSクラスを適用：

window.difyChatbotConfig = {
    // ... その他の設定
    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: 事前設定されたオプションの1つと一致する限り、任意の値を受け入れます。

設定例：

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

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

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