予約リンク
予約リンクをウェブサイトに埋め込む
コードをコピーしてウェブサイトに貼り付けるだけで、予約リンクをウェブサイトに埋め込むことができます。訪問者はウェブサイトから直接予約できるようになります。
予約リンクをウェブサイトに埋め込む方法
- ダッシュボードの予約リンクページを開く
- ウェブサイトに埋め込みたい予約リンクの3点アイコンをクリック
- 「埋め込み」をクリック
予約リンク埋め込みオプション - 提供されたコードをコピー
プライベートリンクを有効にするUI - コードをウェブサイトのHTMLに貼り付け
特定のテーマで予約リンクを埋め込む方法
- 上記の手順で「予約リンクを埋め込む」ダイアログを開く
- 「UIテーマ」で「デフォルト」「ライト」「ダーク」のいずれかを選択。
予約リンクを埋め込むダイアログのUIテーマ選択 - 「コピー」をクリックして、選択したテーマの埋め込みコードをコピー
- コードをウェブサイトのHTMLに貼り付け
選択したテーマは、予約ページのURLに ui_theme クエリパラメータとして追加されます。
| UIテーマ | ui_theme の値 | 予約ページの表示 |
|---|---|---|
| デフォルト | なし | 訪問者の設定に従います。OneCalの外観設定があればそれを使い、なければデバイスのライト／ダーク設定を使います。 |
| ライト | light | 訪問者の設定に関係なく、常にライト表示になります。 |
| ダーク | dark | 訪問者の設定に関係なく、常にダーク表示になります。 |
たとえば、次の埋め込みコードでは予約ページがダークモードで表示されます。
<iframe width="100%" height="600" src="https://app.onecal.io/b/your-username/your-link?ui_theme=dark" frameborder="0"></iframe>
「ライト」や「ダーク」を選んでも、変わるのは予約ページの見た目だけです。訪問者が保存しているOneCalの外観設定は変わりません。
補足
ウェブサイトにすでに貼り付けている埋め込みコードにも、ui_theme を手動で追加できます。src 属性にある予約リンクURLの末尾に ?ui_theme=light または ?ui_theme=dark を追加してください。URLにすでにクエリパラメータがある場合は、?ui_theme=... ではなく &ui_theme=... を追加します。認識される値は light と dark のみです。それ以外の値は無視され、「デフォルト」が使われます。
このパラメータは通常の予約リンクでも使えます。たとえば https://app.onecal.io/b/your-username/your-link?ui_theme=dark を開くと、予約ページがダークモードで表示されます。
テーマのある予約リンク
外観エディターのテーマを持つ予約リンクは、すべての色を自分で設定するため、ライトモードとダークモードで同じ表示になります。このようなリンクには UIテーマの設定は適用されず、ui_theme は無視されます。カスタムブランディングをご覧ください。