ウェブサイト

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

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

選んだ設置方法は チャンネル → あなたのウェブサイト → インストール からインストールします。このページには 3 つのサブタブがあります。インストール（AI エージェントの追加方法を選択）、外観（ビジュアルスタイル）、テキストコンテンツ（訪問者に表示されるプロンプトやラベル）です。インストール タブは方法を選ぶ画面で開き、公開範囲とアクセスの制御は専用のセクションにまとめられ、プラグインや API が必要とするコピー可能な Scenario ID が表示されます。

任意の設定ツール

• ウィジェットのスニペットを確認する. 貼り付けたコードを指定のScenario IDと照合します。ウェブサイトにはアクセスしません。

• 導入方法を比較する. 指定したチャネル、ウェブサイトへのアクセス権、必要な機能をQuickchat AIの設定方法と比較します。ウェブサイトやアカウントの調査は行いません。

• サンプルページのHTMLとMarkdownを比較する. 固定のQuickchat AIサンプルから初期HTML、Markdownの内容、ツールリンクを取得します。JavaScriptの実行や任意のウェブサイトの調査は行いません。

フォームは英語です。

Widget

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

Widget をウェブサイトに追加する手順

チャンネル → あなたのウェブサイト → インストール を開きます。このタブは 「AIエージェントをどのように追加しますか？」 で始まり、簡単なものから順にインストール方法が一覧表示されます。ご自身のサイトに合うものを選んでください。

• WordPress：無料の Quickchat AI エージェントプラグイン をインストールし、Scenario ID を貼り付けるだけで、テーマのコードを編集することなく Widget が自動的に表示されます。
• Shopify：ストアのテーマエディタから Widget を追加します。Shopify ガイド を参照してください。
• Webflow、Wix、その他：スニペットを 1 つコピーし、サイトビルダーのサイト全体に適用するカスタムコード設定に貼り付けて、すべてのページに適用します。ページ上の Embed 要素や HTML 要素は使わないでください。サイトビルダー を参照してください。
• 代わりにリンクを共有：何もインストールせず、ホスト型の チャットページ のリンクを共有します。
• コードで手動インストール：Widget または Embed の生のスニペットをコピーし、ご自身で HTML に貼り付けます。

各方法を選ぶと、必要なコードや ID だけが表示される、ステップバイステップの専用パネルが開きます。

Scenario ID はインストール タブの上部に、コピー可能なフィールドとして表示されます。これはプラグインや API が必要とする識別子なので、セットアップの手順で求められたときはここからコピーしてください。

コードで手動インストール

ご自身で HTML を管理している場合は、インストール タブで コードで手動インストール を展開し、次の手順を行います。

1. Widget のスニペットをコピーします。
2. ページの HTML ファイルを開きます。サイトビルダーの場合は、代わりにサイト全体のコード設定を使います（サイトビルダー を参照）。
3. Widget を表示したいすべてのページで、閉じタグ </body> の直前にスニペットを貼り付けます。

サイトビルダー

Webflow、Wix、Squarespace、Hostinger などのビルダーでは、ビルダーのサイト全体のコード設定から Widget を 1 回だけ追加します。

1. すべてのページにコードを追加する設定を開きます。ビルダーによって Custom code、Code injection、Footer code、Body end などと呼ばれます。
2. そこに Widget のスニペットを貼り付け、すべてのページ に適用します。コードの配置場所を選べる場合は、フッターまたは body の末尾を選んでください。head ではスニペットは動作しません。
3. サイトを公開します。すべてのページにチャットバブルが表示されます。

注意

ページ上に配置した Embed 要素や HTML 要素で Widget を追加しないでください。多くのビルダーでは、これらの要素が小さな別枠の中に表示され、その中では Widget を開けません。読み込まれた場合でも、そのページにしか表示されません。

サイト全体のコード設定の場所は次のとおりです。

