埋め込み予約ページ

埋め込み予約ページのウィジェットは、Barberlyの予約ページ全体をiframeでウェブサイトのページ内に配置します。お客様は別のサイトに移動することなく、予約をすべて完了できます。予約専用のページとして使うことも、トップページ、サービスのページ、お問い合わせページに追加することもできます。

新しいインスタンスを作成する#

1. portal.barberly.com でBarberlyのアカウントにログインします。
2. メニュー→アプリ→すべてのウィジェット に移動します。
3. 埋め込み予約ページ をクリックします。
4. 新しいインスタンスを作成 を選択します。
5. インスタンスに名前を付けます。例：「メインの予約ページ」

設定#

スタイル#

埋め込みページは画面サイズに合わせて表示されます。パソコンでは予約画面全体が表示され、モバイルでは小さな画面に合わせて調整されます。

ページをウェブサイトに追加する#

ライブプレビューで、埋め込みページがどのように表示されるかを確認できます。予約の流れを一通り試して、正しく動作することを確かめてください。

1. このコードをあなたのウェブサイトにコピーしてください。 セクションのコードをコピーします。
2. ウェブサイトのHTMLの、予約ページを表示したい場所に貼り付けます。
3. ウェブサイトを保存して公開します。

コードの例：

<div id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="embed_262b1c5d48b64c16a9786cd8ebbbecd3" data-container-id="262b1c5d48b64c16a9786cd8ebbbecd3-container"></script>

プラットフォームごとの手順は、WordPress、Wix、Squarespaceのガイドをご覧ください。

複数のインスタンス#

ウェブサイトのセクションごとに、埋め込みページのインスタンスを複数作成できます。埋め込み予約ページ で上記の手順を繰り返してください。インスタンスごとに専用の連携コードがあります。

公開中の埋め込みページを更新する#

メニュー→アプリ→すべてのウィジェット でインスタンスを開き、変更して保存します。ウェブサイト上の埋め込みページは自動的に更新されるため、サイトのコードを変更する必要はありません。

ページが正しく表示されない場合#

• コンテナの幅と高さが、予約画面を表示するのに十分か確認してください。
• ウェブサイトのスタイルとCSSが競合していないか確認してください。
• 予約URLが正しいか確認してください。
• サイトのコンテンツセキュリティポリシーがiframeをブロックしていないか確認してください。