メインコンテンツへスキップ
HubSpot のランディングページでフォーム送信した見込み顧客を、そのまま Turnint AI のエージェント体験へ誘導できます。フォームで入力されたメールアドレスなどの情報を URL の query parameter として渡すことで、エージェント側でユーザーを自動的に識別します。
本ページでは、HubSpot フォームで入力されたメールアドレスと会社名を Turnint AI に橋渡しする例を用いて説明します。実際に渡すフィールドは、ゲートの設定に応じて自由にカスタマイズできます。

​
フロー

  1. 見込み顧客が HubSpot ランディングページでフォームを送信する
  2. 送信後、メールアドレスなどを query parameter に含めた Turnint AI の URL にリダイレクトされる
  3. ゲートのフォームフィールドと一致するパラメータがあれば、入力済みとして扱われゲートをスキップできる

​
仕組み

Turnint AI のポータルサイト（xxx.turnint.site）は、URL に含まれる query parameter を自動的にユーザーコンテキストとして取り込みます。追加の設定やコードは不要です。 例えば、以下の URL でエージェントページにアクセスした場合： 
https://xxx.turnint.site/decks/xxx?email=user%40example.com&company=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BEABC&autoconfirm=true
email と company がユーザーコンテキストに自動で設定されます。autoconfirm=true が指定されている場合、すべての必須フィールドが有効であればゲートの入力画面がスキップされます。
query parameter のキーは、ダッシュボードで設定したゲートのフォームフィールドのキーと一致させてください。例えば、ゲートに email フィールドがあれば、query parameter も email にします。

​
HubSpot 側の設定

HubSpot のフォーム送信後にユーザー情報付きでリダイレクトする方法は、フォームの設置方法によって異なります。 HubSpot フォームの埋め込み方法は複数あり、それぞれリダイレクト時のカスタマイズ方法が異なります。フォームが設置されたページのブラウザコンソールで以下のコードを実行すると、どの方式が使われているか判別できます。 
// Chrome のコンソールで貼り付けがブロックされた場合は、先に「allow pasting」と入力してください
if (document.querySelector('.hs-form-frame')) {
  console.log('div + data 属性（V3）');
} else if (document.querySelector('iframe[src*="hsforms"]')) {
  console.log('iframe');
} else if (document.querySelector('.hbspt-form') || typeof hbspt !== 'undefined') {
  console.log('hbspt.forms.create()');
} else {
  console.log('HubSpot フォームが見つかりません');
}
埋め込み方法コールバック対応備考
hbspt.forms.create()✅onFormSubmitted コールバックで制御可能
<div> + data 属性（V3）⚠️コールバックなし。別途 JS でフォーム送信イベントをフックする必要あり
iframe❌same-origin policy によりフォーム内の値にアクセス不可
iframe 埋め込みの場合、フォームの入力値を取得できないため、本ページで紹介する query parameter 方式は利用できません。hbspt.forms.create() または <div> + data 属性方式をご利用ください。

​
hbspt.forms.create() の場合

hbspt.forms.create で埋め込んでいる場合は、onFormSubmitted コールバックでリダイレクトを制御できます。 
hbspt.forms.create({
  portalId: 'YOUR_PORTAL_ID',
  formId: 'YOUR_FORM_ID',
  // ↓ の redirectUrl が設定されている場合は、コメントアウトし、 onFormSubmitted コールバックを追加してください
  // redirectUrl: 'xxxxx',
  onFormSubmitted: ($form) => {
    // メールアドレスと会社情報を query parameter に紐づけて、redirect するコード
    const fields = ["email", "company"];
    const params = fields
      .map((name) => {
        const value = $form.find(`input[name="${name}"]`).val();
        return value ? `${name}=${encodeURIComponent(value)}` : null;
      })
      .filter(Boolean);
    window.location = `https://xxx.turnint.site/decks/xxx?${params.join("&")}&autoconfirm=true`;
  }
});
redirectUrl オプションを設定している場合は削除してください。onFormSubmitted と redirectUrl の両方が設定されていると、redirectUrl が優先されます。

​
<div> + data 属性（V3）の場合

V3 フォームエディタでは、<div> に data 属性を指定する形式で埋め込みます。 
<div class="hs-form-frame" data-region="na1" data-portal-id="YOUR_PORTAL_ID" data-form-id="YOUR_FORM_ID"></div>
この方式には onFormSubmitted のようなコールバックがないため、ページ側の JavaScript でフォーム送信イベントを検知してリダイレクトする必要があります。 
// HubSpot V3 フォームの送信を検知する
window.addEventListener("message", (event) => {
  if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
    const { submissionValues } = event.data.data;
    const fields = ["email", "company"];
    const params = fields
      .map((name) => {
        const value = submissionValues[name];
        return value ? `${name}=${encodeURIComponent(value)}` : null;
      })
      .filter(Boolean);
    window.location = `https://xxx.turnint.site/decks/xxx?${params.join("&")}&autoconfirm=true`;
  }
});

​
HubSpot CMS ランディングページの場合

HubSpot CMS のランディングページでは、フォームの実装がテンプレートやテーマによって異なります。以下のいずれかの方法で対応できます。
  • フッタースクリプト — ランディングページの設定からフッターにカスタム JavaScript を追加し、フォーム送信をフックしてリダイレクトする
  • テンプレートのカスタマイズ — HubSpot CMS のテンプレートを編集、または複製して、フォーム送信後の挙動を変更する
具体的な手順は HubSpot の契約プランやテンプレートの構成に依存するため、HubSpot の管理者に確認してください。

​
Turnint AI 側の設定

​
ゲートの設定

ダッシュボードでエージェントのゲートを設定し、query parameter で渡すフィールドを含めてください。query parameter のキーとゲートのフォームフィールドのキーが一致している必要があります。

​
例: 資料請求フォームからの導入

HubSpot フォームで入力された「メールアドレス」「会社名」を Turnint AI と紐づける場合、以下のようにゲートのフィールドを設定します。
HubSpot フォームの項目query parameterゲートのフィールドキーフィールドタイプ
メールアドレスemailemailメールアドレス
会社名companycompany会社名
この設定により、HubSpot フォームで入力された情報がそのまま Turnint AI のユーザーコンテキストに反映されます。リダイレクト URL は以下のようになります。 
https://xxx.turnint.site/decks/xxx?email=user%40example.com&company=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BEABC&autoconfirm=true
# email = user@example.com, company = 株式会社ABC, autoconfirm = true
query parameter で渡された値がゲートのフィールドバリデーションを通過すると、そのフィールドは入力済みとして扱われます。

​
autoconfirm パラメータ

autoconfirm=true を query parameter に追加すると、すべての必須フィールドがバリデーションを通過した場合に、ゲートの入力画面を自動的にスキップしてエージェントとのセッションを開始します。
パラメータ値説明
autoconfirmtrueゲートの自動スキップを有効にする
autoconfirm を指定しない場合、query parameter で事前入力されたフォームが表示され、ユーザーが手動で確認ボタンを押す必要があります。
HubSpot フォームからのリダイレクトでは、フォーム入力値がすでに検証済みのため、autoconfirm=true を付与してゲートをスキップすることを推奨します。
HubSpot フォームのフィールド名（input の name 属性）と、Turnint AI のゲートのフィールドキーを一致させてください。HubSpot のデフォルトフィールド名は email, company, firstname, lastname, phone などです。

​
リダイレクト先

リダイレクト先には、Turnint AI のポータルサイトのエージェントページ URL を使用してください。 
https://xxx.turnint.site/decks/xxx
ポータルサイトの URL はダッシュボードのエージェント設定から確認できます。

​
関連ドキュメント