メインコンテンツまでスキップ

リードキャプチャウィジェット

概要​

リードキャプチャウィジェットは、任意のウェブサイトに表示される小さなフローティングボタンです。訪問者がクリックすると、名前、メール、電話番号、メッセージを入力するフォームがポップアップします。フォームを送信すると、LeadHub に新しいリードが自動的に作成され、設定したオートメーションが即座に実行されます。

JavaScript を 1 行追加するだけで、ウェブサイトのコードを変更する必要はありません。

ウィジェットの作成​

サイドバーのツール → リードウィジェットに移動します（"ツール"というナビゲーショングループの下に表示される場合があります）。

  1. 新しいリードキャプチャウィジェットをクリックします。
  2. 設定を入力します（下記参照）。
  3. 保存をクリックします。
  4. 作成したウィジェットの埋め込みコードを取得をクリックします。
  5. JavaScript スニペットをコピーしてウェブサイトに追加します。

設定オプション​

ウィジェットの識別情報​

フィールド機能
名前内部ラベル — チームにのみ表示され、ウェブサイト訪問者には見えません
見出しポップアップフォーム内に表示されるメインタイトル（例：「お問い合わせ」）
サブ見出し見出しの下に表示されるオプションの小さなテキスト
ボタンテキスト送信ボタンのテキスト（例：「メッセージを送る」）
成功メッセージフォーム送信後に訪問者が見るメッセージ（例：「ありがとうございます！すぐにご連絡します。」）

外観​

フィールド機能
プライマリカラーフローティングボタンと送信ボタンの色
テキストカラーボタン上のテキストの色（通常は白）
位置画面上のボタン表示位置 — 右下、左下、右上、または左上

フォームフィールド​

トグル機能
電話フィールドを表示フォームに電話番号の入力欄を表示
電話を必須にする電話フィールドを必須にする
会社フィールドを表示会社名の入力欄を表示
メッセージフィールドを表示メッセージのテキストエリアを表示
メッセージを必須にするメッセージフィールドを必須にする

名前とメールは常に表示され、常に必須です。

リードルーティング​

このウィジェットから送信されたリードを特定のパイプラインとステージに自動的にルーティングできます：

  • リードをパイプラインにルーティング — 新しいウィジェットリードがどのパイプラインに入るかを選択
  • 初期ステージ — そのパイプライン内のどのステージから開始するかを選択

空白のままにすると、パイプラインの割り当てなしでリードが作成されます。

アクティブ/非アクティブ​

ウィジェットはアクティブトグルを使用すると、削除せずにウィジェットをオン/オフにできます。非アクティブの場合、埋め込みコードを使用しているウェブサイトにフローティングボタンは表示されません。

埋め込みコードの取得​

ウィジェットを保存したら、リストで見つけて埋め込みコードを取得をクリックします。

次のようなスニペットが表示されます：

<script src="https://yourdomain.com/widget/abc123-uuid/loader.js" async></script>

この行全体をコピーします。ウェブサイトに追加する必要があるのはこれだけです。

ウェブサイトへのウィジェット追加​

WordPress​

  1. "Header Footer Code Manager"や "Insert Headers and Footers" などのプラグインをインストール — WordPress プラグインディレクトリで検索してください。
  2. script タグを "Footer" エリアに貼り付けます。
  3. 保存してウェブサイトを訪問 — フローティングボタンが表示されます。

または、WordPress テーマのフッターウィジェットに "カスタム HTML" エリアがある場合は、スクリプトをそこに貼り付けます。

Shopify​

  1. Shopify 管理画面でオンラインストア → テーマに移動します。
  2. アクティブなテーマのコードを編集をクリックします。
  3. theme.liquid ファイルを開きます。
  4. </body> タグの直前に script タグを貼り付けます。
  5. 保存をクリックします。

Wix​

  1. Wix エディターで + ボタンをクリックして要素を追加します。
  2. 埋め込み → カスタムコードを選択します。
  3. コードボックスに script タグを貼り付けます。
  4. Body セクションで読み込まれるよう設定します。
  5. 適用して公開します。

Squarespace​

  1. 設定 → 詳細 → コードインジェクションに移動します。
  2. Footer ボックスに script タグを貼り付けます。
  3. 保存します。ウィジェットはすべてのページに表示されます。

カスタム HTML ウェブサイト​

HTML ファイルの閉じ </body> タグの前の任意の場所に script タグを貼り付けます：

    <script src="https://yourdomain.com/widget/abc123/loader.js" async></script>
</body>

送信の流れ​

  1. 訪問者がウェブサイトを訪れ、フローティングボタンを見ます。
  2. クリックして詳細を入力し、送信をクリックします。
  3. LeadHub が送信を即座に受信します。
  4. 訪問者の情報でワークスペースに新しいリードが作成されます。
  5. 「新しいリードを受信」でトリガーされるオートメーションが即座に実行されます。
  6. 訪問者に成功メッセージが表示されます。

すべてリアルタイムで行われます。手動で確認する必要はなく、新しいリードはリードリストに自動的に表示されます。

ウィジェットの分析​

リードウィジェットリストページで、各ウィジェットは以下を表示します：

  • キャプチャしたリード数 — このウィジェットを通じて送信されたリードの総数

どのウィジェットが機能しているかどうかを一目で確認できます。

ウィジェットの外観カスタマイズ​

すべての外観設定はウィジェット設定フォームにあります。以下を変更できます：

  • ウェブサイトのブランドに合わせた色
  • 既存のチャットやクッキーボタンと重ならないようボタンの位置
  • ウェブサイトのトーンに合わせた見出しとサブ見出し

異なる設定で複数のウィジェットを作成できます — たとえば、ホームページ用に「無料見積りを取得」、ブログ用に「更新情報を購読」など。

セキュリティ​

CORS（Cross-Origin Resource Sharing）​

デフォルトでは、ウィジェットはどのウェブサイトからの送信も受け付けます。特定のウィジェットで送信できるドメインを制限したい場合は、ウィジェット設定の許可されたドメインフィールドを設定します。ドメイン（例：acmecorp.com）を入力すると、そのドメインからの送信のみが受け付けられます。

レート制限​

LeadHub は、一人の訪問者が短時間内に送信できる回数を自動的に制限します。これにより、自動化されたボットがジャンクエントリでリードリストを埋め尽くすのを防ぎます。