Difyで作成したAIチャットフローをWebサイトに埋め込む

Difyを使うと作成したAIチャット・アプリケーションを、Dify以外のWebサイトに埋め込むことができます。ですから、例えば「自分のブログにAIチャットを埋め込む」「自社のコーポレートサイトにAIチャットを埋め込む」といったことが簡単に実現できます。Dify公式サイトにある以下のドキュメントで、この埋め込み機能について説明されています。

今回は「AIチャット・アプリケーションを埋め込む」方法をメモしておきます。埋め込み方法は3種類あります。今回は1と2について説明します。

iFrameをHTMLに追加する
scriptをHTMLに追加する
Chrome拡張を利用する

埋め込むアプリケーションの状態は特に問いません。「初期状態でも構わない」ですし、極端に言えば「動作しない状態でも構わない」です。今回はDify上でアプリケーションは「予め作成済み」とします。

検証環境¶

対象	バージョン
Dify	1.11.2

作業の流れ¶

基本的な作業の流れは以下です。

Dify側で埋め込み用URLを発行する
発行したURLをWebサイトに埋め込む

Difyで埋め込み用URLを発行する¶

アプリケーションのオーケーストレーション画面で、画面左上の辺りをクリックします。

アプリケーションのプロパティが表示されます。「Web App」欄から「埋め込み」をクリックすると3種類の埋め込み方法が表示されます。

3種類のアプリケーション埋め込み方法¶

1. iFrameをHTMLに追加する¶

iFrameタグが表示されます。これをコピーして、埋め込みたいWebサイトのHTMLに追加します。

2. scriptをHTMLに追加する¶

scriptタグが表示されます。これをコピーして、埋め込みたいWebサイトのHTMLに追加します。

3. Chrome拡張を利用する¶

実際にWebサイトへ埋め込む¶

実際にWebサイトへ埋め込んでみます。

1. iFrameをHTMLに追加する¶

Dify上で発行されたコードを埋め込んだHTMLを用意します。

<html>
    <body>
        <iframe
            src="http://10.0.0.1/chatbot/qihRIc3KCTEuZVmr"
            style="width: 100%; height: 100%; min-height: 700px"
            frameborder="0"
            allow="microphone"
        >
        </iframe>
    </body>
</html>

このHTMLファイルをWebサイト上へ配置し、Webブラウザでアクセスすると以下のように表示されます。

2. scriptをHTMLに追加する¶

同じくDify上で発行されたコードを埋め込んだHTMLを用意します。

<html>
    <head>
        <script>
            window.difyChatbotConfig = {
                token: "qihRIc3KCTEuZVmr",
                baseUrl: "http://10.0.0.1",
                inputs: {
                    // You can define the inputs from the Start node here
                    // key is the variable name
                    // e.g.
                    // name: "NAME"
                },
                systemVariables: {
                    // user_id: 'YOU CAN DEFINE USER ID HERE',
                    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
                },
                userVariables: {
                    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
                    // name: 'YOU CAN DEFINE USER NAME HERE',
                },
            };
        </script>
        <script
            src="http://10.0.0.1/embed.min.js"
            id="qihRIc3KCTEuZVmr"
            defer
        ></script>
        <style>
            #dify-chatbot-bubble-button {
                background-color: #1c64f2 !important;
            }
            #dify-chatbot-bubble-window {
                width: 24rem !important;
                height: 40rem !important;
            }
        </style>
    </head>
    <body>
        Hello, World!
    </body>
</html>

このHTMLファイルをWebサイト上へ配置し、Webブラウザでアクセスすると以下のように表示されます。

画面右下に表示された「青マークの吹き出しアイコン」をクリックすると、以下のように表示されました。