予約埋め込みのプレイグラウンド

施設さまの自社サイトに CHILLNN の予約コンポーネントを埋め込んだときの見え方を、その場で確認できるページです。 左のコードを編集すると、右のプレビューにリアルタイム（約0.5秒のディレイ）で反映されます。 上部の「埋め込みパターン」から、予約フォーム / 予約ボタン / カレンダー の3種類の表示を切り替えてお試しいただけます。

埋め込みパターン予約フォーム予約ボタンカレンダー

コード

<header style="position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #eee;"> <strong style="font-size:18px;letter-spacing:.08em;">CHILLNN&nbsp;STAY</strong> <nav style="display:flex;gap:24px;font-size:14px;color:#555;"> <span>お部屋</span><span>お料理</span><span>アクセス</span> <span style="color:#c0392b;font-weight:600;">ご予約</span> </nav> </header> <section style="position:relative;height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=1200&q=70&auto=format&fit=crop');background-size:cover;background-position:center;"> <p style="margin:0 0 12px;letter-spacing:.3em;font-size:13px;">OFFICIAL SITE</p> <h1 style="margin:0 0 16px;font-size:40px;font-weight:700;letter-spacing:.08em;text-shadow:0 2px 8px rgba(0,0,0,.3);">CHILLNN STAY</h1> <p style="margin:0;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.3);">あなたの感性に響く旅の予約を、CHILLNNで。</p> </section> <section style="max-width:720px;margin:0 auto;padding:64px 24px 16px;text-align:center;"> <h2 style="font-size:22px;margin:0 0 16px;">ようこそ、CHILLNN STAY へ</h2> <p style="margin:0;color:#555;line-height:1.9;">客室はわずか8室。全室オーシャンビューで、波の音だけが響く静寂の時間をお約束します。<br>地元の漁港から届く旬の海の幸と、源泉かけ流しの温泉でごゆっくりお過ごしください。</p> </section> <section style="max-width:960px;margin:0 auto;padding:40px 24px;"> <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;"> <figure style="margin:0;"> <img src="https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=500&q=70&auto=format&fit=crop" alt="客室" style="width:100%;height:180px;object-fit:cover;border-radius:10px;" /> <figcaption style="margin-top:10px;font-size:14px;color:#333;">和モダンの客室</figcaption> </figure> <figure style="margin:0;"> <img src="https://images.unsplash.com/photo-1540541338287-41700207dee6?w=500&q=70&auto=format&fit=crop" alt="温泉" style="width:100%;height:180px;object-fit:cover;border-radius:10px;" /> <figcaption style="margin-top:10px;font-size:14px;color:#333;">源泉かけ流しの湯</figcaption> </figure> <figure style="margin:0;"> <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=500&q=70&auto=format&fit=crop" alt="料理" style="width:100%;height:180px;object-fit:cover;border-radius:10px;" /> <figcaption style="margin-top:10px;font-size:14px;color:#333;">旬の海の幸</figcaption> </figure> </div> </section> <section style="background:#f6f3ee;padding:56px 24px;"> <div style="max-width:560px;margin:0 auto;"> <p style="text-align:center;letter-spacing:.2em;font-size:12px;color:#999;margin:0 0 4px;">RESERVATION</p> <h2 style="text-align:center;font-size:24px;margin:0 0 28px;">ご予約</h2> <div data-chillnn-reservation-form></div> </div> </section> <footer style="background:#1f2933;color:#cbd2d9;padding:40px 24px;text-align:center;"> <strong style="display:block;font-size:16px;letter-spacing:.08em;color:#fff;margin-bottom:8px;">CHILLNN STAY</strong> <p style="margin:0 0 4px;font-size:13px;">〒000-0000　CHILLNN県CHILLNN市1-2-3</p> <p style="margin:0 0 16px;font-size:13px;">TEL 000-000-0000</p> <small style="color:#7b8794;">© CHILLNN STAY</small> </footer>

プレビュー