ビルダー	サイト全体のコード設定
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code を開き、All pages と Body - end を選びます。ドメインの接続が必要です。
Squarespace	Custom Code → Code Injection → Footer。Core、Plus、Advanced および一部の旧プランで利用できます。
Hostinger Website Builder	More (⋯) → Integrations → Custom code。スクリプトは自動的にページの末尾で読み込まれます。

メニューは変更されることがあり、ビルダーの表示言語に翻訳されている場合もあります。ご利用のビルダーやプランにサイト全体のコード設定がない場合は、代わりに チャットページ のリンクを共有してください。

サポートが必要ですか？

開発者ではありませんか？ インストール タブには サポートが必要ですか？ の下に 2 つのショートカットがあります。

• AIに質問する：アプリ内アシスタントを開きます。エージェントをウェブサイトに追加する方法についての質問があらかじめ入力されています。
• 開発者に手順をメールする：チームメンバーに必要なものをすべて（Widget のスニペット、Scenario ID、このガイドへのリンク）送信し、代わりにインストールしてもらえます。

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

チャットページ

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

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

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

新しい会話を始める

チャットをリセットして新しく始めるには、次の操作を行います。

• ウィジェットまたは Embed：チャットを開き、チャットウィンドウの右上にある 四角の中にペンが描かれたボタン をクリックします。
• チャットページ：サイドバーで New chat を選択するか、ヘッダーにある四角の中にペンが描かれたボタンを使います。

これで AI エージェントとの新しい会話が始まります。以前の会話は 受信箱 に残ります。ウィジェットを閉じて開き直したり、ページを再読み込みしたりすると、既存の会話が再開される場合があります。AI に「リセットして」や「チャットを消去して」と頼んでも、新しい会話は始まりません。ブラウザの Cookie を削除する必要はありません。

アクセス制御

インストール タブでは、アクセス制御が折りたたみ可能な 公開範囲とアクセス セクションにまとめられています。これを展開すると、デプロイに適用される 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 枚アップロードすると両方の場所に表示されます（従来は別々だった「ヘッダーロゴ」と「ランチャーアイコン」を置き換えます）。各エージェントには標準のデフォルトアバターが用意されています。デフォルトにリセット で元に戻せ、削除するとアバターはまったく表示されなくなります。Free を含むすべてのプランで利用できます。

AIエージェントアバター は Widget、Embed、チャットページ に適用されますが、Discord には適用されません。Discord では、ボットのアバターはそのボットの Discord アプリのものが使われます（Discord を参照）。

サイズと位置

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

テーマ

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

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

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

透明度の背景で、チャットウィンドウの透け具合を設定します。すべてのテーマモードで使え、色合いはテーマによって決まります。

• 不透明：チャットウィンドウの背景は不透明です。これがデフォルトです。
• ガラス：チャットウィンドウが半透明になり、背後のウェブサイトがすりガラスのようにぼかされます。ライトでは白、ダークでは暗い色、カスタムでは設定した背景色で色付けされます。カスタムで背景と異なるヘッダーの色を設定している場合、その色はそのまま使われ、ブランドカラーが表示されます。ガラスの不透明度で、色合いがページをどの程度覆うかを調整できます。下限は、どのウェブサイトの上でもテーマの文字が読みやすい値（ライトは50%、ダークは65%、カスタムは設定した色によって決まります）で、上限は95%です。カスタムで、どの不透明度でも設定した色では文字が読みやすくならない場合、ウィジェットは単色の背景を使用し、設定画面にその理由が表示されます。ガラスは選択されたままで、文字色または背景色を調整して十分なコントラストが得られると再び適用されます。

透明度は Widget（スマートフォンを含む）と Embed に適用されます。全画面表示の チャットページ の背景は常に不透明です。端末で「透明度を下げる」をオンにしている訪問者には、この設定をウェブサイトに伝える Chrome と Edge では不透明のスタイルで表示されます。また、ページをぼかせないブラウザでは、文字が読みやすいようにガラスはほぼ不透明のままになります。

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

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

その他の設定

