今回はDifyで作成したチャットボットを自社（自分）に導入する方法を解説します。
最初に作成したアプリケーションを公開します
まず、最初にワークフロー作成画面に遷移します。
ワークフロー作成が終了したら、右上の「公開する」を選択します。
公開が完了すると「サイトに埋め込む」が有効になるので、選択しましょう。
チャットアプリをWebサイトに埋め込む
「サイトに埋め込む」を選択すると、下記のようなタブが出てくるので目的に沿った方法を選択しましょう。
3種類のチャットボットの利用方法があるので左から解説します。
- iframeで埋め込む
- サイトの右下にチャットボット表示ボタンを表示させる
- chromeの拡張機能を利用する
iframeで埋め込む
iframeでWebサイトの任意の場所にチャットボットを設置することが可能です。
問い合わせの窓口として問い合わせのページに設定するなどすれば効果的でしょう。
「サイトに埋め込む」を選択すると埋め込み用のタグが表示される（画像では黒塗りしています。）のでそれをコピーしてワードプレスに設置します。
そのままワードプレスにタグを設置しても、JabaScriptが無効化されてしまうので、スニペットを活用します。
ワードプレスにプラグイン「Code Snippets」を追加する
スニペットを利用するにあたり、プラグインの「Code Snippets」をインストールしましょう。
こちらは無料で利用することができます。
プラグインを有効化したら、新規追加にてPHPにて、下記のように追加します。
下記では指定した投稿のフッターにチャットボットを配置するようにしています。
チャットボットを挿入したい投稿と位置に合わせて任意で変更してください。
add_action('wp_footer', function() {
if (is_single(投稿ID)) {
?>
<iframe
src="https://udify.app/chatbot/あなたのID"
width="100%"
height="700px"
style="min-height:700px; border:none;"
frameborder="0"
allow="microphone">
</iframe>
<?php
}
});全ページの右下にチャットボットアイコンを表示させる
全ページの右下にチャットボットアイコンを表示させて、いつでもチャットボットを起動したい場合は、
真ん中のチャットアプリをウェブサイトに埋め込むを選択します。
先ほどと同じ要領でスニペットを利用し、ワードプレスに設置していきましょう。
chromeの拡張機能で、自作のチャットボットを応用する
chromeの拡張機能を利用すれば自作のアプリケーションを拡張機能を通じて呼び起こすことができます。
アプリケーションを作成したら、「ウェブサイトに埋め込む」の一番右側を選択し、chatbotのURLを取得します。
次に
https://chromewebstore.google.com/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf
にて拡張機能を追加しましょう。
先ほど取得したURLをコピーし、保存し、新規タブを開きます。
すると、chromeの右下にアイコンが表示されるようになります。
そちらで、自作のアプリケーション（チャットボット）をいつでも呼び起こすことが可能です。
下記のように応用可能ですので、例としてご覧下さい。