チャットウィジェット

ウェブサイトチャットウィジェット統合ガイド

ウェブサイトにユーザーフレンドリーなチャットウィジェットを追加し、訪問者がサイトのインターフェースから直接コミュニケーションできるようにします。統合プロセスは簡単で、ウェブサイトに組み込みのメッセージング機能を提供します。

チャットウィジェットの作成と設定

アクセス方法:

左サイドバーの下部付近にある Settings（設定）をクリックします。（スマートフォンの場合は、まず上隅にあるメニューアイコン ☰ をタップしてサイドバーを開きます。）
設定の左側レールにある Channels（チャネル）の下の Channels をクリックします。
Website chat widget（ウェブサイトチャットウィジェット）カードを探します。
まだウィジェットを作成していない場合は、Connect（接続）をクリックして、表示名とウェルカムメッセージを設定して作成します。
作成後は、いつでも Manage（管理）をクリックして、完全な設定パネルを開くことができます。

保存した変更はライブウィジェットに自動的に適用されます。変更後にインストールコードを再貼り付けする必要はありません。

設定のすぐ隣にはライブプレビューがあります。これは、実際のウィジェットが動作しているサンプル Web ページで、色、位置、ロゴ、ランチャーアイコン、プロアクティブポップアップが訪問者に見える通りに表示されます。編集内容はリアルタイムで反映されるため、保存しなくても色やテーマの変更を確認できます。プレビュー内のチャットボタンをクリックしてウィジェットを開き、試してみることも可能です。

カスタマイズ可能な項目

管理パネルは4つのセクションで構成されています。

外観

スタイルテーマ: ワンクリックでウィジェット全体のスタイルを変更できます。6つのテーマ（Classic：オリジナルのソリッドな外観 — フラットなパネル上のカラーヘッダーバー、Glass：背後のページを柔らかくぼかす半透明のすりガラス風パネルで、ヘッダーとメッセージボックスが丸みを帯びたカードとして浮かび上がる、Midnight：ダークカラーのGlass、Bloom：ソフトピンクで丸みを強調、Ember：温かみのあるオレンジのGlass、Mono：白黒でシャープな角）が、外観、色、角の丸み、フォントを一括で設定します。テーマはあくまで出発点であり、選択後も個別に色や設定を調整可能です。新しいウィジェットはデフォルトでGlassが適用されます。テーマを切り替えると、サイト上のコードを変更することなく、ウィジェットが埋め込まれているすべての場所で即座に反映されます。
角の丸みとフォント: 2つの独立したスタイル設定です。角の丸みではパネル、吹き出し、ボタンの角の丸み（Round、Soft、Sharp）を設定し、フォントでは訪問者に表示される書体（Default、Serif、Rounded、Mono）を選択します。フォントは訪問者のデバイスにインストールされているものが使用されるため、サイトの読み込み速度に影響を与えません。
表示名: ウィジェットのヘッダーに表示されます。
ロゴ: チャット上部に表示される画像をアップロードします。会社のロゴや親しみやすい顔写真などを使用してください。
ランチャーアイコン: フローティングチャットボタン自体に表示されるアイコンです。組み込みのアイコン（チャットの吹き出し、紙飛行機、疑問符など）から選ぶか、アップロードしたロゴを再利用するか、独自の画像をアップロードできます。実際のチームメンバーの写真を設定して訪問者を迎える場合に便利です。
色: ウィジェットの各パーツに対応する5つの色を設定します。ブランドカラーはフローティングボタン、ヘッダー、訪問者自身のメッセージの色で、ブランドテキストはその上に表示されるテキストの色です。ボットの吹き出しはボットの返信と入力インジケーターの背景色で、ボットの吹き出しテキストはその中の文字とアニメーションする入力中のドットの色です。チャットウィンドウはすべてのメッセージの背後にあるパネルの色です。ボットの吹き出しの色は、ブランドカラーとは明確に異なる色を選択してください。両者が同じ色だと、会話の両側の区別がつかなくなり、訪問者がボットの返信と自分のメッセージを判別できなくなります。ブランドカラーの横に、暗いテキストを配置した明るいグレーのボットの吹き出しを組み合わせるのが安全です。
位置: フローティングチャットボタンを右下または左下に配置します。ページ上の他の要素と重なる場合は、水平および垂直のオフセット（ピクセル単位）で調整できます。
スターター質問: チャット内に表示されるクイック返信の提案（クリック可能なチップ）です。訪問者は入力の手間を省き、ワンタップで会話を開始できます（例：「料金はいくらですか？」や「サポートはありますか？」など、最大10個まで）。

