予約ページをWebサイトに埋め込む方法｜インライン・ポップアップ・リンクの違い

導入

予約ページの埋め込みとは、自社サイトやLP、WordPressなどに日程調整用の予約導線を設置することです。訪問者が問い合わせフォームへ進み、メールで候補日を往復する前に、空いている日時を選べる状態をつくれます。

この記事を読めば、予約ページ埋め込みの3方式を比較し、自社サイトに合う表示形式を選び、Jicooの埋め込みコードを設置・検証する手順まで進められます。

営業やマーケティングの現場では、せっかく商談意欲の高い見込み顧客がLPへ来ても、問い合わせ後の返信待ちで温度感が下がることがあります。担当者側も「候補日はいつにしますか」「会議URLを送ります」といった連絡が積み重なり、コア業務に集中しにくくなります。

予約ボタンや予約カレンダーを適切な場所に設置することは、単なるWebサイトの改修ではありません。顧客が話したいと思った瞬間と、チームが商談を受け取る仕組みをつなぐ運用設計です。

予約ページの埋め込みとは

予約ページの埋め込みは、日程調整サービスで作成した予約ページを、自社のホームページ、サービスページ、広告LPなどに表示・接続する方法です。

訪問者は、空き枠を確認して都合のよい日時を選びます。設定内容によっては、予約確定後に担当者のカレンダーへ予定を登録し、Web会議URLを発行する運用も可能です。

予約フォームをホームページに埋め込む方法は、大きく次の4つに分けられます。

• ページ内に予約カレンダーを表示するインライン
• 予約ボタンから予約画面を開くポップアップ
• テキストリンクから予約画面を開くポップアップテキスト
• 別ページの予約URLへ移動する通常リンク

「予約ページ HTML」「予約ウィジェット」と検索している場合も、実装の考え方は同じです。ただし、予約サービスごとに発行されるコードの種類は異なります。

Jicooでは、管理画面から取得した専用の埋め込みコードをWebサイトに設置できます。公式ヘルプでは、ページ内に直接表示するインラインと、ボタンまたはテキストから開くポップアップが案内されています。

なお、任意のiframeタグへ予約ページURLを直接指定できるかは、Jicooの公式情報に記載の揺れがあるため要確認です。実装時は、予約ページのURLを独自にiframeへ入れるのではなく、Jicooが発行する埋め込みコードを使うのが安全です。

日程調整の基本設計から確認したい場合は、日程調整に関する記事一覧も参考になります。

主な機能とできること

予約ページ埋め込みでできることは、「予約フォームを表示する」だけではありません。訪問者にとっての予約体験と、社内の受け皿を同時に整えることが重要です。

1. 予約可能な日時をサイト上で案内する

インライン形式では、訪問者がページを開いた時点で予約カレンダーを確認できます。

たとえば、デモ予約専用LPであれば、ファーストビューでサービス価値を伝え、導入事例や料金の説明を読んだ直後に予約カレンダーを置く設計が考えられます。

「お問い合わせはこちら」だけでは、訪問者は次に何をすればよいか判断しなければなりません。一方で「30分のオンライン相談を予約する」と予約目的と所要時間を明示すると、行動のイメージを持ちやすくなります。

2. 予約ボタンから必要なときだけ予約画面を開く

ポップアップ予約は、既存のサイトデザインやページ構成を大きく変えずに導入しやすい方式です。

以下のような場所に予約ボタンを設置できます。

• ヘッダーの「相談を予約する」ボタン
• サービス紹介の直後
• 導入事例の末尾
• 料金ページの比較表の下
• 資料請求完了ページ
• 問い合わせフォーム送信後のサンクスページ

予約カレンダーを常時表示するとページが長くなりすぎる場合、ポップアップは有力な選択肢です。ただし、開閉操作やスマートフォンでの表示を公開前に確認しましょう。

3. カレンダー・Web会議ツールとつなげる

Jicooは、Googleカレンダー、Outlook、Apple（iCloud）カレンダーとの連携が紹介されています。Zoom、Google Meet、Microsoft Teamsとの連携にも対応し、予約時にWeb会議URLを発行する運用が可能です。

これにより、予約後に発生しがちな次の作業を減らせます。

• 担当者の空き時間を手作業で確認する
• 予定をカレンダーへ転記する
• 会議URLを発行してメールで送る
• 担当者へ予約内容を共有する

日程調整の往復連絡は、一件だけなら小さな負担に見えます。しかし、複数の担当者や複数の商談チャネルが絡むと、確認漏れやダブルブッキングが起きやすくなります。現場は悲鳴を上げているはずです。

4. チームへの振り分けを設計する

商談予約では、空いている担当者へ自動で割り当てるラウンドロビンや、フォーム回答に応じて案内先を変えるルーティングフォームが役立ちます。

