RagmyAI RagmyAI
ログイン 無料で試す
機能 料金 ブログ FAQ ダウンロード

ウェブサイトにAIチャットボットを埋め込む

あなたのトレーニング済みAIチャットボット。
あなたのウェブサイトに。
1行のコードで。

ドキュメントでトレーニングし、単一のスクリプトタグを追加すれば、どんなウェブサイトにも完全に機能するAIチャットボットが表示されます、無料で開始、クレジットカード不要、開発者不要。

無料で始める、60秒で埋め込み すべての埋め込みオプションを見る

仕組み

ドキュメントからライブチャットボットまで3ステップ。

1

ドキュメントでトレーニング

PDF、Word文書、テキストファイル、HTMLページをアップロードします。AIがそれらを読み込み、あなたのコンテンツをもとに質問に答えるので、訪問者はインターネット上の推測ではなく、あなたのビジネスについての回答を得られます。

2

埋め込みコードをコピー

RagmyAIアプリでウェブチャットを開く。パーソナライズされたスクリプトタグがすでに待っています：チャットボットIDが事前入力された1行。コピー。

3

</body>の前に貼り付け

タグをページのHTMLに貼り付けます。フローティングチャットランチャーがすぐに表示されます：WordPress、Shopify、Squarespace、Webflow、またはカスタムページ上で。

3つの埋め込みオプション

ページに合ったフォーマットを選ぶ。

オプション 1 · 推奨

スクリプトタグ：フローティングランチャー

すべてのページの右下隅にチャットボタンを配置します。訪問者がクリックするとウィンドウが開き、ページを離れることなくAIと話せます。レイアウト変更不要。

  • HTMLを受け入れるどのウェブサイトでも動作
  • 最適：製品ページ、Eコマース、サポートページ
  • CSSの競合なし：ウィジェットは自立型 
<script
  src="https://chat.ragmyai.com/chat-widget.min.js"
  data-page-id="YOUR_CHATBOT_ID">
</script>
RagmyAI embedded chatbot widget on a website

オプション 2

iframe：インライン配置

ページコンテンツ内の正確な場所にチャットボットを配置：サイドバー、ヘルプセクション、またはモーダルの中。あなたが寸法を制御し、チャットボットがそれを満たします。

  • 幅と高さを完全制御
  • 最適：ナレッジベース、ヘルプセンター、ダッシュボード
  • Notion、Coda、同様のツールに埋め込み 
<iframe
  src="https://chat.ragmyai.com/YOUR_CHATBOT_ID"
  allow="microphone"
  width="300"
  height="400">
</iframe>
RagmyAI chatbot embedded inline in a website page

オプション 3

公開URL：コードまったく不要

各チャットボットには共有可能なURLが付きます。メール、QRコード、Slackメッセージ、NotionページでShareしてください。リンクを持つ誰でもフルスクリーンのチャットインターフェースを得ます、埋め込み不要。

  • ゼロセットアップ：リンクをコピーして共有するだけ
  • 最適：内部ツール、クライアント引き渡し、プロトタイプ
  • オフライン資料のQRコードとして機能 
https://chat.ragmyai.com/YOUR_CHATBOT_ID
RagmyAI chatbot public URL full-page interface

カスタマイズ

ウィジェットをあなたのブランドに合わせましょう。

スクリプトタグは一律ではありません。チャットウィンドウのサイズを設定し、ボタンのアイコンを差し替え、好みの形と色を選べます。すべて同じコード行の属性だけで。

設定できる属性

widget-width, widget-height
開いたときのチャットウィンドウのサイズ。
button-width, button-height
ランチャーボタン自体のサイズ。
button-border-radius
ボタンの形、四角から完全な丸まで。
button-background-color
任意のHEXコードでボタンの色を指定。
button-image-url
デフォルトの代わりに自分のアイコンやロゴを使用。
button-image-width, button-image-height
ボタン内のそのアイコンのサイズ。
<script
  data-page-id="YOUR_CHATBOT_ID"
  src="https://chat.ragmyai.com/chat-widget.min.js"
  widget-width="400px"
  widget-height="600px"
  button-image-url="https://ragmyai.com/assets/logo-icon.png"
  button-image-height="48px"
  button-image-width="48px"
  button-height="64px"
  button-width="64px"
  button-border-radius="20%"
  button-background-color="#1F4FD8">
</script>

属性を省略するとデフォルトの見た目になるので、変更したい部分だけ設定すれば十分です。

ステップごとの手順

ウェブサイトのどこにチャット埋め込みコードを貼り付けるか。

RagmyAIアプリの Web Chat > Script Tag から script タグをコピーし、お使いのプラットフォームの正しい場所に貼り付けます。プラットフォームによっては、カスタムコードは有料プランでのみ利用できます。

WordPress

ヘッダー・フッター用のコードプラグイン（例：WPCode）をインストールしてフッター欄に script タグを貼り付けるか、テーマの footer.php の </body> の直前に追加します。

Shopify

Online Store > Themes > Edit code を開き、theme.liquid の </body> の直前に script タグを貼り付けます。保存すると、すべてのページにチャットボタンが表示されます。

Wix

Settings > Custom Code で script タグを追加し、すべてのページで読み込むように設定して Body - end に配置します。

Squarespace

サイト設定の Code Injection を開き、Footer 欄に script タグを貼り付けます。

Webflow

Site settings > Custom code を開き、Footer code に script タグを貼り付けてからサイトを公開します。

Google Sites

Google Sites では script タグが動作しないため、iframe を使います：Insert > Embed > Embed code で iframe を貼り付け、枠のサイズを調整します。