動作

開始メッセージ: 訪問者がチャットを開いたときに最初に表示されるメッセージです（例：「何かお手伝いしましょうか？」）。
サウンド: チャットに新しいメッセージが届いたときにサウンドを再生します。
通知の許可を求める: ブラウザの通知を許可するよう訪問者に促すオプションです。これにより、タブを切り替えていても返信に気づくことができます。
プロアクティブポップアップバブル: チャットボタンの横にポップアップ表示され、訪問者を誘う小さなバブルです（オプション）。これをオンにすると、メッセージ、承諾/拒否ボタンのテキスト、表示までの待機秒数を設定できます。バブルは誰もクリックしなければ20秒後に自動的に非表示になり（この時間は固定です）、訪問者が「今はしない」をクリックすると、その訪問中はずっと表示されなくなります。チャットウィンドウ自体が勝手に開くことはありません。訪問者がチャットボタンやバブルをクリックしたときに開き、閉じるまで開いたままになります。
AIの応答速度: 「低速」（より人間らしく、AIが少し間を置いてから返信します）から「最高速度」（よりロボットらしく、可能な限り速く返信します）の間で調整できるスライダーです。「バランス」はその中間に位置します。

言語

ウィジェットはそれ自体で多言語に対応しているため、有効にするための設定は不要です。

訪問者の言語を自動的に選択します。 まずページがHTML（<html lang="it">）で宣言している言語を確認し、それが不明な場合は訪問者のブラウザ言語を使用します。どちらもサポート対象外の言語である場合は、英語で表示されます。
手動で選択することも可能です。 「動作」セクションの「ウィジェットの言語」フィールドはデフォルトで「自動」に設定されており、上記のような検出が行われます。ここで特定の言語を選択すると、ページやブラウザの設定に関係なく、ウィジェット独自のラベル（訪問者フォームの「名」「メールアドレス」「電話番号」フィールドとその入力例、プライバシー通知、ボタンなど）はその言語で固定されます。サイトビルダーが正しい言語を宣言していない場合や、すべての訪問者に対して言語を固定したい場合に使用してください。
サポートされている言語: 英語、オランダ語、ドイツ語、フランス語、スペイン語、イタリア語、ポルトガル語、ルーマニア語、ポーランド語、アラビア語、フィンランド語、フィリピン語。これはウィジェット独自のボタンやラベルに対応する言語リストです。
メッセージは自動的に翻訳されます。 保存するたびに、開始メッセージ、プロアクティブポップアップバブル、スターター質問が上記の12言語すべてに翻訳されます。メッセージは、お好みの言語で一度作成するだけで済みます。
各メッセージは1つの言語のみで作成してください。 同じフィールドに英語とイタリア語のように2つの言語を混在させると、全体が1つのメッセージとして扱われ、そのまま翻訳されます。その結果、イタリア語の訪問者には同じ文章が2回表示されることになります。メッセージは、お好みの言語で一度だけ作成してください。
AIは訪問者の言語で返信します。 訪問者がどの言語で入力しても、ウィジェットのラベル表示言語に関係なく、エージェントはその言語で回答します。常に特定の言語で回答させたい場合は、エージェントの指示でそのように指定してください。

ヒント: ウェブサイトの <html> タグに lang 属性が設定されていない場合は、追加してください。これは、特に海外から閲覧している訪問者に対して適切な言語を選択するための最も強力なシグナルとなります。

リード獲得とプライバシー

訪問者情報の収集: デフォルトではオフになっています。オンにすると、会話を開始する前に訪問者の名前とメールアドレス（およびオプションで電話番号）の入力を求めるため、チャットの途中で離脱された場合でもリード情報を取得できます。
フォームのタイトルおよびフォームのサブタイトル: フォームの上に表示される見出しと短い説明をカスタマイズします。
電話番号の収集: オンにすると電話番号の入力も求めます。オフにすると名前とメールアドレスのみを収集します。