たとえば、予約前に以下を聞く設計ができます。

• 検討しているサービス・プラン
• 従業員規模
• 導入予定時期
• 利用中のツール
• 問い合わせ内容

「エンタープライズ導入の相談」は営業責任者へ、「操作方法の相談」はカスタマーサポートへ、といった振り分けを設計できれば、初回対応の迷いを減らせます。

予約受付を個人の経験や気合いに頼らないことは、チームの心理的安全性にも関わります。「誰が対応すべきか」を毎回チャットで確認する状態から抜け出し、顧客対応に集中できるという体験こそが価値です。

始め方（初期設定）

ここでは、Jicooで予約ページを作成し、埋め込みコードを取得するまでの流れを説明します。管理画面の表示名称はアップデートで変わる可能性があるため、公開時点の画面で確認してください。

1. 予約ページを作成する

まず、予約を受け付けるための予約ページを用意します。

設定時には、少なくとも以下を決めます。

1. 予約の目的
   例：「30分の製品デモ」「初回相談」「採用カジュアル面談」

2. 所要時間
   例：30分、45分、60分

3. 予約可能な時間帯
   営業時間、担当者の稼働時間、休憩時間を反映します。

4. カレンダー連携
   既存予定と重なる枠を予約可能にしないため、利用カレンダーを連携します。

5. 会議方法
   Zoom、Google Meet、Microsoft Teams、電話、対面などを設定します。

6. 予約者に聞く項目
   氏名、メールアドレス、会社名、相談内容などに絞ります。

質問項目は多ければよいわけではありません。商談前に必要な情報だけを聞くことが、予約者の負担を抑えます。

個人情報を取得する場合は、予約フォームの近くに利用目的やプライバシーポリシーへの導線を置きましょう。予約サービス事業者のデータ取り扱い、委託先、データ保存場所なども、社内の法務・セキュリティ方針に沿って確認が必要です。

2. 予約ページをテストする

埋め込み前に、予約ページ単体でテスト予約を行います。

確認する内容は次のとおりです。

• 予約可能枠が意図どおりに表示されるか
• GoogleカレンダーやOutlookの既存予定と重複しないか
• 予約完了メールが届くか
• Web会議URL（Zoom、Google Meet、Teams）が発行されるか
• 担当者へ通知されるか
• 予約者に送る案内文に誤字や古い情報がないか

この段階で不具合を見つけると、サイト改修と予約設定のどちらに原因があるのかを切り分けやすくなります。

3. 埋め込みコードを取得する

Jicooでは、対象の予約ページから以下の操作で埋め込み用コードを取得します。

1. Jicooのダッシュボードで対象の予約ページを開く
2. 予約ページの「3点リーダー」を選ぶ
3. 「共有・埋め込み」を開く
4. 「埋め込み用コード」タブを選ぶ
5. 表示形式を選択する
6. 発行されたコードをコピーする

利用できる表示形式や管理画面の文言は、公開前に現行ヘルプで確認してください。

Jicooの埋め込みはFreeプランから利用できると案内されています。一方、埋め込み内のロゴ非表示は、2026年8月27日時点の製品ページではTeamプラン以上が条件とされています。ブランド表示の扱いは公開前に料金ページ・製品ページで再確認しましょう。

実務での使い方

予約ページの埋め込み方法は、見た目の違いだけで選ぶものではありません。ページの役割、訪問者の検討段階、サイトの技術制約に合わせて選びます。

パターン1：インラインで予約カレンダーを直接表示する

インラインは、予約カレンダーをページ本文の中へ直接表示する方法です。

向いているのは、次のようなページです。

• デモ予約が目的のLP
• 初回相談の案内ページ
• 来店予約ページ
• 資料請求後のサンクスページ
• セミナー後の個別相談ページ

設置手順

1. Jicooでインライン用の埋め込みコードをコピーする
2. CMSのカスタムHTMLブロック、HTMLウィジェット、またはソースコード編集画面を開く
3. 予約カレンダーを表示したい位置にコードを貼り付ける
4. 下書き・プレビューで表示を確認する
5. PCとスマートフォンでテスト予約する
6. 問題がなければ公開する

インラインの利点は、訪問者が空き枠をすぐに確認できることです。一方、表示領域が大きくなりやすく、ページが長くなる点には注意が必要です。

予約カレンダーの前には、次のような短い案内を置くとよいでしょう。

製品デモをご希望の方は、都合のよい日時をお選びください。所要時間は30分です。

「予約する理由」「所要時間」「会議形式」が分かると、初めて訪れた人も判断しやすくなります。

パターン2：予約ボタンからポップアップを開く

ポップアップ予約は、訪問者が予約ボタンを押したときに予約画面を開く方法です。

サービス紹介ページのように、コンテンツを読んでから相談へ進んでほしい場合に向いています。

