ウェブサイト
このガイドでは、ウィジェット または iFrame を使って、あなたのウェブサイトに Quickchat の AI エージェントを統合する方法を説明します。
ウィジェット
Section titled “ウィジェット”ウィジェット はページ右下のチャットバブルとして表示され、クリックするとチャットウィンドウが開きます。ユーザーは質問やサポート依頼をスムーズに行えます。
ウィジェットを埋め込む手順
Section titled “ウィジェットを埋め込む手順”-
ページのコードを開く
Web ページの HTML ファイル、またはサイトビルダーのコードエディタを開きます。
-
ウィジェットコードを取得
- Quickchat AI アプリ にログイン
- 左サイドバー Channels > Website を開く
- Install タブをクリック
- Widget script をコピー
-
コードを貼り付け
表示したいページすべてで、閉じタグ
</body>
の直前にスクリプトを挿入します。
WordPress をお使いの場合
Section titled “WordPress をお使いの場合”footer.php を使う方法
- WordPress ダッシュボードにログイン
- 外観 > テーマエディター で
footer.php
を開く </body>
の直前にスクリプトを貼り付け- 保存
操作動画:
プラグインを使う方法
- Insert Headers and Footers などのプラグインをインストール
- Settings > Insert Headers and Footers を開く
- フッター欄にスクリプトを貼り付け
- 保存
操作動画:
Web サイトビルダーの場合
Section titled “Web サイトビルダーの場合”WordPress / Webflow / Wix などの「カスタムコードの追加」に関するドキュメントを参照してください。
サポートが必要な場合は contact@quickchat.ai までご連絡ください。
ウィジェットの外観カスタマイズ
Section titled “ウィジェットの外観カスタマイズ”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:最初のメッセージ後のヘッダーアニメーション
上級機能:カスタムパラメータ
Section titled “上級機能:カスタムパラメータ”ウィジェット/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
Section titled “iFrame”iFrame は、ページ内の任意の場所にチャットウィンドウを直接埋め込めます。
iFrame を埋め込む手順
Section titled “iFrame を埋め込む手順”- Quickchat AI アプリ にログインし、左サイドバーの Channels > Website > Install から iFrame script をコピー
- サイトの HTML または ビルダーのコードエディタ を開く
- ページの
<body>
に、チャットを表示したい位置へコードを貼り付け