訪問者が電話番号を残してサイトから離脱してしまいました。WhatsAppで会話を続けることはできますか？ はい、可能です。チャットを開き、3点メニューから WhatsAppで続ける を選択してください（WhatsApp WebまたはWhatsApp Businessが接続されている必要があります）。Your AI Connector は、同一人物のWhatsApp会話をリンクし、名前、メールアドレス、詳細情報をコピーします。また、AIがサイト上での会話内容を引き継ぐため、同じことを繰り返す必要はありません。ウェブサイト上のチャットはそのまま残り、両方のチャットは連絡先パネルの リンクされた会話 で相互に参照されます。チャットインターフェースを参照してください。

AIエージェントからWhatsAppへの切り替えを提案させることはできますか？ はい、特別な機能は不要で、エージェントの指示に1行追加するだけで可能です。「こんにちは、ウェブサイトでチャットしていましたが、こちらで続きを話したいです」といった事前入力メッセージを含むWhatsApp番号用のショートリンクを作成し、エージェントに送信タイミングを指示します（例：「訪問者が離脱する必要がある場合、後で続きを話したい場合、またはWhatsAppを希望する場合は、そこで会話を続けるよう提案し、このリンクを送信してください：（ショートリンク）」）。ウィジェット内のリンクはタップ可能であるため、訪問者はあなたの番号が選択され、メッセージが事前入力された状態でWhatsAppに移動します。訪問者が最初のメッセージを送信すると、受信トレイでWhatsAppの会話が開始されます。訪問者がウィジェットフォームで（国番号付きの）電話番号を入力していた場合、Your AI Connector は自動的に2つの会話をリンクし、WhatsApp上のAIは WhatsAppで続ける と同様にウェブサイトでのチャット内容を把握します。電話番号が収集されなかった場合、2つのチャットはリンクされないため、WhatsAppのエージェントが相手の経緯を把握できるよう、事前入力メッセージを具体的にしておくことをお勧めします。

プライバシーポリシーの同意を必須にする: 訪問者がチャットを開始する前にプライバシーポリシーへの同意を求める設定や、リンク先のURLを設定できます。

ウィジェットは訪問者のブラウザに何を保存しますか？また、クッキーバナーの背後に配置する必要がありますか？ ページを読み込むだけでは何も保存されません。訪問者がチャットを開始する（最初のメッセージを送信する、訪問者情報フォームに入力する、またはプライバシーポリシーに同意する）まで、ウィジェットはクッキーやブラウザストレージへの書き込みを行いません。その時点から、訪問者が戻ってきたときにもチャットが継続できるよう、ランダムな会話IDと会話のコピーがファーストパーティストレージとして訪問者のドメインに保存されます。分析スクリプトやトラッキングスクリプトは読み込まれず、サードパーティクッキーも設定されません。訪問者がチャットを希望するまで何も書き込まれないため、これは訪問者が要求したサービスに厳密に必要なストレージとみなされ、同意バナーの背後に配置することなく読み込むことが可能です。もしサイトで同意管理ツールを既に使用している場合は、ウィジェットをその背後に配置しても問題ありません。その場合、訪問者が同意した時点でチャットが表示されるようになります。

チャネルと埋め込み

添付ボタン: 訪問者がチャットで画像やファイルを送信できるようにします。
絵文字ピッカー: メッセージボックスの横に絵文字ピッカーを追加します。
チャネルリンク: WhatsApp、Instagram、Messengerのリンクを任意で含めることで、訪問者が好みのプラットフォームで会話を継続できるようにします。これは、WhatsApp番号、Instagram、またはMessengerを接続した後にのみ表示されます。
アクションボタン: チャットの上部に表示されるショートカットの列です。会話を開始する代わりに、訪問者を別の場所に誘導します。以下のアクションボタンを参照してください。
ドメインホワイトリスト: ウィジェットの埋め込みを許可するウェブサイトを制限します。インストール先のドメイン（例: example.com や *.example.com）を追加してください。空欄にすると、すべてのドメインで許可されます。
チャットのルーティング先: コピーしようとしているコードから発生するチャットを処理するキャンペーンまたはエージェントを選択します。通常のチャットウィジェットのルーティングを使用する場合は、アカウントのデフォルトのままにしてください。以下のページごとに異なるキャンペーンへ送信するを参照してください。
埋め込みスニペット: フローティングバブルまたはインラインを選択し、インストールコードをコピーします（下記参照）。
クライアントデモリンク: ウェブサイトのアドレスを貼り付けると、そのサイト上でウィジェットが動作する共有可能なリンクを取得できます。相手側でのインストールは不要です。以下の他人のウェブサイトでウィジェットを表示するを参照してください。

