予約サイドバー

予約サイドバーのウィジェットは、ウェブサイトにボタンを追加します。ボタンをクリックすると、Barberlyの予約ページが入ったサイドバーが画面の端からスライドして表示されます。訪問者はサイドバーを閉じると元のページに戻ります。場所をあまり取らないため、サイトのすべてのページに置くのに向いています。通常のボタンがスクロールで見えなくなる長いページでも使いやすくなります。

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

portal.barberly.com でBarberlyのアカウントにログインします。
メニューアプリすべてのウィジェットに移動します。
予約サイドバー をクリックします。
新しいインスタンスを作成 を選択します。
インスタンスに名前を付けます。例：「メインの予約サイドバー」

設定#

ボタンのテキスト: サイドバーを開くボタンに表示されるテキストです。
予約URL: サイドバーに表示する、Barberlyの予約ページのURLです。
サイドバーの位置: サイドバーが開く画面の側で、右または左です。

スタイル#

ボタンのスタイル

背景色: ボタンの色です。
テキストの色: ボタンのテキストの色です。背景とはっきり区別できる色を選んでください。
パディング: ボタン内側の余白です。
ボーダー半径: ボタンの角の丸みです。
フォント重量: 標準、太字などです。

サイドバーのスタイル

ボーダー半径: サイドバーの角の丸みです。
ボックスシャドウ: サイドバーの周りの影です。
幅: サイドバーが画面のどれだけを占めるかで、パソコンとモバイルで別々に設定します。

小さな画面ではサイドバーが画面幅のより多くを占め、閉じるボタンははっきり見える位置に表示されます。

サイドバーをウェブサイトに追加する#

ライブプレビューでボタンとサイドバーを確認できます。ボタンをクリックして、予約ページの入ったサイドバーがスライドして表示されることを確かめてください。

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

コードの例：

html

<div id="sidebar-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="sidebar_booking" data-container-id="sidebar-booking-container"></script>

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

ボタンを固定位置に表示する#

訪問者がスクロールしてもボタンが見えるようにするには、ウェブサイトのカスタムCSSに次のコードを追加します。

css

#sidebar-booking-container {
  position: fixed;
  right: 20px; /* or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

複数のインスタンス#

サイドバーのインスタンスは複数作成できます。たとえば、ウェブサイトのセクションごとに異なるデザインにすることもできます。予約サイドバー で上記の手順を繰り返してください。インスタンスごとに専用の連携コードがあります。

公開中のサイドバーを更新する#

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