コンテンツにスキップ

ウェブサイト

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

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

  1. ページのコードを開く

    Web ページの HTML ファイル、またはサイトビルダーのコードエディタを開きます。

  2. ウィジェットコードを取得

    • Quickchat AI アプリ にログイン
    • 左サイドバー Channels > Website を開く
    • Install タブをクリック
    • Widget script をコピー
  3. コードを貼り付け

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

footer.php を使う方法

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

操作動画:

プラグインを使う方法

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

操作動画:

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 は、ページ内の任意の場所にチャットウィンドウを直接埋め込めます。

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