パネルの下部にある Delete chat widget（チャットウィジェットを削除） アクションを実行すると、ウェブサイトからウィジェットが即座に削除されます。これは元に戻すことができず、訪問者はチャットバブルを見ることができなくなります。

アクションボタン

チャットをしたくない訪問者もいます。電話番号、住所、メールアドレスをワンタップで知りたいというニーズに応えるのが、チャットパネル上部に配置されるショートカットの列「アクションボタン」です。

最大6つまで追加できます。それぞれにラベル（ボタン上のテキスト）と宛先があり、宛先は選択したアクションによって異なります。

アクション	訪問者の動作	入力内容
電話	電話アプリが開き、番号が入力された状態になります	電話番号（例: `+1 555 123 4567`）
SMS	メッセージアプリが開き、新規テキスト作成画面になります	電話番号
WhatsApp	WhatsAppが開き、チャットが開始されます	WhatsApp番号、または既にお持ちの `wa.me` リンク
メール	メールアプリが開き、新規メール作成画面になります	メールアドレス
道順	Googleマップが開き、指定した場所が表示されます	住所、または既にお持ちのマップリンク
リンク	新しいタブでページが開きます	`https://` で始まる完全なウェブアドレス

これらのボタンの使用にクレジットは消費されません。 ボタンをタップしてもメッセージは送信されず、会話も開始されません。単に訪問者を指定の場所へ誘導するだけです。クレジットが消費されるのは、これまで通りAIエージェントとの実際の会話のみです。

知っておくべきいくつかの点：

ボタンは訪問者がチャットしている間も表示され続けます。 質問を2つした後でも、ページを再読み込みすることなく「道順」をタップできます。
ラベルは入力した通りに表示されます。 開始メッセージやスタータークエスチョンとは異なり、ボタンのラベルは自動翻訳されません。そのため、複数の言語で訪問者に対応する場合は、ラベルを短く分かりやすくするか、メインの言語で記述してください。
正しく入力しないと保存されません。 電話番号、メールアドレス、リンクが無効な場合、パネルにその旨が表示され、サイト上で機能しないボタンが公開されないよう「変更を保存」がブロックされます。
FAQの回答ではありません。 アクションボタンは訪問者を別の場所へ誘導するだけで、定型文で返信するものではありません。質問への回答はAIエージェントの役割であり、ナレッジベースに基づいて回答します。質問を促したい場合は、「外観」設定にあるスタータークエスチョンを使用してください。

カスタマイズできないこと

「管理」パネルにあるオプションがすべてです。特に以下の点はカスタマイズできません。

カスタムCSSやスタイルシートは使用できません。 スタイルはテーマ、コーナー、フォント、カラーピッカーで提供されるものに限られます。ウィジェットに独自のCSSを注入することはできず、ページ上のルールがウィジェット内部に適用されることもありません。
メッセージボックス内のカスタムプレースホルダーテキストは使用できません。
国や地域による制限はできません。 「ドメインのホワイトリスト」はウィジェットを埋め込めるウェブサイトを制限するものであり、訪問者の場所に基づいて表示・非表示を切り替える機能はありません。それが必要な場合は、表示したくないページやターゲットに対して、埋め込みスニペット自体を非表示にするようにしてください。
チャット内への動画埋め込みはできません。
自動非表示タイマーは変更できません。 招待バブルは20秒後に自動的に消えますが、この時間は変更できません。また、開いたチャットウィンドウが自動的に閉じることもありません。バブルがページコンテンツに重なってしまう場合は、「位置」オフセットでウィジェットを移動させるか、バブルをオフにしてランチャーボタンのみを表示してください。

これらが導入の妨げとなる場合は、インライン埋め込みを使用することで最大限の制御が可能になります。ウィジェットは自身のページ内のコンテナに配置され、サイズや位置を自分で調整できます。

インストール手順

チャットウィジェットをウェブサイトに追加するには、サイトのHTMLに1行のコードを追加します。

テキストエディタでウェブサイトのHTMLファイルを開きます。
閉じタグ </body> を探します。通常はファイルの最後の方にあります。
ページの他の要素が先に読み込まれるよう、このコード行を </body> タグの直前に貼り付けます。

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>

