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