ウェブサイト

Quickchat AI エージェントをウェブ上に設置する方法は 3 つあります。表示したい場所に合わせて選んでください。

• Widget：サイトの隅に表示されるフローティングのチャットバブルです。汎用的なサポートに最適です。
• Embed：ページ上の好きな位置にそのまま配置できるインラインのチャットウィンドウです。特定のアプリ画面、ヘルプセンターのページ、製品詳細ページなどに AI を埋め込みたい場合に最適です。
• チャットページ：Quickchat が提供する、フルスクリーンのホスト型チャット体験です（インストール不要、コード不要）。誰かにリンクを共有したい場合（例：サポートメール、社内 Slack、ベータテスター）に、相手のブラウザに手を加えることなく利用できます。

選んだ設置方法は チャンネル → あなたのウェブサイト → インストール からインストールします。このページには、本記事の構成と対応する 3 つのサブタブがあります。インストール（スニペットとアクセス）、外観（ビジュアルスタイル）、テキストコンテンツ（訪問者に表示されるプロンプトやラベル）です。

Widget

Widget を使うと、Quickchat AI エージェントをウェブサイトに直接埋め込み、ユーザーが AI とスムーズにやり取りできるようになります。Widget は通常、ウェブページの右下隅にチャットバブルとして表示されます。クリックするとチャットウィンドウが開き、ユーザーは質問したり、サポートを受けたり、情報にアクセスしたりできます。

Widget をウェブサイトに埋め込む手順

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

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

2. Widget コードを取得する

   • Quickchat AI アプリ にログインします。
   • 左サイドバーの チャンネル カテゴリにある あなたのウェブサイト セクションを開きます。
   • インストール タブをクリックします。
   • Widget script のコードをコピーします。

3. コードを貼り付ける

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

WordPress をお使いの場合

最も簡単な方法は、公式の Quickchat AI エージェントプラグイン を使うことです。WordPress プラグインディレクトリからインストールし、Scenario ID を貼り付けるだけで、テーマのコードを編集することなく Widget が自動的に表示されます。WordPress ガイド には、ステップバイステップの手順に加えて、プラグインを使いたくない場合の手動スクリプトのオプションも記載されています。

サイトビルダーをお使いの場合

WordPress、Webflow、Wix などのプラットフォームをお使いの場合は、カスタムコードの追加に関する各サービスのドキュメントを参照してください。

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

チャットページ

チャットページ は、Quickchat の URL 上に存在する、AI エージェントのホスト型フルスクリーン版です。インストールするものは何もありません。リンクを共有するだけで、訪問者はブラウザ上で直接 AI エージェントとチャットできます。次のような場合に利用してください。

• チャット体験を提供したいが、ウェブサイトを持っていない（またはそのコードに手を加えたくない）場合。
• AI を少人数のグループ（ベータテスター、サポートチーム、営業見込み客）に社内で共有しており、公開ウィジェットではなくアクセス制御されたリンクが必要な場合。
• メール、Slack、CRM 内でフォローアップのチャネルとして AI を送りたい場合。

チャットページ を開けるユーザーは インストール → チャットページへのアクセス から設定します（下記のアクセス制御を参照）。

アクセス制御

インストール タブには、デプロイに適用される 2 つのアクセス制御があります。

ウィジェットと埋め込みのアクセス

インストール タブ上部にあるマスタートグルです。有効にすると、Widget と Embed のスクリプトは訪問者のブラウザ上で通常どおり動作します。無効にすると、スクリプトが貼り付けられたままでも、Widget と Embed はサイト上で利用できなくなります。スニペットを削除せずに AI を一時的にオフラインにしたい場合や、チャットページ を招待ユーザーに開放したまま公開アクセスを制限したい場合に便利です。

チャットページへのアクセス

Widget と Embed のトグルとは独立して、チャットページ を開けるユーザーを制限できます。

• 誰でも：チャットページ の URL は公開されます。リンクを知っている人なら誰でも利用できます。
• 招待されたユーザーのみ：メールで招待した チャットユーザー だけが チャットページ を利用できます。利用には認証が必要です。
• なし：チャットページ は完全に無効になります。

招待されたユーザーのみ でアクセス権を付与するには、ラジオボタンの横にある チャットユーザーを招待する をクリックします。すると アカウント設定 → チャットユーザー に移動し、メールで招待を送ったり、アクセス権を持つユーザーを管理したりできます。

カスタマイズ

外観 と テキストコンテンツ のサブタブでは、Widget、Embed、チャットページ の見た目や訪問者に表示される文言を調整できます。これら 3 つの設置方法はすべてこの設定を共有しているため、一度変更すれば、エージェントを設置したすべての場所に適用されます。

インストール／外観／テキストコンテンツ タブの右ペインには、独自のプレビューコントロールがあります。Widget、Embed、チャットページ のプレビューを切り替えたり、Desktop と Mobile のビューポートを切り替えたりして、公開前に変更内容を確認できます。

外観

チャット画面のビジュアルスタイルで、Branding、Size & Position、Theme、Other Settings にグループ分けされています。

ブランディング

• AIエージェントアバター：チャットヘッダーとランチャーボタンの両方に使用される 1 枚の画像（最大 5 MB）。これは 2 つではなく 1 つの設定です。1 枚アップロードすると両方の場所に表示されます（従来は別々だった「ヘッダーロゴ」と「ランチャーアイコン」を置き換えます）。各エージェントには標準のデフォルトアバターが用意されています。デフォルトにリセット で元に戻せ、削除するとアバターはまったく表示されなくなります。