CONFIG_ID を、管理パネルの Channels & Embed セクションに表示されている固有の設定識別子に置き換えます。この識別子はアカウント固有のもので、ウィジェットとメッセージングシステムを接続します。

このスニペットがサイトの速度を低下させることはありません。非常に小さなローダーであり、ウィジェット自体はページをブロックすることなくバックグラウンドでダウンロードされます。それでもページが完全に読み込まれるまでウィジェットの読み込みを待機させたい場合は、代わりに同じURLを次のようにラップすることができます。

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

ウィジェットの読み込みではなく、小さな招待バブルの表示を遅らせたい場合は、上記の「動作」セクションにあるプロアクティブなポップアップバブルの遅延設定を使用してください。コードは不要です。

チャットウィジェットを実装したHTMLファイルがどのようになるかの完全な例を以下に示します：

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>
</body>
</html>

ページへのインライン埋め込み（高度な設定）

チャットを隅に浮かぶバブルとしてではなく、ページの一部（「お問い合わせ」セクション、ヘルプタブ、サイドバーなど）として表示したい場合は、管理パネルで Embed snippet を Inline に切り替え、インラインスニペットをコピーしてください。

以下のようになります：

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

<div> はマウントポイントです。チャットパネルはこの内部でレンダリングされ、その寸法に合わせて表示されます。divのスタイルは自由に変更可能です（固定の高さを指定する、flexコンテナ内に配置する、グリッドセルに配置するなど）。チャットパネルはそれに追従します。

複数のチャットウィジェットを埋め込む場合でも、ページ上に必要な <script> タグは 1つだけです。スクリプトがページ内のすべての <div data-chat-widget="…"> をスキャンし、それぞれにチャットパネルをマウントします。

インライン埋め込みとフローティングの使い分け：

フローティングバブル は、サイト全体で常に利用可能な「ヘルプが必要ですか？」ボタンに適しています。
インライン埋め込み は、サポートページ、ナレッジベースのサイドバー、アプリ内のヘルプタブなど、チャットを特定の場所に配置し、そのページの一部として自然に表示させたい場合に適しています。

インライン埋め込みは、フローティングバブルと同じ設定（ロゴ、開始メッセージ、リード獲得、スターター質問など）を再利用するため、二重に設定する必要はありません。

他人のWebサイトでウィジェットを表示する

管理権限のないWebサイト上でも、コードやサイトへのアクセス権なしでチャットウィジェットを表示できます。見込み客に、彼ら自身のページでアシスタントがどのように見えるかを提示する最も迅速な方法です。

管理パネルを開き、チャネルと埋め込みまでスクロールします。
クライアントデモリンクに、Webサイトのアドレス（例: www.theircompany.com）を入力します。
コピーをクリックしてリンクをコピーするか、開くをクリックして自分で先に確認します。
リンクを見せたい相手に送信します。

リンクを開くと、そのWebサイトが読み込まれ、チャットウィジェットが上に浮かんだ状態で表示されます。インストールした場合と全く同じ見た目になります。リンクを知っている人なら誰でも開くことができ、ログインは不要です。

知っておくべきいくつかの点：

デモからのチャットは本物です。 デモで訪問者が送信したメッセージは受信トレイに届き、エージェントが回答します。また、他の会話と同様にクレジットを消費します。
ページはホワイトラベルです。 相手のWebサイトとあなたのウィジェットのみが表示され、それ以外の要素はありません。
フレーム化できないWebサイトもあります。 一部のサイト（銀行、大手小売店、厳格なセキュリティ設定の背後にあるサイトなど）は、他のページでの表示をブロックしています。その場合でもリンクは機能します。実際のサイトの代わりに中立的なモックブラウザウィンドウが表示され、その上にウィジェットがライブで表示されるため、デモとしての役割は果たせます。
相手のWebサイトは変更されません。 何もインストールされず、何も変更されません。デモはそのリンク内でのみ存在します。

デモリンクは、チャットのルーティング先の設定に関わらず、常にアカウントのデフォルトルーティングを使用します。デモチャットを特定のエージェントに処理させたい場合は、まずそのエージェントをチャットウィジェットのデフォルトとして設定してください。

ページごとに異なるキャンペーンへ送信する

