Skip to main content
Dify は、AI アプリケーションをビジネスウェブサイトに埋め込むことをサポートしており、数分でビジネスデータを使用した公式サイトの AI カスタマーサービス、ビジネス知識の Q&A などのアプリケーションを構築できます。 AI アプリケーションをウェブサイトに埋め込む方法は 3 つあります：<iframe> タグ方式、<script> タグ方式、および Dify Chrome ブラウザ拡張機能のインストール方式です。 WebApp カードの埋め込みボタンをクリックし、埋め込みコードをコピーして、サイトの目標位置に貼り付けます。

​
<iframe> タグ方式の使用

<iframe> コードを、AI アプリケーションを表示するウェブサイトのタグ（<div>、<section> など）にコピーします。
ウェブサイト埋め込みのコード例を表示

埋め込みコードの例

​
<script> タグ方式の使用

<script> コードをウェブサイトの <head> または <body> タグにコピーします。これにより、ウェブサイトに Dify チャットボットのバブルボタンが表示されます。 script コードを公式サイトの <body> に貼り付けると、公式サイトの AI ロボットが表示されます：
ウェブサイトに埋め込まれた後の AI ロボット効果を表示

埋め込み後の AI ロボット効果

​
Dify Chrome ブラウザ拡張機能のインストール方式

プロンプトに従って、Dify Chrome ブラウザ拡張機能をインストールします。

​
Dify チャットボットバブルボタンのカスタマイズ

ウェブサイトに Dify チャットボットバブルボタンを使用する場合（つまり、<script> タグ方式で AI アプリケーションをウェブサイトに埋め込む場合）、ボタンのスタイル、位置、その他の設定をカスタマイズできます。 Dify チャットボットバブルボタンは、以下の設定オプションでカスタマイズできます： 
window.difyChatbotConfig = {
    // 必須、Dify によって自動的に生成されます
    token: 'YOUR_TOKEN',
    // オプション、デフォルトは false です
    isDev: false,
    // オプション、isDev が true の場合、デフォルトは 'https://dev.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: {
        // キーは変数名です
        // 例：
        // name: "NAME"
    },
    // オプション、dify チャットボットに設定されているシステム変数
    systemVariables: {
        // 例：
        // user_id: 'USER_ID',
        // conversation_id: 'CONVERSATION_ID',
    },
    // オプション、dify チャットボットに設定されているユーザー情報変数
    userVariables: {
        // 例：
        // avatar_url: 'AVATAR_URL',
        // name: 'NAME',
    },
};

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

CSS 変数または containerProps オプションを使用して、CSS の優先度ルールに従ってデフォルトのボタンスタイルを上書きできます。
  • CSS 変数の変更 カスタマイズには以下の CSS 変数がサポートされています： 
    /* 下端からの距離、デフォルトは `1rem` */
--dify-chatbot-bubble-button-bottom

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

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

/* 上端からの距離、デフォルトは `unset` */
--dify-chatbot-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;
}
  • 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',
    },
};

​
埋め込みウェブサイトのアプリケーションに inputs を渡す

埋め込んだ AI アプリケーションに初期入力を渡すことができます。4 種類の入力タイプがサポートされています：
  1. text-input：任意の値を受け入れます。入力文字列の長さが許可される最大長を超える場合、切り詰められます。
  2. paragraph：text-input と同様に、任意の値を受け入れ、文字列の長さが最大長を超える場合は切り詰められます。
  3. number：数値または数値文字列を受け入れます。文字列が提供された場合、Number 関数を使用して数値に変換されます。
  4. options：事前に設定されたオプションのいずれかと一致する任意の値を受け入れます。
<iframe> タグ方式と <script> タグ方式で AI アプリケーションをウェブサイトに埋め込む場合、inputs を渡す方法も異なります。 以下では、変数名が name、値が apple の場合を例に説明します。

​
<iframe> タグ方式の使用

AI アプリケーションが <iframe> タグ方式でウェブサイトに埋め込まれている場合、URL にパラメータを追加する方式で inputs を渡すことができます。 渡される変数の値を最初に GZIP で圧縮し、base64 でエンコードし、得られた base64 値を encodeURIComponent でエンコードしてから、URL に追加する必要があります。 例えば、変数名が name、値が apple の場合、まず apple を圧縮して base64 エンコード H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA== を得て、次に encodeURIComponent でエンコードして H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D を得ます。最終的な入力値 URL は次のようになります： http://localhost/chatbot/{token}?name=H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D。

​
<script> タグ方式の使用

AI アプリケーションが <script> タグ方式でウェブサイトに埋め込まれている場合、前述の設定オプションを通じて inputs を渡すだけです。設定例： 
window.difyChatbotConfig = {
    // ... 他の設定
    inputs: {
        name: 'apple',
    },
}