DM Champ Docs

チャットウィジェット

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

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

Prefer to see it? Click through the whole flow:

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

アクセス方法:

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

チャットウィジェットは、Channels ページに独自のカードとして表示されます。「Connect」をクリックして作成し、「Manage」をクリックしてその他の設定を行います。このカードは、ここに表示されているリストよりも下の方、Instagram（個人用）、LINE、メール、その他のチャネルよりも下に配置されています。

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

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

カスタマイズ可能な項目

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

外観

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

Manage パネルの Appearance（外観）セクションです。上部のテーマカードをクリックすると、ウィジェット全体のデザインが一括で変更されます。ここでは Glass が選択されており、右側のプレビューには、フローティングヘッダーとメッセージボックスを備えたすりガラス調のパネルが表示されています。ランチャーアイコンの行には、ウィジェット独自のカラーで組み込みアイコンが表示され、各カラー選択ツールにはウィジェットのどの部分に色が適用されるかが示されています。プレビューは編集内容をリアルタイムで反映し、保存することでサイトに公開されます。

動作

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

Behavior（動作）セクションです。サウンドと通知の許可を求める設定はシンプルなトグルスイッチです。プロアクティブポップアップバブルは、オンにすると独自のメッセージ、ボタン、遅延設定フィールドが展開されます。

言語

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

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

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

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

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

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

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

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

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

Manage パネルの Lead Capture & Privacy セクション。訪問者情報の収集、フォームタイトル、フォームサブタイトル、電話番号の収集、プライバシーポリシーへの同意を必須にするの各フィールドが表示されています

Lead Capture & Privacy（リード獲得とプライバシー）セクションです。「訪問者情報の収集」をオンにすると、会話が始まる前に訪問者に対して小さなフォームが表示されます（訪問者側の表示については、このページの下部を参照してください）。

チャネルと埋め込み

  • 添付ボタン: 訪問者がチャットで画像やファイルを送信できるようにします。
  • 絵文字ピッカー: メッセージボックスの横に絵文字ピッカーを追加します。
  • チャネルリンク: 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エージェントの役割であり、ナレッジベースに基づいて回答します。質問を促したい場合は、「外観」設定にあるスタータークエスチョンを使用してください。
管理パネルのアクションボタンセクション。3つのボタンが追加されています：Call usとラベル付けされた「電話」、Find usとラベル付けされた「道順」、そしてWhatsApp

3つのアクションボタンを設定している様子。各行はアクション、ボタン上のテキスト、および遷移先を表しています。「ボタンを追加」で最大6つまで追加できます。

Webサイト上で開かれたチャットウィジェット。上部に「Call us」、「Find us」、「WhatsApp」という3つのアクションボタンが並んでいます

訪問者側の表示です。ボタンは会話の上に配置され、チャット中も常に表示されるため、訪問者はいつでもタップできます。

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

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

  • カスタムCSSやスタイルシートは使用できません。 スタイル設定はテーマ、コーナー、フォント、カラーピッカーで提供されるものに限られます。独自のCSSをウィジェットに注入することはできず、ページ上のルールもウィジェット内部には適用されません。
  • メッセージボックスのカスタムプレースホルダーテキストは使用できません。
  • チャット内での動画埋め込みはできません。
  • 自動非表示タイマーはありません。 招待バブルは20秒後に自動的に消えますが、この数値は変更できません。開いたチャットウィンドウが自動的に閉じることはありません。バブルがページコンテンツの上に重なる場合は、位置のオフセットを使用してウィジェットを移動するか、バブルをオフにしてランチャーボタンのみを残してください。

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

管理パネルの「チャネルと埋め込み」セクション。ドメインのホワイトリスト、チャットのルーティング先、埋め込みスニペットのコードボックス、Webサイトアドレスが入力されたクライアントデモリンクフィールドとその下に生成されたリンク、およびチャットウィジェット削除の危険な操作が表示されています

「チャネルと埋め込み」セクション。コピー可能なインストール用スニペット、その下のクライアントデモリンク、および最下部のチャットウィジェット削除アクションが表示されています。ここでは、クライアントのWebサイトがデモフィールドに入力され、その下に共有可能なリンクが表示されています。ここに表示されているスニペットとデモリンクは、このアカウント固有のものです。これらではなく、ご自身の管理パネルからコピーしてください。