デフォルトでは、ウィジェット経由で送信されるすべてのチャットは、同じキャンペーンまたはエージェントによって処理されます。これをページごとに上書きすることで、価格ページにいる訪問者はセールスキャンペーンと、ヘルプページにいる訪問者はサポートエージェントと会話するように設定できます。これらすべてを1つのチャットウィジェットで行えます。

コードを取得するには2つの方法があります。

キャンペーンまたはエージェントから。 キャンペーンページで、キャンペーンの ⋮ メニューを開き、Webサイトに追加を選択します。エージェントページでは、行にある </> ボタンをクリックするか、エージェントを開いてエントリーポイントタブに移動します。いずれの方法でも、そのキャンペーンまたはエージェントに向けられた、すぐに貼り付け可能なスニペットを取得できます。

エージェントのエントリーポイントタブには、そのエージェントが現在処理しているWebサイトチャットの数を示すWebサイトチャットウィジェットパネルもあります。埋め込みからのチャットは直接エージェントに届くため、それらに対してエントリーポイントルールを作成する必要はありません。ルールがまったくないエージェントでも、その埋め込みチャットに応答します。

Webサイトに追加は、公開済みで受信チャットに対応するように設定されたキャンペーンにのみ表示されます。下書き状態のキャンペーンはまだ訪問者を受け入れられないため、公開するまでこのオプションは非表示になります。エージェントページでは、アクティブなエージェントに対して表示されます。一時停止中のエージェントはチャットを受信しても返信できないため、再度有効にするまでこのオプションは非表示になります。エージェント用に設定するチャネルはありません。エージェントはどのチャネルからでもチャットに応答できます。
ウィジェット設定から。 チャットウィジェットの 設定 → チャネル → 管理 で、チャットのルーティング先を設定し、その下のスニペットをコピーします。ドロップダウンを変更すると、スニペットが書き換わります。

フローティングスニペットは、アドレス内に宛先情報を含んでいます。

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></script>

インラインスニペットは、代わりに <div> 上に宛先情報を含んでいるため、1つのページに異なる場所へつながる複数のチャットを配置できます。

<div data-chat-widget="CONFIG_ID" data-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

エージェントの場合、文言は ?agent=AGENT_ID または data-agent="AGENT_ID" に変わります。

知っておくべきいくつかの点：

IDを手入力するのではなく、コピーボタンを使用してください。IDがアカウント上のキャンペーンやエージェントと一致しない場合、チャットは機能しますが、デフォルトのルーティングにフォールバックされます。
すでに会話中のユーザーは、後で別の宛先を指定したページに移動しても、最初に開始した相手との会話が継続されます。これにより、会話の途中で担当者が変わることを防ぎます。
ページ固有の宛先は、アカウントのデフォルト設定やキーワードトリガーよりも優先されます。

ウィジェットに訪問者が誰であるかを伝える（高度な設定）

メンバーエリア、顧客ポータル、またはユーザーがすでにサインインしているアプリ内にチャットウィジェットを配置する場合、サイト側ではすでにそのユーザーが誰であるかを把握しています。その情報をウィジェットに渡すことで、訪問者がすでに提供済みの詳細情報を再度入力する必要がなくなり、AIがすでに把握している情報を活用できるようになります。

ウィジェットスクリプトの前に、小さな設定ブロックを追加します：

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID"></script>

ページ側で、ログイン中のユーザー情報をサーバーサイドでこれらの値に埋め込む必要があります。

以下の2つのことが行われます：

「始める前に…」フォームがスキップされます。 名前とメールアドレスが提供されると、訪問者はすぐに会話を開始でき、それらの詳細は訪問者が入力したかのように連絡先情報として保存されます。
data 以下のすべてがAIに渡されます。 プラン、注文番号、更新日、クレジット残高、座席数など、そこに記述した内容はすべてAIがその人物について知っている情報の一部となります。そのため、「私のプランはいつ更新されますか？」といった質問に対して、本人確認を求めることなく回答できるようになります。フィールド名は自由なものを使用してください。これらは連絡先の「カスタムフィールド」として表示されます。最大20個の値をメッセージごとに最新の状態で送信するため、会話の途中でプランが変更されても、AIは新しい情報を認識します。

インライン埋め込みの場合は、代わりに <div> に同じ情報を記述することもできます。これは1つのページに複数のチャットを配置する場合に便利です：

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

