プラットフォーム

JavaScript API

meeton.js が実行されると window.Meeton が使えるようになります。自前のボタンからチャット・カレンダー・資料を開く、フォームに隠し値を渡す、ローダーをデバッグする、といった用途に使います。ほとんどのサイトには不要ですが、必要なサイトのためにここにあります。

設定

設定は、スニペットがローダーより前にセットするグローバル変数だけです。キーは1つです。

window.DynaMeetConfig = {
  teamId: "YOUR_TEAM_ID"   // 必須 · 小文字の UUID · 設定 → セットアップ からコピー
};

このオブジェクトから読まれるのはこれだけです。言語は訪問者のブラウザから決まり、各ページに何を表示するかはダッシュボードの設定が決めます。インラインチャット埋め込みは埋め込みモードで動きますが、それは DynaMeet 自身の iframe ページがセットするもので、御社のスニペットで指定するものではありません。埋め込みモードを参照。

準備できたか: API を安全に呼ぶ

スニペットは meeton.js を async defer で読み込むため、ダウンロードが終わった時点で実行され、御社のインラインスクリプトより後になることがあります。API を呼ぶボタンを作るなら、そこから2つのことが言えます。

1. window.Meeton はまだ存在しないかもしれない。スクリプトが評価された瞬間に作られます。それより前に window.Meeton.openChat() を呼ぶと TypeError になります。必ずガードしてください: window.Meeton && window.Meeton.openChat()。
2. 起動前の呼び出しはキューされず、捨てられる。スクリプトの評価後も、ローダーはチームの設定を取得する必要があります。それが終わるまで openChat()、openCalendar()、openLibrary()、openInquiryPanel() はデバッグログに1行書いて何もしません。後で再実行されることもありません。唯一の例外は setHiddenValues() で、いつ呼んでも動きます。

準備完了のイベントやコールバックはありません。訪問者がクリックするボタンなら、上のガードで十分です。人がページを読んでクリックする頃には、ウィジェットはとうに起動しています。ページ読み込み時に動くコードは、代わりにウィジェットを待ってください。

function whenMeetonReady(fn, tries) {
  tries = tries || 0;
  if (window.Meeton && window.Meeton.engagedBooted) return fn(window.Meeton);
  if (tries > 100) return;                       // 約10秒で静かに諦める（ブロック、ボット、未登録ドメインなど）
  setTimeout(function () { whenMeetonReady(fn, tries + 1); }, 100);
}

whenMeetonReady(function (Meeton) {
  Meeton.openCalendar({ source: "thankYouPage" });
});

Meeton.engagedBooted は設定と訪問者データの読み込みが終わると true になり、そこからすべてのメソッドが動きます。数秒で諦めてください。ボット、HTTP のページ、許可リストにないドメイン、広告ブロッカーのあるブラウザではウィジェットは起動せず、ページはタグがないときと同じように動くべきです。

window.Meeton のメソッド

自前のボタン、リンク、アナリティクスのトリガーと組み合わせます。「起動前は何もしない」は、上で説明したとおり呼び出しが捨てられることを意味します。

Meeton.openChat()

ランチャーをクリックしたのと同じようにチャットウィンドウを開きます。起動前、ルールでランチャーが隠れているページ、チームでチャットがオフのとき、そして常に開いている埋め込みモードでは何もしません。チャットフレームがまだ読み込み中なら、呼び出しは保持され、フレームの準備ができた時点で届きます。

<button onclick="window.Meeton && window.Meeton.openChat()">何でも聞いてください</button>

Meeton.openCalendar(options?)

ウィジェットのオーバーレイで予約カレンダーを開きます。オプションなしなら既定のカレンダーです。起動前は何もしません。

openCalendar(options?: {
  calendarId?: string;                                   // 特定の予約カレンダー: ID または短いスラッグ
  source?: "emailLink" | "otherLink" | "thankYouPage";   // 予約の帰属 · 既定は "otherLink"
}): void;

フォームのサンクスページで source: "thankYouPage" を使うと、コンバージョンした瞬間に枠を提案できます。ページに id="dynameet-calendar" の要素があれば、予約フォームはポップアップではなくその要素の中に描画されます。高さを指定しないと 425 px になります。コードなしでも同じことができます: タグを設置した任意のページへのリンクに ?calendarId=… を付けると到着時にそのカレンダーが開き、メールや QR コードのカレンダーリンクはこの仕組みです。

Meeton.openLibrary(options?)

Library ビューアを開きます。特定の資料とページを指定できます。起動前は何もしません。openDownloadCenter() は同じメソッドの旧名で、今も動きます。