ボットやクレジットの浪費を防ぐ

AIの返信にはすべてクレジットが消費されるため、スクリプト（または暇な人物）がウェブサイト上で次々とチャットを開始することは、公開ウィジェットが防御しなければならない唯一の脅威です。ウィジェットはこれのほとんどを自動的に処理しますが、管理パネルにある2つの設定により、サイトに合わせて制限を強化できます。

  • ドメインホワイトリスト: リストに登録したウェブサイトでのみウィジェットが表示されます。埋め込みコードを他のサイトにコピーしても、何も表示されません。
  • ブロックされた国: ブロックした国にネットワークの場所がある訪問者にはウィジェットが表示されず、チャットを開始しようとしても拒否されます。場所は訪問者の接続元から判断されます。VPNを使用している場合はVPNの国として表示され、場所を特定できない訪問者はブロックされずに許可されます。アプリ内のプレビューは、現在地をブロックしている場合でも引き続き機能します。
  • 接続ごとの新規会話数: 1つの接続（実際には1つの家庭やオフィスのIPアドレス）につき、ウィジェットで1日あたり20件の新規会話を開始できます。既存のチャットを継続しているリピーターはカウントされず、完全に新しい会話のみが対象です。そのため、AIの返信を不正に取得しようと新しいチャットを繰り返すスクリプトは20件で停止しますが、実際の訪問者が影響を受けることはありません。サイトの接続を多くの人が共有している場合（キャンパスやコールセンターなど）は、REST APIを使用して max_new_chats_per_ip_daily で数値を引き上げてください。0 はチェックを無効にします。
  • 組み込みの制限: さらに、各ブラウザセッションには1分間および1日あたりの送信メッセージ数に上限が設けられています。また、チャットに応答するエージェントは、応答制限で設定された 1チャットあたりの最大AIメッセージ数 に達すると、訪問者への返信を停止します。

これらはデバイスや個人を特定するものではありません。ウィジェットは、訪問者がチャットを選択するまでブラウザに何も保存せず（上記参照）、フィンガープリントも行いません。

インストール手順

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

  1. テキストエディタでウェブサイトのHTMLファイルを開きます。
  2. 閉じタグ </body> を探します。通常はファイルの最後の方にあります。
  3. ページの他の要素が先に読み込まれるよう、このコード行を </body> タグの直前に貼り付けます。
<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>
  1. CONFIG_ID を、管理パネルの Channels & Embed セクションに表示されている固有の設定識別子に置き換えます。この識別子はアカウント固有のもので、ウィジェットとメッセージングシステムを接続します。

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

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.dmchamp.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.dmchamp.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.dmchamp.com/v1/chat-widget/embed.js" async></script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ウィジェット設定から。 チャットウィジェットの 設定 → チャネル → 管理 で、チャットのルーティング先を設定し、その下のスニペットをコピーします。ドロップダウンを変更すると、スニペットが書き換わります。

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

<script src="https://api.dmchamp.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.dmchamp.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.dmchamp.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.dmchamp.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を渡しても他人のチャットを開くことはできません。また、別のデバイスやブラウザを使用しているユーザーは、そこで新しい会話を開始します。デバイス間で会話を引き継ぐには、次に説明するようにidに署名してください。
  • これはオプションです。一般的な公開ページのウィジェットではこれらは不要であり、これまで通り動作します。

どのデバイスでも同じ会話を再開する（サインイン済み訪問者ID）

顧客がアカウントを持っている場合、チャットを追跡させることができます。スマートフォンでサインインし、ノートパソコンで継続しても、受信トレイには同じ連絡先との同じ会話として表示され、AIもこれまでのやり取りをすべて把握しています。そのためには、DM Champがその訪問者が本当にページで指定された人物であるという証明を必要とします。そうでないと、誰でもブラウザに顧客番号を入力してその顧客のチャットを読み取れてしまう可能性があります。この証明は、サーバー上で計算する署名です。

  1. ウィジェットの Manage パネルで、Channels & Embed の下にある Signed-in visitors を探し、Generate secret をクリックします。IDシークレットをコピーしてください。これはサーバー内のみで保持し、ページ自体には決して記述しないでください。
