【埋め込みガイド】AIチャットボットを自社サイトに組み込む!VPS×Difyのセキュアな実装例【2026年版】

AIチャットボットを自社サイトに組み込む方法


🗣️ 筆者の結論(最初に読んでください)

正直に言うと、この構成は思ったよりシンプルに動く。VPS上でDifyを立ち上げて、生成されたコードをサイトに貼るだけ。「AIチャットボット導入」というと大げさに聞こえるけど、やることはiframe一枚だったりする。

VPS選びで迷ってる人向けにも先に書いておきます。

  • 24時間稼働させたいなら固定料金のVPSが精神的にラク。自分のPCを立ち上げっぱなしにする運用は、何かあったときにリモートデスクトップで入らなきゃいけないし、全然手放しにならない。VPSにして正解だったと思ってる。
  • GPU付きVPSは、Dify用途では完全に不要。DifyはLLM APIを外部(OpenAIやAnthropicなど)に投げる構成なので、VPS側のGPUは1ミリも関係ない。GPU付きプランをすすめてくる記事は、アフィリエイト報酬が高いプランを売りたいだけの場合がほとんどなので注意してください。はっきり書いておきます。
  • 月額の目安:常時稼働ならXServer VPSの固定プラン(最安830円台〜)が断然ラク。「まず試したい」ならConoHaの時間課金から始めればいい。自分の場合は先に時間課金で動作確認してから固定プランに移した。その流れが一番無駄がなかった。

自社サイトにAIチャットボットを追加するメリット

  • 24時間自動で顧客対応できる(深夜の問い合わせも拾える)
  • FAQ対応の人件費を削減できる
  • ユーザー体験が上がる(待たせない)
  • 問い合わせの初期対応を自動化して、担当者は本質的な対応だけに集中できる

チャットボット導入のコスパが一番出るのは「同じ質問が繰り返し来るサイト」。FAQが10個以上あって、毎月同じ内容のメールが来てるなら、導入の優先度は高い。そうじゃないサイトにとりあえず入れても、維持コストが無駄になりやすい。「なんとなく入れたい」だけなら、一回立ち止まって考えたほうがいい。


Difyのチャットボット埋め込み方法

Difyでチャットボットを作ると、公開設定から埋め込みコードが取得できる。方法は3つあって、それぞれ用途が違う。自分が試した順番に書くと、「iframe → JSウィジェット → API連携」の順でステップアップしていく感じ。最初から全部理解しようとしなくていい。

方法1:iframeで埋め込み

一番手軽。Difyが生成するiframeコードをそのまま貼るだけ。

<iframe
  src="http://あなたのVPS/chatbot/xxxx"
  style="width: 400px; height: 600px; border: none;"
></iframe>

自分の場合、最初はこれで確認した。5分で動く。「とにかく動作確認したい」という段階ではiframeで十分すぎる。デザインにこだわらないサイトならiframeのまま本番運用してもいい。「サイトのデザインに馴染ませたい」「スマホ対応を細かく調整したい」という具体的な要件が出てきてから、次の方法を検討すればいい。


方法2:JavaScriptウィジェット

ページ右下にフローティングボタンとして表示されるやつ。よくECサイトやSaaSの右下に出てる形。

<script>
  window.difyChatbotConfig = {
    token: 'あなたのトークン',
    baseUrl: 'http://あなたのVPS'
  }
</script>
<script src="http://あなたのVPS/embed.min.js" async></script>

「邪魔にならないけど、必要なときにすぐ呼び出せる」というUXを作りたいならこっち。iframeよりも見た目がスマートになるし、実装の手間もほとんど変わらない。本番運用を見据えるならJSウィジェットから始めるのもあり。


方法3:API連携(カスタムUI)

DifyのAPIを直接叩いて、UIを自分で全部作る方法。自由度は一番高いけど、実装コストも一番かかる。

率直に言うと、最初からこれを選ぶ必要はない。まずiframeかJSウィジェットで動かして、「もっとUIをカスタムしたい」「他のシステムと連携したい」という具体的な要件が出てきてから検討すればいい。最初から完璧な実装を目指すと、途中で疲弊する。これは経験則として言っておく。


VPS選び:Difyの常時稼働に必要なスペックと費用

Dify用途で抑えておきたいポイントを整理する。

GPU:不要。 繰り返しになるけど、DifyはLLMのAPIを外部サービスに投げる仕組みなので、VPS側のGPUは使わない。CPU・メモリ・ストレージで選べばいい。GPU付きプランは固定費が跳ね上がるだけで、Difyには何のメリットもない。

必要スペックの目安:

項目最低ライン余裕を持つなら
CPU2コア4コア
メモリ4GB8GB
ストレージ50GB100GB

費用の計算:

  • XServer VPS(固定プラン、2GBプラン):月830円台〜。1日あたり約27円。毎月いくら払うかが固定でわかるのは精神的にラク。「今月何時間使ったっけ」を気にしなくていいのは思った以上にストレスフリー。
  • ConoHa VPS(時間課金):1時間あたり約1.3円〜(2GBプラン目安)。月換算すると約950円前後になるケースが多い。試用段階では断然こっちが安く済む。

損益分岐点を計算すると:

ConoHaの時間課金 vs XServerの固定料金で比べると、月76時間以上稼働させるならXServerの固定プランのほうが安くなる。チャットボットを常時稼働させるなら24時間×30日=720時間なので、固定プランのXServerが圧倒的にコスパがいい。1日あたり約27円で24時間チャットボットが動くと考えると、かなり安い。

一方、「週末だけ試したい」「動作確認したい」という段階ならConoHaの時間課金で始めて、本番移行時にXServerに切り替えるのが現実的な流れ。自分もそうした。

XServer VPS(月990円〜、常時稼働向け)→

ConoHa VPS(時間課金対応、まず試したい人向け)→


よくある質問(FAQ)

はい。カスタムHTMLブロックにiframeコードを貼り付けるだけで動作します。テーマのfooter.phpにJavaScriptコードを追加する方法も使えます。

まとめ:あなたの使い方で選ぶ

あなたの状況おすすめの選択
まず動作確認したい・週末だけ試したいConoHa VPS(時間課金)+iframeで最速確認
本番運用・常時稼働させたい(月76時間以上)XServer VPS(固定プラン・月830円台〜)+JSウィジェット
デザインを完全カスタムしたいVPSはどちらでも可+API連携(ただし最初からやる必要はない)
GPU付きVPSを勧められたやめておく。Dify用途でGPUは不要。固定費が上がるだけ。その記事は疑っていい
自分のPCで代用しようとしてるやめておく。何かあるたびにリモートデスクトップで入らないといけないし、全然手放しにならない

これが最終回答じゃない。「まず動かしてみて、使いながら判断する」が一番正しいアプローチ。iframeで貼ってみて、思ったより簡単だったり、思ったより不便だったりする。それを自分で確認してから次の手を考えればいい。まずは試してみてください。