![見出し画像](https://assets.st-note.com/production/uploads/images/142269107/rectangle_large_type_2_176fc179bb17bffe5f0e5c2bfaddfa1f.png?width=1200)
【絶対に失敗しないDify】WordPress埋め込み編
こんにちは、Choimirai Companyのサンミンです。
0 はじめに
絶対に失敗しないDifyの第3弾は、WordPress埋め込み編です。Difyで開発したアプリを他のサイトへ埋め込む方法には3つのオプションがある。
①IFrameコードのコピペ
②Webサイトのチャットボット
③Chromeブラウザの拡張機能
![](https://assets.st-note.com/img/1716985718976-uM2NwikCJb.png?width=1200)
今回のnoteでは2つ目のオプションを使って、WordPressサイトへ埋め込む方法を紹介します。
1 材料
①Difyのサイト
②WordPressサイト
③WPCode(無料版)
2 Difyからコードをコピー
Difyでアプリを開発しますと公開できるサイトが自動で生成されます。画面左にある①概要メニューを押下し、②Embeddedのをクリックしますと下記のポップアップが表示されます。
![](https://assets.st-note.com/img/1716986196831-403jfPrXJt.png?width=1200)
真ん中のオプションを選択し、ポップアップの下に表示されるコードをコピーしてください。こちらのコードを後ほどWordPressサイトで貼り付けます。
<script>
window.difyChatbotConfig = {
token: 'TGYtxxxx',
baseUrl: 'https://ai.choimirai.com'
}
</script>
<script
src="https://ai.choimirai.com/embed.min.js"
id="TGYtxxxxx"
defer>
</script>
3 DifyからWordPressへ
DifyからコピーしたコードをWordPressのWPCodeへ貼り付けます。WPCodeプラグインのメニューから「Add Snippet」を選択しますと次の画面が表示されます。
![](https://assets.st-note.com/img/1716987685666-Fe99hrj19z.png?width=1200)
ページから「Add Your Custome Code」をクリックし、次の図を参考にSnippetの名前など必要な情報を入力してください。ページを保存する際は、Snippetが有効(Active)になっていることを忘れずに。
※重要:Difyのチャットボットを埋め込むためにはSnippetが有効になっている必要があります。
![](https://assets.st-note.com/img/1716987467089-EcIMEUjQ33.png?width=1200)
Snippetを保存した後、Difyチャットボット用の⑤Shortcodeをコピーしてください。こちらのコードはChatbotを埋め込むページに貼り付けます。全てのページに埋め込みたい場合は、④Shortcodeではなく、Auto Insertを選択してください。
4 ページへ埋め込む
WPCodeからShortcodeを取得できましたら残るのは該当ページへショートコードを貼り付けるだけです。
![](https://assets.st-note.com/img/1716990200808-eovNkj6Y4M.png?width=1200)
Shortcodeが埋め込まれたページを開きますと次のように右下にチャットボットのアイコンが表示されます。
![](https://assets.st-note.com/img/1716990303625-Y9jJygCHhO.png?width=1200)
こちらのアイコンをクリックしますとチャットボットのポップが現れ、チャットが始められます。
![](https://assets.st-note.com/img/1716990361782-u2GiC57102.png?width=1200)
5 Dify 101の宣伝
Dify 101は、Difyの公式アンバサダーと一緒にDifyの基礎から始め、RAGの実装やクラウドでのデプロイまで体験できるプログラムです。
Difyは今後、動詞のように使われるほど普及されていくと思っています。未来で待っている自分のため、ぜひ。始めるのなら「今」です。
Difyはもはや動詞として使われるとみている。
— sangmin.eth | Dify Ambassador (@gijigae) May 19, 2024
▼Dify(品詞:動詞)
面倒なことを複数のAIやツールを使って解決すること😇
AIの進化で「面倒なことはDifyにやらせよう(Dify it!)」という流れが確実に定着していく。始めるのなら「今」です。#Dify部 https://t.co/kSHmSFQtJY pic.twitter.com/lmcLak6r0l
6 まとめ
Difyを使えば、WordPressにあるページをスクレイピングし、ベクトルDBに保存+RAGを実装することも難しくない。また、上記で紹介した方法を使いますとDifyで実装したRAGをWordPressのチャットボットとしての登録も簡単です。Difyと一緒に可能性だらけの世界へ踏み出しませんか?
この記事が気に入ったらサポートをしてみませんか?