> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://con-one.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 予約ウィジェットの追加方法

${youtube}[予約ウィジェットの追加方法〜セッション、施術予約、コーチング、コンサルなどにおすすめ〜](LqwXLvHgSOE)



# 予約ウィジェットの追加方法

予約機能の設定をしたら、実際に各ページに入れていきます。ウィジェットから設置したい場所に追加しましょう。デザインも自由に変更が可能です。
※先に予約イベントの作成を済ませておいてください。→【[予約機能の設定方法](/ja/article/5lqi57se5qmf6io944gu6kit5a6a5pa55rov-1m1gaze/)】

### ① ウィジェットを追加する
1. 「ウィジェットを追加」をクリックします。
2. 「**予約**」を選びます。
3. 設置したい場所にドラッグして入れます。
入れた直後は「予約イベントを選択してください」と表示されます。設定から、事前に作成した予約イベントを選ぶと、内容が表示されます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_dy4o9k.png)

### ② レイアウトを選ぶ
「レイアウトの変更」から、デザインを選べます。
| レイアウトの例 | 見え方 |
| 上に日時とイベントタイトル | 上にタイトルや場所・詳細が入り、下で日時を選びます |
| 左に日付と時間 | 左側で日時を選び、右側に詳細が表示されます |
**おすすめは「左に日付と時間」があるレイアウトです。** 人は左から見ることが多いので、先に日時が目に入ると予約されやすくなります。
イベントの詳細は上のテキストに入れておき、下で日付と時間を選んでもらう形にすると、分かりやすくなります。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_jrioru.png)

### ③ デザインを調整する
* **見出しのフォント**
* **背景**：ボックスやスタイリングの背景色を変えられます
* **ラベルの編集**：画面に表示される言葉を変えられます
**ラベルは、分かりやすい言葉に変えましょう**
たとえば「オペレーター」は日常であまり使わない言葉なので、「**担当者**」「**サービス提供者**」などに変えると、お客様に伝わりやすくなります。
### ④ ステップの設定
予約は、いくつかのステップに分かれて進みます。
```
サービスを選択
　↓
担当者を選択
　↓
日付と時間を選択
　↓
詳細を入力
```
ステップごとに、表示される見出しやボタンの文字を設定できます。
（例：ボタンを「予約する」「受付する」などに変更）
※サービスや担当者が1つだけの場合は、最初の選択画面は表示されません。複数設定している場合に表示されます。
**所要時間について**
サービスごとに所要時間（30分・45分など）を設定しておくと、選んだ時間に合わせて自動で枠が入ります。
（例：30分のサービスで9時を選ぶと、9時〜9時半で予約されます）
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_l38f6a.png)

### ⑤ 予約された方の情報を設定する
**会員サイトに案内する場合**
「顧客情報を作成する」にチェックを入れて、所属するグループを選びます。
この場合、予約する方にパスワードの設定が求められます。**会員サイトに案内しない場合は、チェックを入れないでおきましょう。**（お客様の手間が減ります）
**メールにつなげる場合**
* **リスト**：予約された方を追加するリストを選びます
* **ダブルオプトイン**：有効にするかどうかを選びます
* **タグ**：予約された方に付けるタグを設定します（例：お問い合わせ、〇〇セッション予約）
タグやリストを設定しておくと、メールのオートメーションで**予約後の自動返信メール**を送れます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_qre2z1.png)

### ⑥ 保存して確認する
保存したら、プレビューで実際の画面を確認しましょう。
日時を選び、お名前・メールアドレスを入力するフォームが表示されれば設定完了です。
### ご注意ください：決済は予約と同時にできません
予約と決済を同時に行うことはできません。有料のサービスの場合は、次のどちらかの流れにしてください。
* **予約 → 決済**：予約を受け付けたあとに、決済フォームをお送りする
* **決済 → 予約**：決済が完了した方に、日時を選んでいただく
### 使い方の例
* 個別セッション・カウンセリングの予約
* 施術やレッスンの予約
* グループ講座の受付
* イベントの申し込み

# 予約機能一覧


[予約機能の設定方法](/ja/article/5lqi57se5qmf6io944gu6kit5a6a5pa55rov-1m1gaze/)

[予約ウィジェットの追加方法](/ja/article/5lqi57se44km44kj44k444kn44od44oi44gu6l95yqg5pa55rov-1i8bbij/)

[予約システムとGoogleカレンダー連動](/ja/article/google-11u8177/)