iframeやJavaScriptを使ったDifyチャットボットのWordPress埋め込み手順を詳しく解説。ボットマを使ったブランドに合ったデザインでの公開方法も紹介。

WordPressサイトにAIチャットボットを設置したいと考えたとき、Difyは有力な選択肢の一つです。Difyで構築したチャットボットをWordPressに組み込むことで、24時間365日対応の問い合わせ窓口や、製品案内・FAQ対応を自動化できます。

本記事では、DifyチャットボットをWordPressに埋め込む具体的な方法を、iframeとJavaScriptの2通りの手法でステップ別に解説します。さらに、ボットマを活用することでブランドに合ったデザインで自然に埋め込む方法もご紹介します。

埋め込み前の準備

まず、以下の準備が完了していることを確認してください。

Dify側の準備:

Difyアカウントでチャットボットアプリを作成済み
アプリの動作確認（プレビューで正常に応答することを確認）
アプリを「公開」状態にしている

WordPress側の準備:

管理者権限でWordPressにログイン可能
カスタムHTMLを挿入できる環境（テーマのfunctions.phpへのアクセス、または「カスタムHTML」ブロックが使用可能）

方法1: iframeを使った埋め込み

iframeはHTMLの標準タグであり、最もシンプルな埋め込み方法です。外部コンテンツをインラインで表示できるため、技術的な知識が少なくても対応できます。

ステップ1: DifyのパブリックURLを取得

Dify管理画面でアプリを開く
右上の「公開」ボタンをクリック
「埋め込む」タブを選択
iframeコードをコピーする

コードは以下のような形式です。

<iframe
  src="https://udify.app/chatbot/xxxxxxxxxxxxxxxx"
  style="width: 100%; height: 100%; min-height: 700px"
  frameborder="0"
  allow="microphone">
</iframe>

ステップ2: WordPressに貼り付ける

Gutenbergエディターを使う場合:

投稿または固定ページを編集
「+」ボタンからブロックを追加
「カスタムHTML」ブロックを選択
コピーしたiframeコードを貼り付けて保存

ウィジェットエリアに設置する場合:

WordPress管理画面 > 外観 > ウィジェット
「カスタムHTML」ウィジェットをサイドバーまたはフッターに追加
iframeコードを貼り付けて保存

iframeのカスタマイズ

チャットボットの表示サイズや見た目を調整するには、style 属性を変更します。

<!-- 固定サイズで設置する場合 -->
<iframe
  src="https://udify.app/chatbot/xxxxxxxxxxxxxxxx"
  style="width: 400px; height: 600px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
  frameborder="0"
  allow="microphone">
</iframe>

方法2: JavaScriptバブルボタンでの埋め込み

JavaScriptを使った埋め込みでは、画面右下に浮かぶ「バブルボタン」としてチャットボットを設置できます。ユーザーがボタンをクリックするとチャットウィンドウが展開するため、サイトのレイアウトを大きく変更せずに設置できます。

ステップ1: Difyからスクリプトコードを取得

Dify管理画面でアプリを開く
「公開」→「埋め込む」タブ
「スクリプト」タブを選択
JavaScriptコードをコピー

コードは以下のような形式です。

<script>
  window.difyChatbotConfig = {
    token: 'xxxxxxxxxxxxxxxx'
  }
</script>
<script
  src="https://udify.app/embed.min.js"
  id="xxxxxxxxxxxxxxxx"
  defer>
</script>

ステップ2: WordPressのheadタグに挿入

全ページに表示させるには、<head> タグ内にスクリプトを挿入するのが効率的です。

テーマのfunctions.phpを使う場合（推奨）:

function add_dify_chatbot() {
    ?>
    <script>
      window.difyChatbotConfig = {
        token: 'xxxxxxxxxxxxxxxx'
      }
    </script>
    <script
      src="https://udify.app/embed.min.js"
      id="xxxxxxxxxxxxxxxx"
      defer>
    </script>
    <?php
}
add_action('wp_head', 'add_dify_chatbot');

