ウェブサイト

Quickchat AI を、フローティングの Widget、インラインの Embed、またはホスト型のチャットページとしてウェブサイトに導入します。インストール、アクセス制御、外観、テキストコンテンツ、カスタムパラメータについて説明します。

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

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

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

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

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

WordPress：無料の Quickchat AI エージェントプラグイン をインストールし、Scenario ID を貼り付けるだけで、テーマのコードを編集することなく Widget が自動的に表示されます。
Shopify：ストアのテーマエディタから Widget を追加します。Shopify ガイドを参照してください。
Webflow、Wix、その他：スニペットを 1 つコピーし、サイトビルダーのカスタムコードまたは埋め込み用のセクションに貼り付けます。できれば閉じタグ </body> の直前が理想です。
代わりにリンクを共有：何もインストールせず、ホスト型のチャットページのリンクを共有します。
コードで手動インストール：Widget または Embed の生のスニペットをコピーし、ご自身で HTML に貼り付けます。

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

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

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

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

Widget のスニペットをコピーします。
ページの HTML ファイル、またはサイトビルダーのコードエディタを開きます。
Widget を表示したいすべてのページで、閉じタグ </body> の直前にスニペットを貼り付けます。

サポートが必要ですか？

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

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

その他のサポートが必要な場合は 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",
});

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

スクリプトの例：

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 を追加する手順

Embed コードを取得する
- Quickchat AI アプリ にログインします。
- 左サイドバーの チャンネル → あなたのウェブサイト を開きます。
- インストール タブをクリックし、コードで手動インストール を展開します。
- Embed snippet をコピーします（<div id="quickchat-embedded"> コンテナとローダースクリプトの両方が含まれます）。
ウェブサイトの HTML ファイル、またはサイトビルダーのコードエディタを開きます。
コードを貼り付ける
- Embed スニペットをページの <body> 内に挿入します。
- チャットウィンドウを表示したい正確な位置に配置します。<div> がサイズを制御するので、レイアウトのスロットに合わせてインラインの style="height:600px" を調整してください。

最終更新日: 2026/07/09

ウェブサイト

Widget

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