Webサイトへの埋め込み

Dify Apps は iframe を使用してWebサイトに埋め込むことができます。これにより、Dify App をWebサイト、ブログ、またはその他のウェブページに統合できます。

Dify Chatbot Bubble Button をWebサイトに埋め込む際に、ボタンのスタイル、位置、その他の設定をカスタマイズできます。

Dify Chatbot Bubble Button のカスタマイズ

Dify Chatbot Bubble Button は、以下の設定オプションでカスタマイズできます。

window.difyChatbotConfig = {
    // 必須：Dify によって自動的に生成されます
    token: 'YOUR_TOKEN',
    // オプション：デフォルトは false です
    isDev: false,
    // オプション：isDev が true の場合、デフォルトは '[https://dev.udify.app](https://dev.udify.app)'、それ以外の場合は '[https://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: {
        // key は変数名です
        // 例:
        // name: "NAME"
    }
};

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

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を作成する場合、各入力値はURLに追加される前にGZIPで圧縮され、base64でエンコードされます。

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

Previous対話型アプリNextAPI基づく開発

Last updated