検索
連載

こんなに簡単　DifyでカスタマーサポートAIチャットbotをWebサイトに組み込む方法：「生成AI」×ノーコードツール「Dify」で学ぶ、チャットbot構築のいろは（2）

ノーコードでAIチャットbotを作成できるDifyの入門連載。今回は、Difyで作成したカスタマーサポート用チャットbotをWebサイトへ簡単に組み込む方法を解説します。iframeやウィジェットボタンによる設置手順や、デザイン・カラースキーマのカスタマイズ方法も紹介します。

Share
Tweet
LINE
Hatena
「「生成AI」×ノーコードツール「Dify」で学ぶ、チャットbot構築のいろは」のインデックス

連載：「生成AI」×ノーコードツール「Dify」で学ぶ、チャットbot構築のいろは

本連載のサンプルコードをGitHubで公開しています。こちらからダウンロードしてみてください。


はじめに

　ノーコード／ローコードでAIアプリ構築を構築できるオープンソースプラットフォーム「Dify」を活用して、AIチャットbot作成のいろはを解説する本連載。前回はDifyを使って、架空の化粧品メーカー「超青春製薬株式会社」が販売する化粧品「超新青オールインワン」のカスタマーサポート用のチャットbotを作成しました。今回は、作成したチャットbotを実際のWebサイトに組み込む方法について解説します。

DifyのWebサイト埋め込み機能の概要

　Difyでは、作成したチャットbotを単体のページとして公開するだけでなく、既存のWebサイトや特定のページに埋め込む機能が提供されています。これにより、企業のカスタマーサポート窓口やFAQページなどに簡単にチャットbotを組み込むことが可能です。

　埋め込みには、以下の3種類の方法があります（図1）。

  1. iframeで埋め込み：Webページにiframeタグを使ってチャット画面を埋め込む方法
  2. ウィジェットボタンを表示：Webページの特定の位置にウィジェットボタンを表示し、クリックするとチャット画面がポップアップする方法
  3. Google Chrome拡張機能を使用：Google Chromeの拡張機能で、ブラウザ画面に常にウィジェットボタンを表示してチャットbotを利用する方法

図1　Webサイト埋め込み方法の種類
図1　Webサイト埋め込み方法の種類

　今回は1.と2.の方法について、実際にサンプルを使って解説します。なお、本記事では2の方法を「ウィジェットボタン」と呼びますが、Difyのマニュアルでは「バブルボタン（Bubble Button）」と表現されています。

　ちなみに、3.の方法は、ユーザーが自分のブラウザ（Google Chrome）にDify Chatbotの拡張機能をインストールして利用するものです。今回のようなカスタマーサポートではユーザーに拡張機能の設定をさせることは考えにくいため、本記事では割愛します。

準備

　Difyはノーコードでチャットbotを作成できるのが大きな魅力ですが、今回は「自社のWebサイトにチャットbotを組み込む」ことを模擬するため、Webサイト管理者になったつもりで、HTMLを編集していきます。とはいえ、ほとんどDifyで生成されたコードをコピー＆ペーストするだけです。

　まずはコードを編集するための環境を確認しましょう。

Visual Studio Codeのセットアップ

　本記事ではVisual Studio Code（以下、VS Code）を使って、ファイルを編集します。VS Codeをインストールしていない方は、公式サイトからダウンロードしてインストールしてください。また、Webサイトの動作確認は、VS CodeでLive Serverを起動して行います。VS Codeに拡張機能「Live Server」をインストールし、以下の手順でサンプルプロジェクトを起動します（図2）。

  1. サンプルコードのフォルダをVS Codeで開く
  2. 画面右下の「Go Live」をクリックする
    • もし「Go Live」が表示されない場合は、VS Codeの拡張機能として「Live Server」がインストールされているかどうか確認する
    • サーバは5500番ポートで起動する
  3. （自動起動が有効になっている場合）ブラウザが起動し、http://localhost:5500/のようなURLが表示される
    • もしブラウザが自動で起動しない場合は、ブラウザでhttp://localhost:5500/を開く
図2　VS CodeのLive Server起動
図2　VS CodeのLive Server起動

サンプルコードの確認