このコードを子テーマの functions.php に追記します。（親テーマのfunctions.phpを直接編集するとアップデート時に上書きされる可能性があります。）

プラグインを使う場合:

「Head, Footer and Post Injections」などのプラグインを使えば、コードを直接phpファイルに書かなくてもheadタグにスクリプトを挿入できます。

特定ページのみに表示させる方法

全ページではなく、お問い合わせページや製品詳細ページのみにチャットボットを表示させたい場合は、以下のようにWordPressの条件分岐タグを使います。

function add_dify_chatbot_conditional() {
    // お問い合わせページ（スラッグ: contact）のみに表示
    if ( is_page('contact') ) {
        ?>
        <script>
          window.difyChatbotConfig = {
            token: 'xxxxxxxxxxxxxxxx'
          }
        </script>
        <script src="https://udify.app/embed.min.js" id="xxxxxxxxxxxxxxxx" defer></script>
        <?php
    }
}
add_action('wp_head', 'add_dify_chatbot_conditional');

よくあるトラブルと解決方法

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

Dify側でアプリが「公開」状態になっているか確認
ブラウザの開発者ツール（F12）でコンソールエラーを確認
Content Security Policy（CSP）の設定でiframeや外部スクリプトがブロックされていないか確認

スマートフォンで表示が崩れる

iframeの場合は、親要素にレスポンシブ対応のCSSを追加します。

.chatbot-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
}
.chatbot-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

セキュリティ警告が表示される

WordPressのサイトがHTTPS（SSL）でない場合、HTTPのiframeは表示されない場合があります。まずサイトのHTTPS化を行ってください。

ボットマでブランドに合ったデザインで埋め込む

DifyをそのままWordPressに埋め込む場合、デザインはDifyのデフォルトスタイルに限定されます。ブランドカラーやサイトのデザインに合わせてカスタマイズしたい場合は、ボットマを経由した埋め込みが最適解です。

ボットマを使うと以下が可能になります。

デザインの完全カスタマイズ チャットウィンドウのカラー・ボタンのアイコン・フォントをGUIで自由に設定できます。サイトのブランドカラー（例: コーポレートカラーの青や緑）に合わせることで、チャットボットが浮いて見えることなく自然に溶け込みます。

ユーザー情報の収集 チャット開始前に名前・メールアドレス・会社名などを入力してもらうフォームを設置できます。WordPressのお問い合わせフォームと同様に、リード情報を収集できます。

会話管理と通知 誰がいつどんな内容を話したかを管理画面でリアルタイムに確認できます。新しい会話が始まるとメール通知が届くため、重要な問い合わせを見逃しません。

ボットマが生成する埋め込みコードをWordPressに貼り付けるだけで、上記の機能がすべて有効になります。iframeとJavaScriptバブルの両方の埋め込み形式に対応しています。

まとめ

DifyチャットボットをWordPressに埋め込む方法は大きく2つです。

iframeによる埋め込み: シンプルで技術的な知識が少なくても対応可能。特定のページにチャットエリアを設置したい場合に向いている。
JavaScriptバブルによる埋め込み: 全ページに浮かぶチャットボタンとして設置。サイトのレイアウトを変えずに導入できる。

いずれの方法もDify管理画面からコードをコピーしてWordPressに貼り付けるだけで実現できます。さらにブランドに合ったデザインや運用管理機能が必要な場合は、ボットマを活用することで、よりプロフェッショナルな公開が可能になります。

ボットマでDifyチャットボットをもっと便利に

ボットマは、DifyのチャットボットにUI/UXカスタマイズ・会話スレッド管理・メール通知・入力フォーム・アクセス制限機能を追加できるSaaSプラットフォームです。

ボットマを無料で試す →

DifyチャットボットをWordPressに埋め込む方法【ステップ別解説】