お使いのプラットフォームがない場合：サイトに HTML を追加できるなら、script タグを </body> の前に貼り付けます。埋め込みしかできない場合は、iframe を使うか、チャットボットの公開リンクを共有してください。

ローンチ後

すべての会話を監視。実際の訪問者の質問から再トレーニング。

チャットボットがライブになったら、ウェブチャット > 通知がすべての訪問者のやり取りを記録します。任意のトランスクリプトを読み、外れた回答ごとに「再トレーニング」をタップ、そのやり取りが事前読み込みされたトレーニングエディターが開き、コンテキストで修正できます。

これが回答品質を向上させる最速の方法です：実際の訪問者からの実際の質問を一つずつ修正し、それぞれが次の回答をよりシャープにします。

  • 訪問者セッションごとの完全なトランスクリプト
  • どの会話からも1タップ再トレーニング
  • リアルタイム使用通知
Monitor and retrain embedded chatbot conversations

ユースケース

人々が埋め込む場所。

Eコマース・Shopifyショップ

製品カタログ、返品ポリシー、FAQでトレーニング。夜間サポートを雇わずに午前3時の顧客の質問に答える。毎週実際の購入者の質問から再トレーニング。

  • カタログからの製品推薦
  • 即座の返品・発送回答
  • 追加スタッフなしで24/7対応

大学・オンラインコース

講義ノート、シラバス、読書リストをアップロード。学生はコース資料のみから答える常時対応チューターを得ます、ランダムなインターネットソースからではなく。

  • コース固有の回答のみ
  • 教員への繰り返し質問を削減
  • 78言語で動作

SaaSと製品ドキュメント

静的ヘルプドキュメントをそれでトレーニングされたチャットボットで置き換え。訪問者は検索する代わりに自然言語で質問。答えられなかったすべての質問は埋める必要があるギャップを示します。

  • ドキュメントのキーワード検索を置き換え
  • ドキュメントのギャップを明らかにする
  • アプリに直接埋め込み

"非常によく開発されたアプリで、使いやすく直感的。強くお勧めします。"

Jay D, RagmyAI power user
Jay D
パワーユーザー · Google Playレビュー

"最高のアプリです。学校の課題や知りたいことすべてに役立っています。開発者に感謝。"

James Carter, Student
James Carter
学生 · Google Playレビュー

よくある質問

埋め込みチャットボットFAQ。

ウェブサイトにRagmyAIチャットボットを埋め込むのは無料ですか？

はい。無料プランではクレジットカードなしでチャットボットを埋め込めます。ウィジェット、公開URL、iframeはすべて無料プランで利用可能です。

コーディングを知る必要がありますか？

いいえ。埋め込みは一度のコピー&ペーストです。RagmyAIアプリからスクリプトタグを受け取り：どのページの閉じる</body>タグの前に貼り付けてください。それだけです。

どのウェブサイトプラットフォームで動作しますか？

HTMLの追加を許可するどのプラットフォームでも：WordPress、Shopify、Squarespace、Webflow、Wix、カスタムコードページ。スクリプトタグを貼り付けられれば、チャットボットは動作します。

訪問者がチャットボットに何を聞いているか見られますか？

はい。すべての会話はウェブチャット > 通知に記録されます。完全なトランスクリプトを読み、各やり取りから直接回答を再トレーニングできます。

汎用AIチャットボットウィジェットとどう違いますか？

一般的なチャットボットはインターネットで学んだ内容だけで回答するため、話がそれたり、あなたのビジネスについて事実と異なることを答えたりすることがあります。RagmyAIのチャットボットは、あなたのウェブサイトのページやドキュメントで学習し、その内容をもとに訪問者へ回答します。学習させるまでは一般的な知識で回答するので、まずコンテンツを追加してください。

ウィジェットの色、サイズ、アイコンは変更できますか？

はい。スクリプトタグはウィンドウサイズ、ボタンのサイズと形、ボタンの色、カスタムアイコン画像のオプション属性に対応しています。必要なものだけ追加すれば、残りはデフォルトの見た目のままです。

ウェブサイトにチャットボットを追加するには？

RagmyAIで無料のチャットボットを作成し、ウェブサイトのリンクやドキュメントで学習させます。次に、アプリの Web Chat > Script Tag からスクリプトタグをコピーし、閉じタグ </body> の直前に貼り付けます。コードを入れたすべてのページにチャットボタンが表示されます。

チャットボットの埋め込みコードはどのようなものですか？

スクリプトタグ1つだけです：<script data-page-id="your-page-id" src="https://chat.ragmyai.com/chat-widget.min.js"></script>。ページIDはアプリが自動で入力するので、コピーして貼り付けるだけです。

iframeでチャットボットを埋め込めますか？

はい。サイドバーやヘルプページなど、ページ内にチャットを表示したい場合はiframeを使います：<iframe src="https://chat.ragmyai.com/your-page" allow="microphone" width="300" height="400"></iframe>。正確なコードはアプリからコピーしてください。

ライブチャットウィジェットのように使えますか？

見た目も使い方もライブチャットウィジェットと同じですが、AIがあなた自身のコンテンツをもとに、24時間365日すぐに訪問者へ回答します。アプリですべての会話を確認でき、再学習によってどの回答も改善できます。

あなたのウェブサイトチャットボットは
1回の貼り付けで完成。

永久無料プラン。クレジットカード不要。1つのPDFでトレーニングし、60秒で埋め込み。

無料で始める、今日埋め込む

完全な技術ガイドが欲しいですか？ 埋め込みウォークスルーを読む →