こんなに簡単　DifyでカスタマーサポートAIチャットbotをWebサイトに組み込む方法

” TOPAIを作り動かし守り生かすロー/ノーコードクラウドネイティブMS&Windows 連載 2025年7月17日 こんなに簡単　DifyでカスタマーサポートAIチャットbotをWebサイトに組み込む方法 「生成AI」×ノーコードツール「Dify」で学ぶ、チャットbot構築のいろは（2） ノーコードでAIチャットbotを作成できるDifyの入門連載。今回は、Difyで作成したカスタマーサポート用チャットbotをWebサイトへ簡単に組み込む方法を解説します。iframeやウィジェットボタンによる設置手順や、デザイン・カラースキーマのカスタマイズ方法も紹介します。 [山田研二（著）／山田祥寛（監修），WINGSプロジェクト] PC用表示 関連情報 Share Post LINE Hatena この記事は会員限定です。会員登録（無料）すると全てご覧いただけます。 連載：「生成AI」×ノーコードツール「Dify」で学ぶ、チャットbot構築のいろは 本連載のサンプルコードをGitHubで公開しています。こちらからダウンロードしてみてください。 目次 はじめに DifyのWebサイト埋め込み機能の概要 準備 Visual Studio Codeのセットアップ サンプルコードの確認 Webサイトへのチャットbotの埋め込み iframeでチャットbotを埋め込む チャットbotのウィジェットボタンを表示する チャット画面のカラースキーマについて iframeでのカラースキーマ指定 ウィジェットボタンでのカラースキーマ指定 チャット画面のカスタマイズ コンテナのカスタマイズ ウィジェットボタンのカスタマイズ チャット画面のテーマカラーの変更 まとめ はじめに 　ノーコード／ローコードでAIアプリ構築を構築できるオープンソースプラットフォーム「Dify」を活用して、AIチャットbot作成のいろはを解説する本連載。前回はDifyを使って、架空の化粧品メーカー「超青春製薬株式会社」が販売する化粧品「超新青オールインワン」のカスタマーサポート用のチャットbotを作成しました。今回は、作成したチャットbotを実際のWebサイトに組み込む方法について解説します。 DifyのWebサイト埋め込み機能の概要 　Difyでは、作成したチャットbotを単体のページとして公開するだけでなく、既存のWebサイトや特定のページに埋め込む機能が提供されています。これにより、企業のカスタマーサポート窓口やFAQページなどに簡単にチャットbotを組み込むことが可能です。 　埋め込みには、以下の3種類の方法があります（図1）。 iframeで埋め込み：Webページにiframeタグを使ってチャット画面を埋め込む方法 ウィジェットボタンを表示：Webページの特定の位置にウィジェットボタンを表示し、クリックするとチャット画面がポップアップする方法 Google Chrome拡張機能を使用：Google Chromeの拡張機能で、ブラウザ画面に常にウィジェットボタンを表示してチャットbotを利用する方法 図1　Webサイト埋め込み方法の種類 　今回は1.と2.の方法について、実際にサンプルを使って解説します。なお、本記事では2の方法を「ウィジェットボタン」と呼びますが、Difyのマニュアルでは「バブルボタン（Bubble Button）」と表現されています。 　ちなみに、3.の方法は、ユーザーが自分のブラウザ（Google Chrome）にDify Chatbotの拡張機能をインストールして利用するものです。今回のようなカスタマーサポートではユーザーに拡張機能の設定をさせることは考えにくいため、本記事では割愛します。 準備 続きを読むには、[続きを読む] ボタンを押して会員登録あるいはログインしてください。 続きを読む Copyright © ITmedia, Inc. All Rights Reserved. 関連情報 「生成AI」×ノーコードツール「Dify」で学ぶ、チャットbot構築のいろは 連載一覧 こんなに簡単　DifyでカスタマーサポートAIチャットbotをWebサイトに組み込む方法 ノーコードで実現！　DifyでカスタマーサポートAIチャットbotを作成する SpecialPR チェックしておきたい人気記事 大阪・関西万博 2025から見える、未来の地域共生 PR(Think LOCAL) 「犬と暮らす家」戸建ての事例集 PR(株式会社ウェブサポート) Temu（テム）の危険性とは？ PR(株式会社ウェブサポート) コンテナベースの継続的インテグレーションの利点／課題と、CIパイプライン、Docker Build高速化のコツ (1/2… NICT、サイバー脅威情報を自動集約できるWebアプリ「EXIST」を公開 Microsoft、プログラミング言語「TypeScript 3.4」のリリース候補版（RC）を公開 一にも二にも「防御」を――元CIAのCISOが提言した6つのセキュリティ対策 スマホの料金を安くしたい人は知っておくべきこと PR(株式会社ウェブサポート) 2018年の災害では34.2％で「BCPが機能した」、NTTデータ経営研究所が調査 Microsoftが.NET用オープンソース機械学習フレームワークの最新版「ML.NET 0.11」を公開 オンプレミスのWindows Server／SQL Server向けセキュリティ更新サービス「拡張セキュリティ更新プログ… IT開発者の75％以上が開発以外にも従事、楽天コミュニケーションズ調べ 「レンタカーよりカーシェアがいい」その理由に納得 PR(株式会社ウェブサポート) Mellanox、NVMe-oFでストレージを仮想化する「SNAP」を発表 ハイパーコンバージドインフラが有力な選択肢、ノークリサーチが中堅中小業のサーバ更新方針を調査 Google Cloudのハイブリッドソリューション「Cloud Services Platform」はどうなるのか聞い… 【Windows 10】できる人は知っているキーボードショートカット CI/CDパイプラインを妨げない形でセキュリティを実現すれば、「開発者や運用担当者に嫌われないWAF」は可能か 「老後も犬と暮らす」間取り実例集 PR(株式会社ウェブサポート) Googleが「Chrome Enterprise 73」をリリース デジタルトランスフォーメーションの進捗状況を測定するには AWSへ「電話システム」を移行するメリットはあるか？ (1/2) 「Temuで実質1万円がもらえる」理由に納得 PR(株式会社ウェブサポート) 【Windows 10】後々困らないように、分かりやすいコンピュータ名（PC名）に変更する2つの方法 2020年に向けて企業が開始すべきIT関連行動、ガートナージャパンが4つのポイントを発表 タイムズカーシェアの料金プランを解説！ PR(株式会社ウェブサポート) 基本情報技術者試験（Fundamental Information Technology Engineer Examin… Excelに入力フォームを作成、コントロールを追加、表示、ボタンでイベント実行 (1/3) デザインネタをWebで探す人が知っておきたい、日ごろのネタ収集と活用を効率化する4つのアプリ (1/3) 作業手順書はもういらない！ Puppetにおける自動化の定義書「マニフェスト」の書き方と基礎文法まとめ (1/5) 高速で安全、安定した専用線接続が理想のシステム構築のカギに――マンパワーが「ExpressRoute」を導入した理由 Bootstrap、Emmet、レスポンシブWebデザイン対応を強化したDreamweaver CC 2015を使ってみ… 「Bootstrap 4 alpha」が登場 タイムズカーとレンタカーはどちらが安い？ PR(株式会社ウェブサポート) より広がったカリキュラムを通過点に若者は上を目指す (1/2) 勉強会で明らかになった医療向けOSSの多様な活用法──電子カルテ、臨床試験データ解析、日本語医学用語プラットフォーム、画… 成長し続けるセキュリティ人材と悲嘆に暮れる情報流出被害者たち (1/3) Temuの無料ギフトをもらう方法 PR(株式会社ウェブサポート) マイクロソフトとレッドハットがクラウドで提携 カーセンサー、ゼクシィのサイトが取り入れている「アダプティブUX」とは何か (1/2) SAP HANA SPS11は、Cloud Foundry採用でアプリケーション環境を一新 ワイモバイルを検討している人は知っておくべきこと PR(株式会社ウェブサポート) 「フィッシング」の手口、お見せします ESET ウイルスラボ総責任者に聞く、オンラインバンキング攻撃の現状とIoT時代のセキュリティ (1/2) ラック、「DNSプロトコルを悪用する遠隔操作ウイルス」への注意喚起情報を公開 人間の記憶の仕組みを模したAI-Samuraiが海を渡る ヴイエムウェアのマルチクラウド戦略は、DevOps時代の情シスの役割を支えられるか 「Pokemon GO」のサーバダウン、複数のハッカーが犯行表明──8月1日の犯行予告も マイクロソフト、「Windows 10 Anniversary Update」と「対応SDK」をリリース 転職組マネジャーが掴んだ「上流」への道　開発者の本懐とは PR( @IT) Recommended by Coding Edge 記事ランキング AWSが提案する“AIエージェント開発”時代のIDE「Kiro」、どんな機能があるのか こんなに簡単　DifyでカスタマーサポートAIチャットbotをWebサイトに組み込む方法 「VS Code 1.102」新機能まとめ　カスタム指示の生成、MCP設定の“ファーストクラスリソース”化など 「Docker Desktop 4.43」公開　MCPカタログ刷新の理由となった、npx/uvxを介するMCPサーバ実行の課題とは ServiceNowが16カ国の企業を対象にAI活用の成熟度を調査、成熟を判断する5つの指標とは？ ノーコードで実現！　DifyでカスタマーサポートAIチャットbotを作成する VS Codeで注目のMCPを実践　「SQLite MCP」「Playwright MCP」でデータとテストコードを生成する方法 「Visual Studio Code」と「Ollama」で簡単に始められる、安心・安全なローカルAI活用術 GitHub CopilotのCopilot Chatがオープンソース化　AIエージェント「Agent Mode」の実装方法など公開の狙いは？ 業務利用でも無料に　Element LabsがローカルAIツールキット「LM Studio」の利用規約を変更 Copyright © ITmedia Inc. All Rights Reserved. ページトップに戻る” https://atmarkit.itmedia.co.jp/ait/articles/2507/17/news001.html#:~:text=TOP,%E3%81%AB%E6%88%BB%E3%82%8B