チャットウィジェットのManageパネルにあるSigned-in visitors行。マスクされたIDシークレットと、表示、コピー、再生成ボタンが表示されており、その下にはidとhashフィールドを含む設定スニペットがある

Channels & Embedの下にあるSigned-in visitors行。シークレットは「表示」をクリックするまで隠されています。下のスニペットは、idとその署名をページ上のどこに配置するかを示しています。

  1. サーバーがサインイン済みの顧客向けにページをレンダリングする際、その顧客のIDのHMAC-SHA256をシークレットを使用して計算し、小文字の16進文字列として出力します：
// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()
  1. 設定ブロックにIDとハッシュを配置します。すでに渡している名前とメールアドレスの隣に追加してください：
<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

インライン埋め込みは<div>上のdata-visitor-hashと同じ値を取り、window.chatWidget.setVisitor({ visitor: { id, hash } })はページをリロードせずにユーザーをサインインさせるアプリで機能します。

署名が確認された後の動作：

  • 顧客のチャットはブラウザ単位ではなくアカウント単位で保存されるため、サインインしているすべてのデバイスとブラウザで同じ会話となり、受信トレイには1つの連絡先として表示されます。
  • 新しいデバイスで以前のメッセージが読み込まれ、AIは中断したところから会話を継続します。
  • 署名が正しくない場合、ウィジェットは以前と同様に通常のブラウザ単位のチャットとして静かに動作し、開発者が確認できるようにブラウザコンソールに理由を出力します。訪問者にエラーが表示されることはありません。
  • IDは送信された通りに正確に比較されるため、idとして渡す値と同じ値に署名し、同じ人物に対してはどこでも同じIDを使用してください。

知っておくべき2つのこと：

  • 管理パネルの再生成を行うと、新しいシークレットが発行されます。古いシークレットで署名しているページは、サーバーが新しいシークレットを使用するまで、通常のブラウザ単位のチャットにフォールバックします。既存の会話は保持されます。それらはシークレットではなく、顧客のIDに紐付いているためです。
  • 匿名訪問者としてサインインする前に誰かが行った会話は、別のチャットとして残ります。アカウントベースの会話は、サインイン中に送信された最初のメッセージから始まります。

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

ウィジェットの 管理 パネルにあるすべての設定は、REST API を通じて変更することも可能です。これは、多数のウェブサイトを管理している場合や、クライアントのために添付ファイルボタンを自動的にオフにしたい場合に便利です。APIキーと変更したいフィールドのみを指定して、https://api.dmchamp.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サイトの隅（デフォルトでは右下）にチャットボタンを作成します。ウィジェットはユーザーがページをスクロールしても固定位置に留まるため、常にアクセス可能です。

訪問者がクリックする前の、ライブ Web サイトの右下隅にあるフローティングチャットバブル

これは、訪問者がチャットを開く前にサイト上で目にするものです。Appearance 設定に従って配置されたフローティングボタンのみが表示されます。

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

開かれたチャットパネル。背景に開始メッセージ、その手前に「Before we start」リード獲得フォーム（名、メール、電話番号）が表示されています

開かれたチャットパネルです。ここでは「訪問者情報の収集」がオンになっているため、会話の上に「Before we start...」フォームが表示されます。訪問者は一度入力すれば、その後は通常通りチャットできます。

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

実装のテスト

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

  1. ブラウザでウェブサイトを開きます。
  2. チャットボタンをクリックしてウィジェットを開きます。
  3. テストメッセージを送信し、返信が届くことを確認します。
  4. 別のデバイスやブラウザでも繰り返し、どこでも動作することを確認します。
訪問者がテストメッセージを送信した後のチャットパネル。開始メッセージの下に送信メッセージのバブルが表示されています

メッセージを送信すると、スレッド内に送信済みバブルとして表示されます。AI またはチームからの返信も同じウィンドウに表示されます。

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

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

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

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

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

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