予約ポップアップのウィジェットは、ウェブサイトにボタンを追加します。ボタンをクリックすると、Barberlyの予約ページが画面中央のポップアップで開くため、訪問者は今いるページを離れずに予約できます。サイト全体で使うことも、サービスのページやブログ記事など個別のページで使うこともできます。
新しいインスタンスを作成する#
- portal.barberly.com でBarberlyのアカウントにログインします。
- メニューアプリすべてのウィジェット に移動します。
- 予約ポップアップ をクリックします。
- 新しいインスタンスを作成 を選択します。
- インスタンスに名前を付けます。例：「メインの予約ポップアップ」
設定#
- ボタンのテキスト
- ポップアップを開くボタンに表示されるテキストです。
- 予約URL
- ポップアップに表示する、Barberlyの予約ページのURLです。
スタイル#
ボタンのスタイル
- 背景色
- ボタンの色です。
- テキストの色
- ボタンのテキストの色です。背景とはっきり区別できる色を選んでください。
- パディング
- ボタン内側の余白です。
- ボーダー半径
- ボタンの角の丸みです。
- フォント重量
- 標準、太字などです。
ポップアップのスタイル
- ボーダー半径
- ポップアップの角の丸みです。
- ボックスシャドウ
- ポップアップの周りの影です。
モバイル端末では、ポップアップは画面サイズに合わせて表示され、閉じるための×ボタンが付きます。
ポップアップをウェブサイトに追加する#
ライブプレビューでボタンとポップアップを確認できます。ボタンをクリックして、予約ページの入ったポップアップが開くことを確かめてください。
- このコードをあなたのウェブサイトにコピーしてください。 セクションのコードをコピーします。
- ウェブサイトのHTMLの、ボタンを表示したい場所に貼り付けます。
- ウェブサイトを保存して公開します。
コードの例：
html
<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>プラットフォームごとの手順は、WordPress、Wix、Squarespaceのガイドをご覧ください。
複数のインスタンス#
ポップアップのインスタンスは複数作成できます。たとえば、ウェブサイトのセクションごとに異なるデザインにすることもできます。予約ポップアップ で上記の手順を繰り返してください。インスタンスごとに専用の連携コードがあります。
公開中のポップアップを更新する#
メニューアプリすべてのウィジェット でインスタンスを開き、変更して保存します。ウェブサイト上のポップアップは自動的に更新されるため、サイトのコードを変更する必要はありません。