設置手順

1. Jicooでポップアップ用の埋め込みコードをコピーする
2. WebサイトのHTML編集画面を開く
3. コードを貼り付ける
4. 予約を開く要素として、ボタンまたはテキストリンクを設置する
5. プレビュー画面でボタンを押し、予約画面が開くか確認する
6. 閉じるボタン、画面外クリック、Escキーの挙動を確認する
7. スマートフォン実機で操作する

ボタンの文言は、抽象的な「送信」よりも、具体的な行動を示すほうが運用意図と一致しやすくなります。

• 30分の相談を予約する
• 製品デモの日程を選ぶ
• 担当者に相談する
• オンライン面談を予約する

「無料相談」のような表現を使う場合は、対象条件や所要時間をページ内で明記しましょう。予約後に営業連絡が続く印象を与えると、サイトの信頼感を損ねる可能性があります。

パターン3：通常リンクで予約ページへ遷移させる

通常リンクは、予約ページのURLを使い、別のページで予約してもらう方法です。

HTMLやJavaScriptを貼り付けられないCMS、メール署名、SNSプロフィール、PDF資料では、リンクが実務的な選択になります。

設置手順

1. Jicooの予約ページURLを取得する
2. ボタンまたはテキストリンクにURLを設定する
3. 必要に応じて、流入元を識別するUTMパラメータを付与する
4. シークレットウィンドウや別端末でリンクを開く
5. 予約完了まで進み、URL・予約内容・通知を確認する

Jicooでは、埋め込みコード内のdata-urlにUTMパラメータを付与する案内があります。広告、メールマガジン、パートナーサイトなど、流入経路ごとに予約状況を見たい場合に役立ちます。

ただし、「UTMを付ければ予約完了までGA4で自動計測できる」とは限りません。埋め込み画面・予約完了画面・親サイト間の計測可否は、設定やプラン、実装方式で異なる可能性があります。GA4のDebugViewなどでテスト予約を1件実行し、意図したイベントが記録されるか確認してください。

詳細な連携の考え方は、連携に関する記事一覧でも確認できます。

よくある失敗と対処

予約ページを埋め込んでも、公開後に「表示されない」「予約が入っても気づかない」「スマホで押せない」といった問題が起きることがあります。多くは、予約設定・CMS・計測設定の境界で発生します。

予約カレンダーが表示されない

よくある原因

• CMSがscriptタグを削除している
• セキュリティ設定やCSPが外部スクリプトをブロックしている
• コードの一部だけを貼り付けている
• キャッシュが残っている
• テーマや既存CSSが表示領域を隠している

対処

1. Jicooから取得したコードを、改変せずに再コピーする
2. CMSがカスタムHTMLやスクリプト設置を許可しているか確認する
3. ブラウザのシークレットウィンドウで表示確認する
4. キャッシュプラグインやCDNのキャッシュを更新する
5. 制作会社・開発担当者へ、ブラウザの開発者ツールでエラー確認を依頼する
6. 解決しない場合は、通常リンクを暫定導線として設置する

「埋め込みができないから予約導線を止める」のではなく、リンクへ切り替えて機会損失を抑える判断も重要です。

インライン表示で二重スクロールが発生する

予約カレンダーの高さが足りないと、ページ本体と予約枠の両方にスクロールバーが出ることがあります。

対処

• 実際の予約ステップを最後まで進めて必要な高さを確認する
• PCとスマートフォンで表示高さを確認する
• 固定高さを指定しているCSSがないか確認する
• 画面下部に置く場合は、遅延読み込みの可否を制作担当者と検討する

予約枠が見切れると、訪問者は「予約できない」と感じやすくなります。実務的には、デザイン上の余白より、操作完了まで迷わず進めることを優先したほうがよいでしょう。

スマートフォンでボタンが押しにくい

PCで問題がなくても、スマートフォンではポップアップの閉じるボタンが小さい、キーボードで入力欄が隠れる、予約画面が横にはみ出す、といった問題が起こります。

対処

• 幅320 CSSピクセル相当の画面でも横スクロールが出ないか確認する
• iPhoneとAndroidの実機でテストする
• 縦向き・横向きの両方を確認する
• ブラウザの文字サイズを大きくしても読めるか確認する
• 予約ボタンの前後に十分な余白を持たせる
• ポップアップをキーボードだけで操作できるか確認する

アクセシビリティは、特別な対応ではありません。予約したい人が途中で疲れず、迷わず完了できる導線をつくる基本です。

予約は入るが、完了数を計測できない

埋め込み型の予約ページでは、親サイトのGA4と予約サービス側の完了画面が別の仕組みで動く場合があります。

対処