　では、サンプルコードを確認しましょう。サンプルコードをGitHubからダウンロードして展開してください。02フォルダの中に2つのHTMLコードを用意しています。

  1. iframe.html：iframeでチャットbotを埋め込むページ
  2. widget.html：ウィジェットボタンを表示するページ

Webサイトへのチャットbotの埋め込み

　DifyのチャットbotをWebサイトに埋め込んでみましょう。

iframeでチャットbotを埋め込む

　最初はiframeを使ってチャットbotを埋め込む方法を見ていきます。

　Difyの「スタジオ」画面にアクセスし、前回作成した「超新青オールインワン カスタマーサポート」アプリを開きます。右上の「公開する」ボタンから「サイトに埋め込む」を選択します（図3）。

図3　Difyの埋め込みメニュー
図3　Difyの埋め込みメニュー

　埋め込み方法の選択画面が表示されるので、一番左を選択します（1）。画面下にiframeタグが表示されるので、これをコード右上のボタン（2）でコピーします（図4）。

図4　一番左のiframe埋め込みを選択し、ソースコードをコピー
図4　一番左のiframe埋め込みを選択し、ソースコードをコピー

　次に、VS Codeでiframe.htmlを開き、<!-- ここにDifyのコードをコピー -->の部分に先ほどコピーしたコードを貼り付けて保存します（リスト1）。

<iframe
  src="https://udify.app/chatbot/チャットbotID"
  style="width: 100%; height: 100%; min-height: 700px"
  frameborder="0"
  allow="microphone">
</iframe>
リスト1　iframeでチャットbotを埋め込むコード

　ブラウザで、http://localhost:5500/02/iframe.htmlを開くと、図5のようにチャットbotが表示されます。

図5　iframeでチャットbotを埋め込んだ画面※商品写真は生成AIによるイメージ（以降も同様）
図5　iframeでチャットbotを埋め込んだ画面※商品写真は生成AIによるイメージ（以降も同様）

　チャットbotを単体のページとして表示しているときと同様、最初のメッセージや選択肢が表示され、ユーザーはチャットbotと対話できるようになっています。

　この例では画面右端にiframeを配置するようにスタイルシートを調整しています。iframeを置く場所の調整のみで、Webサイトのデザインに合わせて自由に配置できます。お問い合わせページなどに設置する場合は、iframeを使った埋め込みが適しているでしょう。

チャットbotのウィジェットボタンを表示する

　次に、ウィジェットボタンを表示する方法を見ていきましょう。Difyの「スタジオ」画面で、同じく「埋め込み」メニューを開きます。今度は真ん中の「ウィジェットボタン」を選択します。画面下にコードが表示されるので、これをコード右上のボタン（2）でコピーします（図6）。

図6　真ん中を選択し、ソースコードをコピー
図6　真ん中を選択し、ソースコードをコピー

　次に、VS Codeでwidget.htmlを開き、<!-- ここにDifyのコードをコピー -->の部分に先ほどコピーしたコードを貼り付けて保存します（リスト2）。

<script>
 window.difyChatbotConfig = {
  token: 'チャットbotID',
  systemVariables: {
    // user_id: 'YOU CAN DEFINE USER ID HERE',
    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
  },
 }
</script>
<script
 src="https://udify.app/embed.min.js"
 id="チャットbotID"
 defer>
</script>
<style>
  #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
  }
</style>
リスト2　ウィジェットボタンを表示するコード

　ブラウザで、http://localhost:5500/02/widget.htmlを開くと、図7のようにウィジェットボタンが表示されます。

図7　ウィジェットボタンを表示した画面
図7　ウィジェットボタンを表示した画面

　ウィジェットボタンをクリックすると、チャットbotがポップアップで表示され、ユーザーがチャットbotと対話できます。

　初期状態では画面の隅に表示され、ユーザーが必要なときにチャットを開始できるため、商品ページに設置する場合はこちらが適していそうです。ただし、このボタンを押すとチャットが始まることが分かりにくい場合もあるため、補助的な説明を入れるなどの工夫が必要かもしれません。

　いずれの方法でも、わずか数行のコードをコピー＆ペーストするだけで、カスタマーサポート付きの商品ページが作成できました。

チャット画面のカラースキーマについて

　ここで実際のWebサイトへの組み込みに当たって注意すべき点を紹介します。