• 音声入力：訪問者がチャット入力欄のマイクで音声メッセージを録音できるようにします。テキストに変換されて入力欄に表示されるため、送信前に編集できます。録音は 2 分で自動的に停止します（有料プランで利用可能）。
• ファイル添付：訪問者がメッセージに画像やドキュメントを添付できるようにします。既定でオンです。オフにすると、チャット入力欄から添付ボタンが非表示になります。
• ウィジェット自動オープン：ページの読み込み時に Widget を自動的に開きます。
• Quickchat AIブランディングを非表示にする：「Powered by Quickchat AI」のフッターを非表示にして、完全なホワイトラベル体験を実現します（ホワイトラベルを含むプランで利用可能）。

訪問者が会話を評価できるようにするには、会話 → インサイト → 会話評価 を開きます。設定と結果はどちらもこのタブにあります。詳しくは 会話評価 を参照してください。

テキストコンテンツ

チャンネル → あなたのウェブサイト → テキストコンテンツ を開くと、挨拶やその他の訪問者向けのテキストを編集できます。

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

プリチャット画面 セクションは、同じ テキストコンテンツ タブのこれらのフィールドの下にあります。ここで有効にし、ヘッダー、ボタン、メッセージのテキストを編集します。

言語と翻訳

デフォルトでは、テキストコンテンツは入力したとおりにすべての訪問者に表示されます。有料プランでは言語ごとの翻訳を追加して、訪問者が自分の言語でウィジェットを見られるようにできます。

1. テキストコンテンツ サブタブを開き、その他の言語 の 翻訳 をクリックします。ウィジェットテキストを翻訳 パネルが開き、各翻訳の横に元のテキストが デフォルト（ソース） として表示されます。
2. 言語を追加 をクリックして言語を選びます。Quickchat AI が現在のテキストの翻訳を生成します。その言語のフィールド（ヘッダーテキスト、ウェルカムメッセージ、会話のスターター、入力プレースホルダー、pre-chat 画面、免責事項テキスト）を確認して編集します。変更は自動的に保存されます。
3. 空のままにしたフィールドはデフォルトのテキストにフォールバックするため、変更したい部分だけを翻訳すれば済みます。自動翻訳に失敗した場合でも、テキストを手動で入力できます。

追加できる言語の数はプランによって異なります。

訪問者の言語の決まり方

Quickchat は次の順序で言語を選びます。

1. ローダーで設定する明示的な指定：_quickchat("language", "de")（_quickchat("init", ...) の前に呼び出してください）。
2. ページの <html lang> 属性 — 例えば <html lang="de"> ではドイツ語の翻訳が表示されます。これが推奨される方法です。各ローカライズ済みページで lang を正しく設定すれば、ウィジェットは自動的に従います。
3. 訪問者のブラウザー言語、いずれも一致しなければ Default テキスト。

ノート

訪問者の言語に翻訳がない場合は、常に Default テキストが表示されます。空欄になることはありません。

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

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

• 分析の強化（Quickchat プラットフォームの CSV エクスポートに表示されます）
• API Actions への値の提供と、許可された場合の返信のパーソナライズ。AI が受け取るのはフィルタリングされた一部の値であり、すべてのパラメータではありません。モデルのコンテキストと認可を参照してください

役立つカスタムパラメータの例を以下に示します。

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name は、連絡先情報として認識されるキーです。customer_tier などのカスタムキーは保存して Action で使用できますが、送信しただけで AI が返信に使用するとは限りません。ブラウザから送られた値は未検証の入力として扱い、顧客アカウントへのアクセス権限を証明するものとして扱わないでください。

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

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

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

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

ヒント

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", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _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", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _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" を調整してください。
   • サイトビルダーの場合は、チャットウィンドウを表示したい位置にコード要素または HTML 要素を追加し、そこにスニペットを貼り付けます。

ノート

Embed は、ビルダーがコードをページに直接挿入する場合にのみ動作します。Wix など一部のビルダーでは HTML 要素が別枠の中に表示され、Embed は枠の中では読み込めません。公開したページにチャットウィンドウが表示されない場合は、代わりにサイト全体のコード設定から Widget を追加するか、チャットページ のリンクを共有してください。