簡単♪Difyで作成したチャットボットをWordPressサイトに埋め込む方法

Difyで作成したチャットボットをWordpressサイトに埋め込む方法を下記動画でご紹介しています。

手順としては、下記のとおりです。

1. Difyでチャットボット作成
2. コードを出力
3. WordPressに埋め込む

こちらの記事では、動画の補足として③の手順についてお伝えします。プラグインを使う方法をご紹介していきます。

コードのコピー

まずは埋め込み用のコードをDify側からコピーします。今回は右下のボタンをクリックすると、チャットボットが出てくるようにします。

プラグインのインストール

WordPressでCode Snippetsというプラグインをインストールします。

インストール後、左側のサイドバーの「スニペット」メニューをクリックします。

Difyでコピーしたコードをいれる

下記のようにいれます。

Difyからコピーしたコード部分は、実際にコピーしたコードに変更してくださいね。

function add_dify_chatbot() {
    echo <<<EOD
    {{-- Difyからコピーしたコード --}}
    <script>
        window.difyChatbotConfig = {
            token: 'test'
        }
    </script>
    <script
        src="https://udify.app/embed.min.js"
        id="test"
        defer>
    </script>
    <style>
        #dify-chatbot-bubble-button {
            background-color: #1C64F2 !important;
        }
        #dify-chatbot-bubble-window {
            width: 24rem !important;
            height: 40rem !important;
        }
    </style>
    {{-- コピーしたコード終了 --}}
    EOD;
}
add_action('wp_footer', 'add_dify_chatbot');