サイズと位置

• ランチャーサイズ：Classic、Input Only、または 小。開く前のチャットランチャーの見た目を制御します。
• ランチャーのラベル：小 を選んだ場合にのみ表示されます。Small ランチャーボタンに表示するカスタムテキスト（最大 25 文字）で、例えば “Ask AI” や “Chat” などです。空にするとアイコンのみのランチャーになります。
• ウィジェットの位置：右下または左下。
• チャットウィンドウのサイズ：チャットウィンドウの幅（300–700px）と高さ（400–1200px）。
• ドラッグ可能なランチャー：訪問者がランチャーをページ上の別の位置へドラッグできるようにします。重要なコンテンツを覆ってしまう場合に便利です。

テーマ

チャット画面の配色方法を選択します。

• ライト と ダーク は固定のプリセットで、どのアカウントでも同じ見た目になります。
• カスタム を選ぶと、独自のフルパレットが使えるようになります。カスタムを選択すると、背景、ヘッダーとヘッダー文字、アクセント（プリチャットの開始ボタン、サジェスチョンチップ、評価アクションなどのボタンに使用）、メッセージバブルとその文字、AI メッセージの文字、リンク色、入力欄、枠線などのカラーコントロールが表示されます。各色は背景に対する WCAG AA のコントラスト基準で検証され、読みにくい組み合わせの場合は警告が表示されます。

ブランドカラーのヘッダーとアクセントは カスタム テーマで設定します。ライトとダークはニュートラルなプリセットのままなので、両者を切り替えてもカスタムカラーが引き継がれることはありません。

カスタムを選択すると、Chat Page にも専用のサイドバーの色が表示されます：サイドバーの背景、サイドバーのテキスト、サイドバーのホバー、ホバー時のテキスト。これらは Chat Page の全画面表示にのみ適用され、bubble や embed ウィジェットには適用されません。テキストの色を未設定のままにすると、選択した背景に合わせて読みやすい色が自動的に選ばれます。

角丸（バブル、入力欄、ボタンの丸み）と文字サイズも設定できます。どちらもすべてのテーマモードに適用されます。

その他の設定

• ウィジェット自動オープン：ページの読み込み時に Widget を自動的に開きます。
• Quickchat AIブランディングを削除：「Powered by Quickchat AI」のフッターを非表示にして、完全なホワイトラベル体験を実現します（ホワイトラベルを含むプランで利用可能）。
• 会話評価：訪問者が会話の最後に会話を評価できるようにします。結果は Insights → 会話評価 に表示されます。

テキストコンテンツ

テキストコンテンツ サブタブでは、訪問者に表示されるすべての文言を制御します。

• ヘッダーテキスト：チャットウィンドウの上部に表示されるテキスト。
• ウェルカムメッセージ：各会話の冒頭で AI エージェントが最初に送るメッセージ（例：“Hey, do you need help?”）。
• ポップアップとして表示：訪問者がクリックする前に注意を引くため、ウェルカムメッセージをランチャーの横にフローティングの吹き出しとして表示するトグル。
• 会話のスターター：訪問者が入力を始める前に表示される、最大 3 件のサンプルメッセージ。クリックすると最初のメッセージとして送信され、訪問者を AI の得意分野へ誘導するのに役立ちます（“How do I install the widget?”、“What integrations do you support?”）。
• 入力プレースホルダー：空のメッセージ入力欄に表示されるヒントテキスト。
• 免責事項テキスト：会話の背後に表示されるテキストで、通常はユーザーに AI と話していることを伝えます。明確で見やすい状態に保つことをおすすめします。

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

Quickchat AI の Widget と Embed では、初期化時に カスタムパラメータ を渡すことができます。これらは次の用途に使えます。

• 分析の強化（Quickchat プラットフォームの CSV エクスポートに表示されます）
• 会話のカスタマイズ（Quickchat 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 エージェントの会話例です。

上記のようなカスタムパラメータを追加するには、あなたのウェブサイト > インストール にあるスクリプトに次の行を含めてください。

Widget と Embed は同じ呼び出しシグネチャを使用します。

_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",
});

これらの属性はすべての新規会話に付与されます。キーは少数にとどめることをおすすめします。

ヒント

snake_case の名前を持つカスタムパラメータ（例：order_id、customer_tier）は、{{metadata_order_id}}、{{metadata_customer_tier}} などとして API Actions に直接挿入できます。詳しくは AI Action 変数 を参照してください。

スクリプトの例：

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://bubble.quickchat.ai/chat.js","_quickchat");
  _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>

Embed

<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://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _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>

Embed

Embed を使うと、フローティングバブルではなく、インラインのチャットウィンドウとして Quickchat AI エージェントをページ内に直接配置できます。ヘルプセンターの列、お問い合わせページ、アプリ内のサイドバーなど、ページ上の特定の位置にチャットを配置したい場合に利用してください。

Embed を追加する手順

1. Embed コードを取得する

   • Quickchat AI アプリ にログインします。
   • 左サイドバーの チャンネル → あなたのウェブサイト を開きます。
   • インストール タブをクリックします。
   • Embed snippet をコピーします（<div id="quickchat-embedded"> コンテナとローダースクリプトの両方が含まれます）。

2. ウェブサイトの HTML ファイル、またはサイトビルダーのコードエディタを開きます。

3. コードを貼り付ける

   • Embed スニペットをページの <body> 内に挿入します。
   • チャットウィンドウを表示したい正確な位置に配置します。<div> がサイズを制御するので、レイアウトのスロットに合わせてインラインの style="height:600px" を調整してください。