　Difyのチャット画面は、既定ではユーザーの環境設定（OSやブラウザ設定）のカラースキーマが反映されます（図8）。

図8　ブラウザのカラースキーマ設定（Microsoft Edgeの例）
図8　ブラウザのカラースキーマ設定（Microsoft Edgeの例）

　つまり、ユーザーがダークモードを有効にしている場合、チャット画面もダークモードになります。これはWebサイトがカラースキーマに対応している場合はいいのですが、今回のサンプルサイトのように明るい色のみで作成されたサイトの場合は、図9のようにチャット画面だけがダークモードになってしまうことになります。

図9　意図せずダークモードになってしまったチャット画面
図9　意図せずダークモードになってしまったチャット画面

　このようにWebサイトとチャット画面のカラースキーマが異なると、違和感のある表示になってしまいます。特にWebサイト制作者がカラースキーマを設定していないなど、構築時に気付かない場合もあるかもしれませんので注意が必要です。

　チャット画面のカラースキーマについては、公式マニュアルでは触れられていませんが、CSSでcolor-schemeを明示的に指定することにより変更できました。

iframeでのカラースキーマ指定

　iframeで埋め込んでいる場合は、iframeのstyle属性にリスト3のようにcolor-schemeを指定します。

<iframe src="https://udify.app/chatbot/チャットbotID"
    style="width: 100%; height: 100%; min-height: 700px; color-scheme: light;"
    frameborder="0" allow="microphone">
</iframe>
リスト3　カラースキーマの指定（iframe）※ファイル名：02/iframe.html

　ここではcolor-scheme: light;と指定して、常にライトモードで表示されるようにしています。

ウィジェットボタンでのカラースキーマ指定

　ウィジェットボタンを表示する場合は、チャットウィンドウのコンテナである#dify-chatbot-bubble-windowのスタイルにcolor-schemeを指定します（リスト4）。

#dify-chatbot-bubble-window {
    color-scheme: light; /* カラースキーマをライトモードに固定 */
    width: 24rem !important;
    height: 40rem !important;
}
リスト4　カラースキーマの指定（ウィジェットボタン）※ファイル名：02/widget.html

　このように指定することで、ブラウザのカラースキーマ設定がダークモードであっても、チャット画面はライトモードで表示できました（図10）。

図10　カラースキーマの指定でライトモードに固定されたチャット画面
図10　カラースキーマの指定でライトモードに固定されたチャット画面

【補足】モバイル対応について

　Difyのチャットbotは、特別な設定なく、スマートフォンなどのモバイル端末でも利用可能です。ウィジェットボタンを使用するだけで以下のようにチャット画面がいい感じに表示できます。ただし、iframeで埋め込む場合は、チャット画面を表示する領域をサイトのレイアウトに合わせて調整する必要があります（図11）。

図11　スマートフォンでウィジェットボタンからチャット画面を開いた例
図11　スマートフォンでウィジェットボタンからチャット画面を開いた例

チャット画面のカスタマイズ

　埋め込んだチャット画面は、デフォルトでDifyのテーマカラーが適用されています。あまり自由にスタイルを変更することはできませんが、多少のカスタマイズが可能です。

コンテナのカスタマイズ

　チャット画面はコンテナとなっている要素のスタイルの調整のみ可能です。この場合はcolor-schemeと同様にiframeのstyle属性や、#dify-chatbot-bubble-windowのスタイルを調整します。例えば背景色をオレンジに変更したい場合、スタイルにbackground-color: orange;を追記します（リスト5）。

<iframe src="https://udify.app/chatbot/チャットbotID"
    style="width: 100%; height: 100%; min-height: 700px; background-color: orange;"
    frameborder="0" allow="microphone">
</iframe>
リスト5　チャット画面の背景色変更※ファイル名：02/iframe.html

　特にWebサイトの背景色とチャット画面のイメージを合わせたい場合などに有効でしょう（図12）。

図12　チャット画面の背景色を指定した例
図12　チャット画面の背景色を指定した例

ウィジェットボタンのカスタマイズ

　ウィジェットボタンのスタイル変更は、#dify-chatbot-bubble-buttonに対してCSS変数を上書きすることで行います。試しにDifyからコピペしたコードのbackground-color: #1C64F2 !important;となっている部分をリスト6のように置き換えてみてください。

