---
title: "自分のウェブサイトに予約を組み込む"
description: "コードを1行貼るだけで、Squarespace、WordPress、Wix、Shopify などどのサイトにも予約を置けます。"
url: "https://bookatu.com/ja-jp/help/website-book-now-button"
language: "ja"
section: "ヘルプ"
category: "集客"
published: "2026-06-26"
updated: "2026-10-30"
---

# 自分のウェブサイトに予約を組み込む

コードを1行貼るだけで、Squarespace、WordPress、Wix、Shopify などどのサイトにも予約を置けます。

## どんな機能か

すでにお持ちのウェブサイトに貼る、小さなコードです。「予約する」ボタン、ページの中に並ぶサービス一覧、サイトの上に開くポップアップ、どのページにも付いてくるボタンのいずれかにできます。すでに気に入っている「予約する」ボタンがサイトにあるなら、そのまま使えます。コードはクリックを受け取るだけです。

## どう役立つか

訪問者はもうサイトに来ています。プラグインの導入も制作会社の作業もなしに、数分で予約に変わります。ポップアップなら確認画面まで自分のサイトの中で進むので、途中でよそへ送る必要がありません。

![Flux StudioのBookatu予約ページ。写真、口コミ、「予約する」ボタンが並んでいる](https://bookatu.com/help/storefront.jpg)

*「予約する」ボタンは、Bookatuの予約ページを開きます（ここでは実際の予約ページを例として表示しています）。*

![セッション、トレーナー、日時、お客様情報、確認のステップが並ぶ予約の流れ](https://bookatu.com/help/booking-wizard.jpg)

*お客様は、いくつかのわかりやすいステップでメニューと時間を選び、デポジットが設定されていればそのままお支払いします。*

## 使い方

1. 「Grow」から「Website widget」を開き、見せ方を選びます。ボタン、ページ内の一覧、ポップアップ、または画面に浮かぶボタンです。
2. 文言と色を決めます。特定のサービスだけを予約するボタンにしたい場合は、Opens at でそのサービスを選びます。
3. コードをコピーしてサイトに貼ります。Squarespace は Code ブロック、WordPress は Custom HTML ブロック、Wix は Embed HTML 要素、Shopify は Custom Liquid セクションです。
4. 浮かぶボタンの場合は、サイトのフッターかカスタムコードの設定に一度だけ貼れば、すべてのページに表示されます。
5. 特定のスタッフ、店舗、日付で開いたり、コードを入力済みにしたりしたい場合も、ビルダーで選べます。ボタン、ポップアップ、一覧、浮かぶボタンのどれでも引き継がれ、広告やニュースレターのリンクからサイトに来た予約には、そのキャンペーンが Came via に表示されます。
6. Google アナリティクス、Google 広告、タグマネージャー、Meta ピクセルで予約を数えるには、ウィジェットがページに送るイベントを使います。各ステップごとに1つ、予約が入ったときに1つ、サービス名と料金付きで届きます。お客様の名前、メール、電話番号が含まれることはありません。ウィジェットはサイトがすでに読み込んでいるタグだけを使うので、Cookie バナーの設定がそのまま生きます。
7. Only allow your own websites にドメインを追加してください。訪問者のブラウザは、予約のどのステップでも、ほかのサイトにウィジェットを表示しなくなります。
8. ページを公開して、公開後の画面で確認してください。サイト作成ツールはプレビューでスクリプトを止めるため、ウィジェットは公開後に動きます。