ウェブサイト

最終更新日: 2025/10/03

このガイドでは、ウィジェット または iFrame を使って、あなたのウェブサイトに Quickchat の AI エージェントを統合する方法を説明します。

ウィジェット

ウィジェット はページ右下のチャットバブルとして表示され、クリックするとチャットウィンドウが開きます。ユーザーは質問やサポート依頼をスムーズに行えます。

ウィジェットを埋め込む手順

ページのコードを開く

Web ページの HTML ファイル、またはサイトビルダーのコードエディタを開きます。
ウィジェットコードを取得
- Quickchat AI アプリ にログイン
- 左サイドバー Channels > Website を開く
- Install タブをクリック
- Widget script をコピー
コードを貼り付け

表示したいページすべてで、閉じタグ </body> の直前にスクリプトを挿入します。

WordPress をお使いの場合

footer.php を使う方法

WordPress ダッシュボードにログイン
外観 > テーマエディター で footer.php を開く
</body> の直前にスクリプトを貼り付け
保存

操作動画：

プラグインを使う方法

Insert Headers and Footers などのプラグインをインストール
Settings > Insert Headers and Footers を開く
フッター欄にスクリプトを貼り付け
保存

操作動画：

Web サイトビルダーの場合

WordPress / Webflow / Wix などの「カスタムコードの追加」に関するドキュメントを参照してください。

サポートが必要な場合は contact@quickchat.ai までご連絡ください。

ウィジェットの外観カスタマイズ

Appearance セクションでは、次の項目を調整できます：

Primary Color：ユーザー送信メッセージの色
Header Background Color：ヘッダーの背景色
Header Text Color：ヘッダーの文字色
AI Avatar Image：ヘッダーと AI メッセージに表示するアバター
Widget Bubble：ウィジェットのチャットアイコン
Widget Bubble Size：サイズ（小/中/大）
Widget Bubble Position：右下または左下
Widget Chat Window Dimensions：幅（320–720px）、高さ（520–1020px）
Animate AI Responses：生成中の逐次表示
Auto-Open Widget：ページ読み込み時に自動で開く
Remove Quickchat AI Branding：ホワイトラベル化
Animate Chat Header Collapsing：最初のメッセージ後のヘッダーアニメーション

上級機能：カスタムパラメータ

ウィジェット／iFrame の初期化時に custom_params を渡すことで、

分析の強化（CSV エクスポートに表示）
会話のパーソナライズ（AI が値を認識）

が可能です。例：

User name: Mike
Subscription Tier: VIP
Most recently purchased item: Silver package (upgraded)
Next account level: Platinum
Points required to reach the next account level: 758

以下は、カスタムパラメータを認識した AI エージェントの会話例です：

カスタムパラメータの会話例

Your Website > Install で取得したスクリプトに、次の行を追加してください。

widget:

_quickchat("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

iFrame:

_quickchat_embedded("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

JSON は最大 5 キーまで指定できます。これらの属性は新規会話に付与されます。

例：

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/chat.js","_quickchat");
  _quickchat("host", "app.quickchat.ai");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat("init", "abcdefghij");
</script>

iFrame

<div id="quickchat-embedded" style="height:600px;overflow: hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/embed.js","_quickchat_embedded");
  _quickchat_embedded("host", "app.quickchat.ai");
  _quickchat_embedded("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat_embedded("init", "0zmn6up7zo");
</script>

iFrame

iFrame は、ページ内の任意の場所にチャットウィンドウを直接埋め込めます。

iFrame を埋め込む手順

Quickchat AI アプリ にログインし、左サイドバーの Channels > Website > Install から iFrame script をコピー
サイトの HTML または ビルダーのコードエディタ を開く
ページの <body> に、チャットを表示したい位置へコードを貼り付け

ウェブサイト

ウィジェット

ウィジェットを埋め込む手順

WordPress をお使いの場合

Web サイトビルダーの場合

ウィジェットの外観カスタマイズ

上級機能：カスタムパラメータ

iFrame

iFrame を埋め込む手順

Get started

Conversations

AI Agent

Channels