・
DifyのWebサイト埋め込み方法｜問い合わせ対応ボットの実装手順と注意点
Difyで構築したAIアプリを自社のWebサイトに埋め込みたいと考えていませんか？
この記事では、Difyアプリの埋め込み手順や具体的な制限事項、さらに実装方法まで詳しく解説します。ユーザーからの問い合わせ対応や業務効率化のヒントとして、ぜひ役立ててみてください。
🤖DifyアプリをWebサイトに埋め込むメリットと活用シーン
DifyのアプリをWebサイトに埋め込むことで、顧客体験の向上や業務の自動化など様々な恩恵を受けられます。
ここでは、その代表的なメリットや実際の活用シーンについて解説します。
ノーコードで簡単にAIチャットボットをサイトへ設置できる
Difyを活用すれば高度なプログラミング知識がなくても、自社サイトに専用のチャットボットをスムーズに導入できます。企業はエンジニアの工数をかけずに、サイト訪問者へ向けた対話型AIの窓口を構築することが可能です。
メリットは以下の通りです。
- 導入コストの削減：
外部の開発ベンダーに依頼してゼロからシステムを構築することなく、自社内でAIアプリの立ち上げからサイトへの組み込みまでを完結できます。 - スピーディーなリリース：
複雑なサーバー環境の構築やバックエンドの開発を行わずに埋め込み用のタグを発行できるため、思い立ったその日のうちにサービスを公開することが可能です。 - 非エンジニアでも扱える操作性：
管理画面上のビジュアル操作のみで各種設定が完了するため、Web担当者やマーケターなど非エンジニア層でも容易に扱うことができます。
WordPressなどの主要なCMSへも柔軟に対応可能
Difyの埋め込み機能は特定の環境に依存せず、広く利用されているCMS（コンテンツ管理システム）と高い親和性を持っています。既存のWebサイトを改修することなく、コードを貼り付けるだけで連携を完了させることが可能です。
特徴は以下の通りです。
- カスタムHTMLブロックの活用：
WordPressの投稿画面やウィジェットエリアに用意されているHTMLブロックを利用するだけで、特別なプラグインを追加することなく手軽に設置できます。 - サイトデザインへの自然な適応：
提供されるコードの横幅や縦幅の数値を変更することで、自社のレイアウトやスマートフォン画面のサイズに合わせて柔軟に表示を調整することが可能です。 - 多様なプラットフォームへの対応：
WordPressに限らず、WixやShopify、STUDIOといった主要なWebサイト作成ツールでも共通して同じ埋め込み手順を用いることができます。ただし、一部のCMSは対応していない場合があります。
カスタマーサポートや社内問い合わせ対応の効率化
Difyを自社サイトや社内ポータルに設置することで、問い合わせ対応にかかる人的リソースを削減できます。24時間365日稼働するAIが一次対応を担うことで、サポート業務の質と速度が向上します。
具体的には、以下の効果が期待できます。
- 顧客の自己解決率の向上：
ユーザーがサイト上で抱いた疑問に対してAIがスムーズに回答を提示するため、電話やメールでの問い合わせに至る前に問題を自己解決できるようになります。 - 社内ヘルプデスクの負担軽減：
社内ポータルサイトに人事や総務に関する規則を登録したボットを配置することで、担当者に集中しがちな定型的な質問への回答業務を自動化できます。 - 担当者のコア業務への集中：
単純な質問への対応をAIに任せることで、サポートスタッフは人間ならではの判断が必要な複雑なクレーム対応や重要顧客へのフォローアップに時間を割くことが可能です。
⚙️Yoomは様々な業務ツールを連携して業務を自動化できます
Difyを利用してチャットボットを作成することで、問い合わせ対応は自動化されます。それでも業務全体では、顧客や案件をデータベースで管理したり、期限を確認したり、データを分析したりと、多くの作業がありますよね。時間に追われる状況で、こうした手作業による定型業務を省けたら、と思ったことがある方は多いのではないでしょうか？
Yoomを利用すれば、さまざまなAIや業務ツールをノーコードで連携できるため、問い合わせ対応以外の業務も自動化することが可能です。これには、以下のようなメリットがあります。
- 案件のステータスを更新するだけで関連する業務ツールの情報も自動更新
- 一度の設定でリマインド通知や定期的な問い合わせ分析・レポート作成を自動化
- ヒューマンエラーを削減しながら1案件にかかる時間を短縮
導入により顧客対応や契約書関連にかかる確認工数を50％削減している事例もあります。
[Yoomとは]
直感的な設定だけで柔軟なフローを構築できるため、業務に合わせたカスタマイズもノーコードで行えます。無料プランや以下のようなテンプレートも豊富に用意されており、気軽に試すことができるので、自動化による新しい働き方をぜひ体験してみてください。
■このテンプレートをおすすめする方
- Zendeskを用いたカスタマーサポート業務において、問い合わせ対応の効率化と無人化を推進したい担当者の方
- 製品の仕様やFAQをNotionで管理しており、それらを活用して問い合わせ回答の質を安定させたいチームリーダーの方
- 過去のナレッジを有効活用しつつ、サポートデスクの運用工数を削減し、効率的な組織運営を目指す経営者の方
■このテンプレートを使うメリット
- Zendeskに届いた問い合わせに対し、AIがNotionの情報を基に回答案を作成するため、顧客へのレスポンス時間を短縮できます。
- Notionに蓄積された正確なナレッジを基にAIが回答を生成することで、回答の質を一定に保ち、担当者による知識の差を埋めることが可能です。
■フローボットの流れ
- はじめに、Zendesk、Notion、SlackをYoomと連携します。
- 次に、トリガーで、Zendeskを選択し、「チケットが作成されたら」というアクションを設定します。
- 次に、AIワーカーで、顧客からの問い合わせに対し、Notionのナレッジを基に回答案を作成するためのマニュアル（指示）を作成します。
■このワークフローのカスタムポイント
- AIワーカーのマニュアル設定にて、どのようなトーンで回答を作成するか、または特定のキーワードが含まれる場合にどのような処理を行うかなど、指示を詳細にカスタマイズしてください。
- Notionでのナレッジ参照先を、FAQページやマニュアルが格納されている特定のデータベースやページに指定することで、より精度の高い回答案が作成できます。
- Slackでの通知設定では、AIが作成した回答案をまず担当者が確認できるよう、通知先のチャンネルやメッセージ内容を任意に設定してください。
■注意事項
- Zendesk、Notion、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Zendeskは、ミニプラン以上でご利用いただけるアプリとなっております。フリープラン・パーソナルプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
- ミニプラン・チームプラン・サクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
■このテンプレートをおすすめする方
- 膨大な問い合わせデータの集計や分析、週次レポートの作成に課題を感じているカスタマーサポート担当者の方
- Google スプレッドシートとSlackを併用しており、データの要約から通知までを自動化したいと考えているチームリーダーの方
- 顧客の声を迅速にサービス改善へ活かしたいが、分析リソースの不足に悩んでいる経営者の方
■このテンプレートを使うメリット
- AIワーカーが問い合わせデータを一括分析し、頻出課題や顧客の感情を抽出するため、手作業で行っていた分析時間を短縮できます。
- 定期的に分析レポートがSlackへ自動通知されることで、チーム全体での現状把握がスムーズになり、FAQの改善や顧客満足度の向上に繋がります。
■フローボットの流れ
- はじめに、Google スプレッドシート、Notion、SlackをYoomと連携します。
- 次に、特定の時間にスケジュール実行するトリガーを設定します。
- 最後に、蓄積された問い合わせデータを分析し頻出する課題や顧客の感情を可視化して、レポートを作成するためのマニュアル（指示）を作成します。
■このワークフローのカスタムポイント
- Google スプレッドシートのアクション設定では、分析対象とするデータの範囲や抽出条件を、運用に合わせて任意に調整してください。
- AIワーカーの指示（プロンプト）を調整することで、要約の粒度や抽出したい特定の項目（改善案、ネガティブな意見など）をカスタマイズできます。
- Slackの通知先チャンネルを、用途に合わせてカスタマーサクセス用や開発チーム用など任意で設定してください。
■注意事項
- Google スプレッドシート、Notion、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- AIワーカー内で20件を超える大容量データの取得やループ処理を行うと、タスクを著しく消費する可能性があるためご注意ください。
💬埋め込み可能なDifyアプリの種類
Difyでは全てのアプリがWebサイトに埋め込めるわけではなく、アプリの種類によって制限が存在します。システム設計上の仕様を正しく理解し、適切な運用計画を立てましょう。
「サイトに埋め込む」が可能なのは対話型UI
大前提として、Difyのシステム仕様上、外部サイトに埋め込むためのタグが発行されるのは「対話型UI」を持つアプリに限定されています。この制限はプランの違いによるものではなく、Dify全体のシステム設計に基づいています。
各アプリのWebサイトへの埋め込み可否については、以下の通りです。
【埋め込み可能】
- チャットフロー
- エージェント
- チャットボット
【埋め込み不可】
- テキスト生成
- ワークフロー
テキスト生成・ワークフローアプリの代替実装手段
テキスト生成やワークフローアプリは標準機能での埋め込みに対応していませんが、別の手法を活用することで自社サイトとの連携を実現できます。用途や開発リソースに応じて、適切な代替アプローチを選択することが求められます。
具体的には以下の手段が挙げられます。
- APIリファレンスを活用した自社開発（推奨）：
Difyの管理画面からAPIキーを発行し、自社サイト側に独自の入力フォームと通信処理（HTML/JavaScriptなど）を開発して、Difyの裏側と直接データの送受信を行う方法です。 - 外部のフォーム作成ツールとの連携：
Yoomなどの外部ツールを間に挟み、Webサイト上のフォームに入力されたデータをトリガーとしてDifyのワークフローを実行させる構成です。
Yoomを利用すれば、Webサイトにフォームを設置したり、チャットツールを起点としてワークフローを実行したりすることが可能です。以下のようなテンプレートもあるので、ぜひ試してみてください。
- Chatworkでの指示をもとに、Dify APIを使った定型業務を自動化したい方
- 手作業によるAIワークフローの実行プロセスを効率化し、対応漏れを防ぎたい方
- ノーコードでDifyと各種SaaSを連携させ、業務プロセスを改善したいと考えている方
- Chatworkへの投稿を起点にDifyのワークフローが自動実行されるため、手作業でのAPI呼び出しや対応にかかる時間を短縮できます。
- 手動でのコピー＆ペーストによる指示内容の間違いや、パラメータ設定のミスといったヒューマンエラーの発生を防ぎます。
- はじめに、ChatworkとDifyをYoomと連携する
- 次に、トリガーでChatworkを選択し、「新しいメッセージがルームに投稿されたら」というアクションを設定する
- 次に、オペレーションで「分岐機能」を設定し、特定のキーワードを含む投稿の場合のみ後続の処理に進むよう設定する
- 次に、オペレーションで「AI機能」の「テキスト抽出」を設定し、Chatworkの投稿からDifyに渡す情報を抽出する
- 次に、オペレーションでDifyの「ワークフローを実行」アクションを設定する
- 最後に、オペレーションでChatworkの「メッセージを送る」アクションを設定し、実行結果を任意のチャンネルに通知する
■このワークフローのカスタムポイント
- Chatworkのトリガー設定では、どのルームの投稿を監視対象とするかを任意で指定してください。また、分岐機能では、フローボットを起動させるための特定のキーワードを任意で設定できます。
- Difyでワークフローを実行するアクションでは、Chatworkの投稿内容から抽出した情報をもとに、どのような指示文章をDifyに渡すかを任意で設定してください。
- 最後のChatworkへメッセージを送るオペレーションでは、通知先のルームやメッセージ内容を任意で設定することが可能です。
- Chatwork、DifyのそれぞれとYoomを連携してください。
- DifyのアウトプットはJSONPathから取得可能です。取得方法は「『取得する値』を追加する方法」をご参照ください。
- 分岐はミニプラン以上のプランでご利用いただける機能（オペレーション）となっております。フリープランの場合は設定しているフローボットのオペレーションはエラーとなりますので、ご注意ください。
- ミニプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
- Slackでの報告や依頼を起点に、Difyのワークフローを手動で実行している方
- Difyのワークフロー自動化によって、定型的なAI処理を効率化したいと考えている方
- SlackとDifyを連携させ、チームの生産性を向上させたいチームリーダーの方
- Slackへの投稿をトリガーにDifyのワークフローを自動化できるため、手作業での実行にかかっていた時間を短縮します。
- 誰が投稿しても同じプロセスで処理が実行されるため、業務の標準化が進み、属人化のリスクを軽減することに繋がります。
- はじめに、SlackとDifyをYoomと連携します。
- 次に、トリガーでSlackを選択し、「メッセージがチャンネルに投稿されたら（Webhook）」アクションを設定します。
- 続いて、オペレーションのAI機能で「テキスト抽出」を設定し、Slackの投稿内容から必要な情報を抽出します
- 次に、オペレーションでDifyを選択し、「ワークフローを実行」アクションを設定します。
- 最後に、オペレーションでSlackの「スレッドにメッセージを送る」アクションを設定し、Difyの実行結果を元の投稿に返信します。
■このワークフローのカスタムポイント
- Slackのトリガーおよびオペレーション設定では、メッセージを検知したり、結果を送信したりするチャンネルや本文を任意で設定可能です。
- Difyのオペレーション設定では、実行したいワークフローを任意で選択してください。
- SlackとDifyのそれぞれとYoomを連携してください。
- Difyのマイアプリ連携方法は「Difyマイアプリ登録方法と連携するとできること」をご参照ください。
- DifyのアウトプットはJSONPathから取得可能です。取得方法は「『取得する値』を追加する方法」をご参照ください。
🛠️Difyアプリの3つの埋め込み方法と特徴
Difyで作成した対話型アプリを外部のWebサイトに表示するアプローチは、大きく分けて3種類存在します。目的やサイトのデザインに合わせて最適な方法を選択することが重要です。
1.iframeを活用した固定表示
iframeタグを使用した埋め込みは、Webサイトの特定の記事内やサイドバーなど、あらかじめ決められた枠の中にチャットボットを固定して表示するスタンダードな手法です。サイトのコンテンツの一部として自然にAIを配置したい場合に適しています。
メリットは以下の通りです。
- 周囲のコンテンツとの自然な同化：
記事の文末やサポートページの特定の段落など、ユーザーに読んでほしい文脈のすぐ隣にチャット画面を配置してスムーズに誘導できます。 - 表示領域の確実なコントロール：
HTMLコード内で幅（width）や高さ（height）の数値を直接指定できるため、サイトのレイアウト崩れを防ぎながら最適なサイズで表示させることが可能です。 - ユーザーの視線の固定：
画面のスクロールに合わせて移動しないため、特定の情報を読んでいる最中にチャットボットが邪魔になることなく、ユーザーが必要な時にだけ操作できます。
2.scriptタグを活用したポップアップ表示
scriptタグを使用した埋め込みは、画面の右下などに常にアイコンを追従させ、クリックするとチャット画面がポップアップで立ち上がる形式です。ユーザーがサイト内のどのページを見ていても、常にAIに質問できる環境を提供できます。
特徴は以下の通りです。
- ページ移動に依存しない常時アクセス：
ユーザーが縦に長いページをスクロールしたり、別のページへ遷移したりしても、アイコンが常に画面端に配置されているため迷わず質問を開始できます。 - 画面の表示領域を節約できる設計：
クリックされるまでは小さなボタンとしてのみ表示されるため、スマートフォンのような画面サイズの小さなデバイスでもコンテンツの閲覧を妨げません。 - 高度なユーザー情報の動的連携：
scriptタグ内のJavaScriptの設定（inputsオブジェクトなど）を編集することで、現在ログインしているユーザーのIDや名前などの情報を裏側でDifyに自動送信することが可能です。
3.Chrome拡張機能を利用した独自の連携
Dify Chatbot Chrome拡張機能は、自身が利用するブラウザにチャットボットを常駐させる手法です。自分専用のAIアシスタントをブラウザに設定したいときに便利です。
特徴は、以下の通りです。
- ソースコードの編集が一切不要：
Webサイトの管理者権限を持っていなくても、ブラウザに拡張機能を追加してURLを設定するだけで、対象のサイト上にチャットボットを出現させることができます。 - クローズドな利用に特化：
拡張機能をインストールしたブラウザでしかチャットボットが表示されないため、一般の顧客向けではなく、自社の従業員のみが使う社内システムの補助ツールとして機能します。 - サイトデザインへの影響を完全排除：
既存のWebサイトのHTMLやCSSには一切干渉しないため、社内の古いシステムや他社が管理しているプラットフォーム上でも安全にAIアシスタントを動作させることが可能です。
💻【実践】製品情報を学習したチャットボットをWebサイトに埋め込んでみた！
ここからは、実際に製品情報を学習させたDifyのチャットボットを、Webサイトに埋め込むまでの検証プロセスを順を追って紹介します。
検証条件
検証は、以下の条件で行いました。
- Difyアカウント：無料プラン
- 環境：クラウド版
- CMS：はてなブログ / note
- ブラウザ（拡張機能）：Chrome（Yoom公式サイト上で表示を確認）
なお、Webサイトに埋め込むアプリは、以下の記事で作成したチャットボットを利用します。
Webサイトへの埋め込み
それでは、Difyで作成したアプリをWebサイトに埋め込んでいきます。
- Dify側の準備：「公開する」から「更新を公開」をクリック後、「サイトに埋め込む」をクリックします。
埋め込み方式を選択し、iframeとscriptタグの場合は、コードをコピーします。
拡張機能の場合は、URLをコピーしたら、リンク先でブラウザにDify Chatbot Chromeをインストールします。 - Webサイトへの反映：コピーしたコードやリンクをWebサイト（はてなブログ）と拡張機能に設定します。
【iframe】
【scriptタグ】
【拡張機能】
拡張機能のみ、Yoomのサイトで表示を確認しています。
noteでは、特定のサイトを除き、アプリの埋め込みが規約で禁止されているほか、埋め込み機能自体がありませんでした。
検証結果
DifyアプリのWebサイトへの埋め込みを試してみて、以下のことがわかりました。
- 発行されたコードを貼り付けるだけで、Webサイトへの埋め込みが完了した
- iframeやscriptタグなど、用途に合わせて設置方法を簡単に使い分けられる
- noteなどの一部プラットフォームでは、埋め込み機能が利用できない場合がある
🔷用途に合わせた柔軟な設置と手軽な導入が可能です
Difyで作成したAIチャットボットは、コードが自動生成されるため、手軽にWebサイトへ導入できました。特に、サイトの目的やターゲットに応じて設置方法を柔軟に使い分けられる点が大きな魅力です。使い分けの考え方としては、以下の基準があります。
- 手順・仕様の解説サイト：
scriptタグを用いて右下に常駐させることで、ユーザーの疑問を即座に解決し満足度を向上させます。 - アフィリエイトサイト：
iframeを利用して特定のヘルプページにのみ設置することで、真に問い合わせを必要とするユーザーに絞った運用が可能です。
このように、自社の戦略に合わせて最適な配置を選択できるため、コストパフォーマンスに優れた導入が実現できます。
🔷コストの増加リスクと設置先プラットフォームの制限に注意が必要です
一方で、実際の運用や設置環境に関するいくつかの注意点も明らかになりました。読者の皆様が導入を検討する際は、以下のポイントを事前に把握しておくことが重要です。- 運用コストの増加：
scriptタグによる右下への常駐はユーザーにとって手軽な反面、気軽な利用が増加しやすく、結果としてコストが想定以上に膨らむ可能性があります。 - プラットフォームの制限：
検証時点では、「note」へのチャットボット設置ができませんでした。
簡単に設置できる仕様であっても、利用するWebサイト側で外部コードの埋め込み自体が禁止されているケースがあるため、導入前の規約や仕様の確認が必須です。
🔗高度な設定：WebサイトからDifyに動的な値を渡す方法
チャットボットの基本的な埋め込み機能に加え、Webサイト側の情報をDifyへ動的に引き継ぐことで、より高度な連携が可能になります。ここでは、ユーザー情報を自動連携する仕組みを解説します。
Hidden Fields（事前入力）機能とは？
Hidden Fields（事前入力）とは、ユーザーがチャット画面でテキストを入力する前に、Webサイトの裏側からあらかじめ変数やデータをDifyに送信しておく高度な機能です。これにより、パーソナライズされた体験を提供できるようになります。
メリットは以下の通りです。
- ユーザーの入力手間の削減：
名前や会員IDといった情報をシステムが自動的に把握するため、ユーザーはわざわざ「私は〇〇です」と名乗る必要がなくなり、すぐに本題の質問に入ることができます。 - 文脈に沿った正確なAIの回答：
現在閲覧している商品ページのURLやカテゴリー情報をAIに渡すことで、AIは「このユーザーは今どの商品について悩んでいるか」を的確に理解した上で回答を生成できます。 - サポート対応の品質向上：
ログイン状態や過去の契約情報といった顧客データをシステム変数として引き継ぐことで、一般的な回答ではなく、その人に紐づいた個別のサポート対応をAIに実行させることが可能です。
scriptタグを活用してユーザー情報などを自動連携する仕組み
Webサイト側のユーザー情報やシステム情報を、チャットボットへ自動的に引き継ぐにはscriptタグを利用します。自社サイトが保持している動的なデータを事前に渡すことで、ユーザー自身がチャットで情報を入力する手間を省くことが可能です。
設定内で利用できる主な変数の種類と用途は以下の通りです。
- inputs変数を利用した情報の事前入力：
ログイン中のユーザー名や所属部署などの属性情報をWebサイトから渡し、チャットボットの初期情報として活用します。 - systemVariablesを利用したログの追跡：
ユーザーIDや会話IDなどのシステム情報を裏側でDifyに渡し、自社データベースの利用履歴と紐づけて管理します。 - userVariablesを利用したプロファイルの反映：
ユーザーのアバター画像URLや表示名などを渡し、チャットUI上のユーザー側の見た目をパーソナライズします。
⚠️埋め込み時に表示されない・エラーが出る場合の対処法
Difyアプリの埋め込み作業において、想定通りに表示されなかったり、エラーメッセージが出たりするケースがあります。ここでは、代表的なトラブルとその解決手順を整理します。
タグの貼り付けミスやデザイン（width/height）の崩れを修正する
チャットボットの画面が全く表示されなかったり、画面の端が見切れてしまったりする場合、ほとんどの原因はHTMLコードの記述ミスやCSSのスタイル設定の不備にあります。この場合は基本に立ち返って確認を行う必要があります。
主なチェック項目は以下の通りです。
- コードのコピー漏れの確認：
Difyの管理画面からコピーしたコードの先頭（<script>や<iframe>）から末尾まで、一文字も欠けることなくCMS側に貼り付けられているかを確認します。 - HTTPS通信：
iframeが正しく表示されない場合は、親ページの配信方式を確認します。DifyアプリがHTTPSを要求する場合、親ページもHTTPS経由で提供されていることをチェックしてください。 - サイズ指定の最適化：
iframe内でwidth: 100%、height: 700pxのように設定されている数値を、自社サイトのレイアウトに合わせてheight: 500pxなどに調整し、見切れや余白の広がりを解消します。
Quota Exceededエラーが発生した場合の対応
チャットボット自体は表示されているものの、メッセージ送信後に「Quota Exceeded」などのエラーが返ってくる場合、メッセージクレジットやAPIのレート制限など、Dify側の利用上限に達している可能性があります。
この問題を解決するための手段は以下の通りです。
- 利用状況のダッシュボード確認：
Difyの管理画面で現在のメッセージクレジットやAPIのレート制限などの利用状況を確認します。その後、本当に上限に達しているか、あるいは不正な大量アクセスがないかを調査します。 - 外部APIキー（OpenAI等）の独自設定：
Difyが提供する無料枠に頼るのではなく、自社で契約しているOpenAIなどのAPIキーをDifyの設定画面に入力することで、Dify自体の制限を回避して運用を継続できます。 - 有料プランへの移行：
Professionalプランでは Dify API Rate Limit はなくなりますが、月間5,000メッセージクレジットなどの利用枠は残ります。どの上限が課題かを確認したうえでプランを選ぶことが重要です。
📝まとめ
DifyをWebサイトへ導入する際は、用途に合ったアプリの種類（対話型UIであること）を選ぶことが重要です。テキスト生成やワークフローなど、要件に合わせて適切な代替手段も含めて実装方針を検討してください。
また、固定表示のiframeとポップアップ型のscriptタグにはそれぞれ異なる強みがあります。ユーザーにどのような体験を提供したいか、また自社サイトのレイアウトに合わせて、最適な埋め込み方法を選択することもポイントになります。
💡Yoomでできること
Yoomは750種類以上のサービスに対応しており、さまざまなAIや業務ツールを連携できるため、複数の業務を自動化できます。これにより、以下のような効果が期待できます。
- これまでと同じ時間でより多くの作業を完了する
- 作業者の心理的負担の軽減とヒューマンエラーの削減
導入により、月320時間の工数を削減している事例もあります。Yoomには、自動化フローを構築するためのテンプレートが豊富にあり、直感的な操作で簡単に設定できるので、ぜひ試してみてください。
■このテンプレートをおすすめする方
- kintoneで案件管理を行っており、提案書作成の初動をよりスムーズに進めたい営業担当者の方
- 商談メモからの課題抽出や提案構成案の作成に時間がかかり、効率化を検討しているチームリーダーの方
- 営業組織全体の提案品質の底上げと、属人化の解消を目指している経営層や営業推進担当の方
■このテンプレートを使うメリット
- kintoneのステータス更新に伴い、AIワーカーが商談メモを分析して提案書構成を自動作成するため、作成にかかる工数を削減し、質の高い提案準備をスムーズに開始できます。
- 作成された提案書ドラフトのURLがkintoneに自動保存され、Slackで通知されるため、情報の一貫性が保たれ、チーム内でのスムーズな情報共有が実現します。
■フローボットの流れ
- はじめに、kintone、Googleドキュメント、Slack、Google スプレッドシート、Google DriveをYoomと連携します。
- 次に、トリガーで、kintoneを選択し、「指定のステータスに更新されたら（Webhook起動）」というアクションを設定します。
- 次に、AIワーカーで、顧客の真の課題特定と最適な提案書の構成案を作成するためのマニュアルを作成（指示）をします。
■このワークフローのカスタムポイント
- kintoneのトリガー設定では、提案フェーズへの移行を検知できるよう、対象とするプロセス管理のステータス名を正確に設定してください。
- AIワーカーへの指示（プロンプト）を調整することで、自社の商材特性や特定の提案フォーマットに合わせた、より精度の高い構成案を作成することが可能です。
- Googleドキュメントの作成設定では、ファイル名の命名規則を任意で設定し、管理しやすい形式にカスタマイズすることも可能です。
■注意事項
- kintone、Google スプレッドシート、Googleドキュメント、Slack、Google DriveのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- Slackでの依頼をNotionで管理しており、転記作業に手間を感じている方
- AIワーカーを活用して、日々のタスク管理を効率化したいと考えている方
- チーム内のタスク依頼プロセスを自動化し、抜け漏れをなくしたいマネージャーの方
- Slackのメッセージを基にAIが自動でNotionへタスク登録するため、これまで手作業で行っていた転記の手間を省き、時間を有効活用できます。
- 手作業によるタスクの登録漏れや内容の転記ミスを防ぎ、依頼された業務の抜け漏れといったヒューマンエラーのリスクを低減します。
- はじめに、SlackとNotionをYoomと連携します。
- 次に、トリガーでSlackを選択し、「 メッセージがチャンネルに投稿されたら（Webhook） 」というアクションを設定します。
- 最後に、オペレーションでAIワーカーを設定し、Slackのメッセージから依頼内容を解析し、優先度や納期を判断してNotionにタスクを登録するためのマニュアル（指示）を作成します。
■このワークフローのカスタムポイント
- Slackのトリガー設定では、自動化の対象とするチャンネルIDや特定のユーザーID、また「依頼：」といった特定のテキストが含まれた場合のみ起動するなど、条件を任意で設定することが可能です。
- AIワーカーでは、Notionにタスクを登録する際のフォーマットや優先度の判断基準など、実際の業務内容に合わせてマニュアル（指示）を任意で設定することが可能です。
- Slack、NotionのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
【出典】
プログラミング知識なしで手軽に構築できます。