#dify-chatbot-bubble-button {
    /* ボタンの背景色、デフォルトは #155EEF */
    --dify-chatbot-bubble-button-bg-color: #FF4500;
    /* ボタンの幅、デフォルトは 50px */
    --dify-chatbot-bubble-button-width: 64px;
    /* ボタンの高さ、デフォルトは 50px */
    --dify-chatbot-bubble-button-height: 64px;
    /* ボタンの角丸、デフォルトは 25px */
    --dify-chatbot-bubble-button-border-radius: 16px;
}
リスト6　ウィジェットボタンのスタイル変更※ファイル名：02/widget.html

　このCSS変数の設定で、ウィジェットボタンが少し大きな角丸四角形になって、色もオレンジ色になりました（図13）。

図13　ウィジェットボタンをカスタマイズした例
図13　ウィジェットボタンをカスタマイズした例

　この他利用できるCSS変数は、公式ドキュメント（Webサイトへの埋め込み | Dify）を参照してください。

　ウィジェットボタンはスタイルの他に、draggable属性を指定することでドラッグで移動可能にすることもできます。デフォルトでは画面中のどこにでも移動できますが、dragAxis属性を指定することで、X軸またはY軸のみに制限できます。どちらかの軸に制限する方が直感的でしょう（リスト7、図14）。

window.difyChatbotConfig = {
  token: 'チャットbotID',
  draggable: true, // ドラッグ可能にする
  dragAxis: 'y', // ドラッグ可能な軸 (both、x、y のいずれか)
}
リスト7　ウィジェットボタンのドラッグ設定※ファイル名：02/widget.html
図14　Y軸方向のみドラッグ可能にしたウィジェットボタン
図14　Y軸方向のみドラッグ可能にしたウィジェットボタン

チャット画面のテーマカラーの変更

　チャット画面のタイトルや送信ボタンの色を変更するには、Difyの「スタジオ」画面左上のメニューから「設定」を選択し、「チャットbotのカラーテーマ」にカラーコードを設定します。ここでは #FF4500（オレンジ色）を指定してみます（図15）。

図15　Difyのテーマ設定画面
図15　Difyのテーマ設定画面

　widget.htmlをブラウザで開くと、図16のようにチャット画面のタイトルや送信ボタンの色がオレンジ色に変更されていることが分かります。

図16　テーマカラーの設定が反映されたチャット画面
図16　テーマカラーの設定が反映されたチャット画面

　また、チャットbotのアイコンも同じ画面から設定できますので、企業や商品のイメージに合ったものを選択するとよいでしょう。

まとめ

　DifyのチャットbotをWebサイトに埋め込む方法として、iframeを使った埋め込みとウィジェットボタンを使った埋め込みを紹介しました。また、実際のサイトに組み込むときに必要となりそうな、チャット画面のカラースキーマやテーマカラーの変更についても説明しました。

　ここまで見てきたように「取りあえずWebサイトにチャットbotを組み込みたい」という用途には十分な機能を有しており、実際の企業サイトで使用しても違和感はないでしょう。このような機能の組み込みが数行のコードのコピー＆ペーストで実現できるのは大きな魅力です。ぜひ一度試してみてください。

筆者紹介

WINGSプロジェクト 山田研二（ヤマダ ケンジ）

株式会社MSEN CTO（https://msen.jp/）。高校卒業後、大阪大学の研究所で働きながらプログラミングやWebデザインをはじめ、以後20年以上、Webサイト制作や業務システムの構築を手掛けている。フリーソフトも幾つか公開している。好きな言語はC#とTypeScript、趣味は旅行。

・GitHubアカウント（https://github.com/kenzauros）

WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティー（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手掛ける。2021年10月時点での登録メンバーは55人で、現在も執筆メンバーを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。

・サーバーサイド技術の学び舎 - WINGS（https://wings.msn.to/）
・RSS（https://wings.msn.to/contents/rss.php）
・X: @WingsPro_info（https://x.com/WingsPro_info）
・Facebook（https://www.facebook.com/WINGSProject）


Copyright © ITmedia, Inc. All Rights Reserved.