ページ読み込み後にのみ訪問者が誰であるかが判明する場合（ページを再読み込みせずにサインインが行われるシングルページアプリケーションなど）は、詳細情報が判明した時点で以下を呼び出すと、ウィジェットが自動的に更新されます：

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

知っておくべきいくつかの点：

同じコンピュータで2人の異なる人物がサインインした場合、2人目は1人目のチャットを見るのではなく、新しい会話を開始します。ウィジェットは人物の変更を検知し、自身をリセットします。
これはコンテキスト（文脈）を提供するためのものであり、ログインを目的としたものではありません。会話はこれまで通り個別に保持されるため、id を渡しても他人のチャットを開くことはできません。また、別のデバイスやブラウザを使用している場合は、そこで新しい会話が開始されます。
これはオプションです。通常の公開ページ上のウィジェットではこれらは不要であり、これまで通り動作します。

独自のコード（API）からウィジェット設定を変更する

ウィジェットの管理パネルにあるすべての設定は、REST API を通じて変更することも可能です。これは、多数のウェブサイトを管理している場合や、クライアントのために添付ファイルボタンを自動的にオフにしたい場合に便利です。APIキーと変更したいフィールドのみを指定して、https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID へ PATCH を送信してください。例えば、{"show_upload_button": false} は添付ファイルボタンを非表示にし、{"show_emoji_button": false} は絵文字ピッカーを非表示にし、{"launcher_icon": "chat-dots"} はランチャーアイコンを切り替えます。CONFIG_ID は埋め込みスクリプト内の識別子と同じものです。受け入れ可能なフィールドの全リスト（名前、開始メッセージ、色、ランチャーアイコン、許可されたドメイン、訪問者情報フォーム、プライバシー通知、テーマ、コーナーおよびフォントスタイル）は、APIリファレンスの チャットウィジェット セクションに記載されています。ウェブサイト側では、次回のページ読み込み時に変更が反映されます。

インストール後の動作

Webサイトにスクリプトを追加すると、チャットウィジェットが自動的にWebサイトの隅（デフォルトでは右下）にチャットボタンを作成します。ウィジェットはユーザーがページをスクロールしても固定位置に留まるため、常にアクセス可能です。

訪問者がこのボタンをクリックすると、チャットウィンドウが全画面に展開され、開始メッセージが表示されて会話を開始できます。「訪問者情報の収集」がオンになっている場合、訪問者が入力を行う前に、名前とメールアドレス（および必要に応じて電話番号）を尋ねる小さなフォームが最初に表示されます。

チャットインターフェースは画面サイズに合わせて自動的に調整されるため、デスクトップとモバイルデバイスの両方でシームレスに動作します。

実装のテスト

ウィジェットをサイトに追加した後、正しく動作するかテストしてください。

ブラウザでウェブサイトを開きます。
チャットボタンをクリックしてウィジェットを開きます。
テストメッセージを送信し、返信が届くことを確認します。
別のデバイスやブラウザでも繰り返し、どこでも動作することを確認します。

チャットウィジェットがサイトに表示されない場合は、以下を確認してください。

CONFIG_ID が実際の構成識別子に置き換えられていることを確認してください。
スクリプトタグが閉じタグ </body> の前に配置されていることを確認してください。
コードにタイプミスがないか確認してください。

企業ファイアウォールの内側で利用する場合

一般公開されているページではウィジェットが読み込まれるのに、オフィスネットワーク内のスタッフに対しては読み込まれない場合、そのネットワークがウィジェットの読み込み元ドメインをブロックしている可能性が非常に高いです。ITチームに依頼し、ポート443での通常のHTTPS通信を許可してもらう必要があります。

埋め込みスニペット内のドメイン — 「管理」パネルからコピーした <script src="..."> 行のアドレス。
api.youraiconnector.com — ウィジェットはここにもメッセージを送信します。

これ以外に開放が必要なものはありません。追加のポートやインバウンドルールは不要です。それでもウィジェットが表示されない場合は、ブラウザの開発者コンソールを開いて報告内容をお送りください。ブロックされたリクエストには拒否されたドメイン名が表示されており、それが解決の鍵となることがほとんどです。

チャットウィジェット #

ウェブサイトチャットウィジェット統合ガイド #