openLibrary(options?: {
  docId?: string;        // この資料を直接開く
  pageNumber?: number;   // このページで
  src?: string;          // 自由記述の帰属。例 "pricing-cta"。閲覧イベントに記録される
}): void;

Meeton.openInquiryPanel(marketingOfferId)

1つのマーケティングオファーの問い合わせパネルを開きます。ページ上の静的なリンクで広告クリックと同じことができます。ID は必須で、起動前は何もしません。

Meeton.setHiddenValues(values)

リードフォームにはページからとして設定した隠しフィールドを含められます。このメソッドがその値を、フィールドのプロパティ名（CRM 連携が使うのと同じ名前）をキーにして渡します。現在の値にマージされるので、値が変わるたびに呼んでください。null を渡すとキーが削除されます。起動前に呼んでも安全で、各フレームが開くときに値が渡されます。

// ローダーが動く前に値を宣言する…
window.meetonHiddenValues = { plan: "enterprise", campaign: "spring-webinar" };

// …またはその後いつでも更新する。
window.Meeton.setHiddenValues({ plan: "pro" });

値は開いているすべてのフレームに同時に届きます: チャット、広告やマーケティングのポップアップ、カレンダーフォーム、Library。フォームのページからフィールドにないキーは無視され、選択肢のあるフィールドの値は選択肢のどれかに完全一致する必要があります。window.meetonHiddenValues は起動時に一度だけ読まれ、その後のオブジェクトの編集は無視されるので、変わる値には setHiddenValues() を使ってください。

Meeton.recordLead(fields) 非推奨

古い連携を壊さないために残していますが、今は何もしません。フォームウォッチャーが御社のフォームから訪問者を自動的に識別するので、この呼び出しにやることは残っていません。そのままでも削除しても構いません。

ライフサイクル: boot()、bootEngagedVisitor()、tearDown()

ローダーはページ読み込み時に自分で起動し、2秒後（再訪者なら即座）に bootEngagedVisitor() も自分で呼びます。tearDown() はチャットフレームを外し、ライブ接続を閉じ、フォームとナビゲーションの監視を解除します。テストのためのものです。ページを完全に元の状態には戻さず、その後の boot() は再初期化の手段としてサポートされていません。通常はどれも呼びません。

読み取れるフィールドが2つあります: Meeton.booted（起動シーケンスが始まった）と Meeton.engagedBooted（設定と訪問者データが読み込まれ、API が完全に使える）。

タグがすでに理解するフォーム

御社のフォームから訪問者を識別するのに API は不要です。ローダーはページ上の既存フォームを監視し、認識できる連絡先フィールドを探します。値は訪問者がフィールドを離れたとき、または送信時に即座にステージングされ、送信が確認されてはじめてコンタクトになります: HubSpot フォームの成功メッセージやリダイレクト、登録したサンクスページ、御社の CRM での受信。認識されないフィールドは無視され、パスワードや決済フィールドは決して読まれず、訪問者が既知になると監視は止まります。

Meeton Email からのリンク

Meeton が送るメールのリンクには、クエリ文字列にコンタクト参照 dmContactId が付きます。訪問者が到着すると、ローダーはそのクリックと続く訪問を結びつけるので、チャットは誰と話しているかをすでに知っています。御社側で必要なことはありません。到着時に URL を書き換える場合はこのパラメータを残してください。

ローダーが読む URL パラメータ

calendarId、downloadCenter、inquiryPanelOfferId が複数ある場合は最初の1つだけが動きます。

シングルページアプリ

ローダーはブラウザの history.pushState と replaceState をラップし、popstate を監視するので、React、Vue、Next.js、Nuxt でのルート変更はページビューとして数えられます: ページルールが再適用され、広告が再び待機し、チャットに新しいページが伝わり、サンクスページが確認されます。スニペットは共有シェルに一度だけ設置し、ナビゲーションのたびに挿入し直さないでください。2つ目のコピーはウィジェットを2つ作ります。

デバッグ

ローダーは debug ライブラリで dynameet:* 名前空間にログを出します。ブラウザのコンソールで有効にしてリロードし、コンソールが詳細メッセージを表示する設定になっていることを確認してください。

localStorage.debug = "dynameet:*";   // その後ページをリロード
// 正常な起動は、この順に:
//   Meeton initialized.
//   Document state is 'interactive'. Booting immediately.
//   Booting Meeton (Execution started)...
//   Meeton booting (basic) with teamId=… visitorId=…
//   Meeton basic config loaded: {…}
//   New visitor, will load messages after 2 seconds.
//   Engaged visitor data loaded: {…}

localStorage.removeItem("debug");    // 元に戻す

トラブルシューティング

よくある質問