1. 「予約ボタンのクリック」をGA4イベントとして計測する
2. 予約完了時のイベント通知や完了URLへの遷移が利用できるか確認する
3. UTMパラメータが予約データに保持されるか確認する
4. Webhook、API、CRM連携で完了情報を補完できるか検討する
5. テスト予約を1件だけ行い、GA4・広告管理画面・CRMの記録を照合する

計測を後回しにすると、マーケティング担当者は「予約が増えたのか」「どの広告が効いたのか」を説明できません。サイト担当、広告担当、営業企画が同じ指標を見られる状態を、公開前につくりましょう。

比較の観点

比較基準日：2026年8月27日

インライン、ポップアップ、リンクのどれが最適かは、業種やページ目的で変わります。「埋め込みならコンバージョンが上がる」とは断定できません。表示形式、CTA文言、設置位置、広告流入、営業体制などが同時に影響するためです。

まずは比較対象を絞り、A/Bテストで判断することをおすすめします。

比較時に見るべき4つの数字

表示形式を変える際は、予約完了数だけで判断しないほうがよいでしょう。次の4つを同じ期間・同じ流入条件で確認します。

1. 予約ボタンのクリック率
   CTAが見つけやすいかを確認します。

2. 予約開始数
   予約カレンダーを開いた人がどれだけいるかを見ます。

3. 予約完了率
   開始から完了まで進めた割合を確認します。

4. 有効商談率
   予約が営業・サポートにとって有効だったかを確認します。

特にB2Bでは、予約数だけを追うと、対象外の問い合わせが増えて営業チームが疲弊することがあります。予約フォームの質問、担当者割り当て、予約後のフォローまで含めて評価すべきです。

Webサイトの生産性を高める運用設計については、生産性向上に関する記事一覧も参考になります。

さらに効率化するには

予約ページを設置した次の段階では、予約を「受ける」だけでなく、予約データをチームの仕事につなげます。

フォーム回答で担当者を振り分ける

たとえば、資料請求やデモ予約のフォームで「従業員規模」「相談内容」「利用中のツール」を取得し、回答に応じて担当チームを分けます。

• 小規模チームの相談：インサイドセールスへ
• 大規模導入の相談：エンタープライズ担当へ
• 既存顧客の相談：カスタマーサクセスへ
• 技術要件の相談：セールスエンジニアへ

これにより、予約後に担当者を探す時間を減らせます。最初から適切な相手と話せる顧客体験は、社内外の摩擦を減らします。

予約情報をCRM・チャットへ連携する

営業チームで運用する場合は、予約情報をCRMやSlackへ共有する設計を検討します。JicooにはSalesforce連携やSlack通知連携の紹介があります。

運用例は次のとおりです。

1. Webサイトから予約が入る
2. 予約者情報と回答内容が営業チームへ通知される
3. 担当者が商談前に顧客情報を確認する
4. 商談後、CRM上の進捗を更新する
5. 予約経路別に商談化率を振り返る

担当者の個人受信箱だけに予約メールが届く状態では、休暇や退職、担当変更に弱くなります。チームで見える場所に情報を残すことが、継続的な運用の基盤になります。

埋め込み形式を一度決めて終わりにしない

予約ページの埋め込みは、公開がゴールではありません。月に一度でも、次のような観点で見直すと改善点が見つかります。

• 予約ボタンは読まれている位置にあるか
• スマートフォンの離脱が増えていないか
• 希望日時が少なすぎて予約できない状態になっていないか
• 予約フォームの質問が多すぎないか
• 担当者の割り当てが偏っていないか
• 無断キャンセルや日程変更が増えていないか
• 流入経路ごとの有効商談率に差がないか

現場感としては、予約ツールの導入効果は「メールが何通減ったか」だけでは測れません。担当者が調整作業から解放され、商談準備や顧客理解といったコア業務へ時間を使えるようになったかが重要です。

まとめ

予約ページの埋め込みは、Webサイトに予約カレンダーを置くだけの施策ではありません。訪問者が相談したいタイミングで日程を選び、チームが適切に対応するまでの流れを整える仕組みです。

表示形式は、ページ内に直接表示するインライン、ボタンから開くポップアップ、別ページへ遷移する通常リンクから選べます。

まずは、以下の順番で進めるとよいでしょう。

1. 予約の目的、所要時間、担当体制を決める
2. 予約ページを作成し、カレンダー・会議ツール連携を設定する
3. インライン、ポップアップ、リンクから1方式を選ぶ
4. Jicooで発行した専用コードをサイトへ設置する
5. PC・スマートフォン・キーボード操作でテスト予約する
6. 予約完了、通知、計測、個人情報の案内を確認する
7. 公開後はCTA文言・位置・表示形式をA/Bテストする

最初の一歩として、現在もっとも商談意欲が高い訪問者が集まるページを1つ選び、予約ボタンまたは予約カレンダーを試験的に設置してみてはいかがでしょうか。