【完全図解】プログラミング不要！DifyのAIチャットをWordPressに5分で直接埋め込む方法

2026年8月6日

はじめに

「せっかくDifyで賢いAIを作ったから、自社のホームページや自分のブログに来てくれた人にも使ってもらいたいな…」と感じたことはありませんか？

わざわざ別のページに案内しなくても、いつものホームページの画面内でAIがサクッと答えてくれたら、お客様にとってもすごく便利ですよね。

この記事では、Difyで作ったAIチャットを、Webサイトにポンッと直接埋め込む「AIカスタマーサポート」の作り方を、世界一わかりやすく解説します。

「本番のホームページをいじるなんて、壊れそうで怖い…」と思うかもしれませんが、ご安心ください。

そして、サイトのシステムを絶対に壊さない「安全な専用プラグイン」を使って、指定の場所に「魔法のコード」を貼り付けるだけです。
最短5分で、24時間365日休まずお客様の質問に答えてくれる頼もしいアシスタントが誕生します。

失敗しない確実な手順をできるだけわかりやすく解説しますので、一緒に進めていきましょう！

完成イメージ

こんなシーンでの活用に適しています

自社サイトの「自動お問い合わせ窓口」として： サイト右下にアイコンを設置し、料金や営業時間などのよくある質問へ24時間対応します。
ブログの「案内役」として： 記事の途中にチャットを埋め込み、読者がその場で内容について質問できる新しい体験を提供します。
社内ヘルプデスクとして： 社内ポータルに埋め込み、就業規則や社内ルールについての質問をAIが即座に解決します。

Difyで自動化する

項目	内容
メリット	💡 24時間お客様をお待たせしない！・大幅な工数削減：よくある質問をAIが24時間自動で代行します。・顧客の離脱防止：ユーザーがサイトから離れずに、その場で疑問を解決できます。
デメリット	⚠️ 最初の1回だけ設定が必要です・初期設定の手間：ホームページの裏側に一度だけコードを貼り付ける必要があります。・定期的なメンテナンス：AIをより賢く育てるために、定期的なプロンプトの見直しが必要です。
難易度・面倒さ	★☆☆☆☆（手順通りに進めればとってもカンタン！）プログラミングの知識は1ミリも必要ありません。Difyがくれたコードをそのまま「コピー＆ペースト」するだけで1発で完成します。
特徴	🛠️ ノーコード＆安心のセキュリティ・ノーコードで実装可能：難しいプログラムを書く必要は一切ありません。・高セキュリティ環境：社内のオンプレミス環境にも設置できるため、社外秘のデータや機密度の高い会議ルールを扱う場合でも安心して運用できます。
価格	💰 基本無料でスタート可能！・Difyの機能として、Webサイトへの埋め込み自体は無料で行えます。（※選択するAIモデルの利用プランに応じた、少額の通信料のみで運用可能です）

事前準備

以下のアカウント・環境を用意してください。

Difyのアカウントと、作成済みのAIチャットアプリ
（※アプリの中身は初期状態でも構いません。Dify上で「アプリ」が作られていればOKです！）
自社サイト（WordPress）の管理画面ログイン権限

設定手順

お使いのサイトのデザインに合わせて、「特定のページだけに埋め込むパターン（A）」か「サイト全体の右下にボタンを出すパターン（B）」のどちらかを選んで進めてください。

ステップ1：Difyの画面から「魔法のコード」を発行しよう

【超重要】コードを取得する前の絶対ルール！
Difyで作ったAIは、ただ作成しただけの状態では外部のサイトから読み込むことができません。そのままコードを貼り付けても、画面は「真っ白のまま」になってしまいます。
埋め込みの作業を始める前に、必ずDifyの画面右上の青いボタン「公開する」をクリックし、「更新」（初めての場合は「公開」）を押してください。最新のAIをインターネット上に反映させることで、初めて指定のURL（コード）が正常に機能するようになります。

まずはDifyの画面を開いて、あなたのサイトに埋め込むための専用コード（部品）を取得します。

①Difyにログインする
パソコンでDifyを開き、あらかじめ作成しておいたAIチャットアプリの編集画面（ブロックが矢印でつながっているオーケストレーション画面）を開きます。

②「埋め込み」メニューを開く
画面の一番左上にある、アプリのアイコンをクリックします。左側に現れたメニューバーの中にある、「埋め込み」という文字を探してクリックしてください。

③準備完了
画面の真ん中に「Webサイトへの埋め込み」という画面が表示され、「3種類の埋め込み方法」が並んでいれば準備OKです！
ページはそのまま次のステップへ進みます。

ステップ2：実際の自社サイト（WordPress）へコードを貼り付けよう

【パターンA】特定のページの中にドーンと表示させたい場合（iFrame方式）

ブログ記事の途中や、会社概要のページの一部など、「特定のページ」の中に直接チャット画面を設置する手順です。

①Difyからコードをコピーする
Difyの画面の「1. iFrameをHTMLに追加する」の下にある枠から、<iframe src=... で始まるコードの右上にある「コピー」ボタンを押します。

②WordPressの編集画面を開く
まずは、ご自身のWordPressの管理画面（ダッシュボード）にログインしてください。

ブログなどの「記事」に載せたい場合：
左側の黒いメニューから「投稿」＞「投稿一覧」をクリックし、AIチャットを埋め込みたい記事のタイトルをクリックします。

会社概要やお問い合わせなどの「固定ページ」に載せたい場合：
左側の黒いメニューから「固定ページ」＞「固定ページ一覧」をクリックし、同様に埋め込みたいページのタイトルをクリックします。

③「カスタムHTML」ブロックを追加する
コードを貼り付けたい場所（段落の間など）で「＋（ブロックを追加）」ボタンを押し、検索欄に「HTML」と入力して「カスタムHTML」ブロックを選択します。

④コードをそのまま貼り付ける
現れた黒い枠の中に、コピーしてきたパターンAのコードをそのまま貼り付け（ペースト）します。

⑤プレビューで確認して公開！
画面右上の「プレビュー」＞「新しいタブでプレビュー」をクリックし、ページの中にAIチャットが綺麗に表示されていれば、そのまま「公開（更新）」して完了です！

【パターンB】サイト全体の右下に「チャットボタン」をフワッと出したい場合（script方式）

どのページを開いても、常に画面の右下に丸いアイコンを表示させておきたい場合の、一番カンタンで安全な手順です。
※サイトの裏側を安全に編集するため、無料で使える定番プラグインを使用します。

①Difyからコードをコピーする
Difyの画面で「2. scriptをHTMLに追加する」をクリックします。すぐ下に新しいコードが現れるので、<script> から </style> までの記述が含まれたコードブロック右上の「コピー」ボタンを押します。

②WordPressに専用の無料プラグイン「WPCode」を追加する
安全にコードを貼り付けるための「WPCode」という無料プラグイン（拡張機能）を導入します。

③追加画面を開く
WordPressの管理画面の左側にある黒いメニューから、「プラグイン」 にマウスを合わせ、「新規追加（またはプラグインを追加）」 をクリックします。

④プラグインを検索する
画面の右上にある「プラグインの検索…」という検索窓に、半角英数で wpcode と入力して検索します。

⑤インストールする
検索結果に「WPCode – Insert Headers and Footers」という青いアイコンのプラグインが表示されます。その右上にある 「今すぐインストール」 ボタンをクリックします。

⚠️忘れずに「有効化」する
数秒待つと、先ほどのボタンが青色の 「有効化」 というボタンに変わります。必ずこの「有効化」ボタンもクリックしてください。
（※これを押さないと機能がオンになりません）

⑥コードの貼り付け画面を開く
左メニューに新しく追加された「Code Snippets,コードスニペッド（またはWPCode）」の中の「Header & Footer」をクリックします。

⑦「Footer」にコードを貼り付けて保存する
画面の中にある「Header」「Body」「Footer」という3つの枠のうち、一番下にある「Footer」の枠内に、コピーしてきたパターンBのコードをそのまま貼り付けます。貼り付けたら、画面右上にある「変更を保存（Save Changes）」ボタンをクリックしてください。

⑧実際のサイトを確認する
ご自身のホームページを開いてみてください。画面の右下に青い吹き出しマークがフワッと現れ、クリックしてチャットが起動すればすべての設定が完了です！

💡 もし失敗しても大丈夫！
万が一表示がおかしくなった場合は、WPCodeの「Footer」に貼り付けたコードをすべて消して保存し直せば、一瞬で元のサイトに戻ります。安心して作業してください。

よくある質問

プログラミング未経験でもDifyで構築できますか？: Dify自体はノーコードツールなので、基本的なチャットAIなら未経験でも十分作れます！ただし、いざ本格的な業務AIを作ろうとすると「このデータをどうやって引き渡すか」といった、パズルを組み立てるような論理的思考が必要になる場面も出てきます。この記事の手順通りに進めれば埋め込みは簡単ですが、もしエラーが起きたときは「自分で原因を調べて解決する力」が少しだけ必要になります。
自分の業務が自動化できる内容なのか判断がつきません。: 「うちの業務って、そもそもAIに任せられるのかな？」と迷ったまま手探りで進めると、膨大な時間を無駄にしてしまうことがあります。そんな時は一人で抱え込まず、専門サービスが提供している少額・短期間の「お試し開発」を利用して、プロの目線で実現可能かチェックしてもらうのが一番の近道です。

なかなかうまくいかないときは？

初回セットアップでは「コマンドを実行したが何も変わらない」「認証の画面が出て止まってしまった」といったケースが起こりやすいです。また、セットアップ後も「AI が変更したファイルが多すぎてどれを確認すればよいか分からない」「GitHub へのアップロードのタイミングがつかめない」という運用面の迷いが生じることがあります。

そこで、おすすめしたいのが「ジドウカ」です。

ジドウカは、これまで合計800タスク以上の業務の自動化をしてきた実績のある法人専用の自動化サービスです。