Add the Book 24/7 Widget and start booking clients and selling items from your personal website, in addition to selling services from your Vagaro page.
To add our booking widget to your site, follow these steps:
- Click Marketing at the top of the screen.
- Click Add Widget.
- Once you access the widget builder, you'll be able to change the appearance of it to your liking. You'll also be able to copy the embedded code and add it to your website.
Let's get started!
1. Click Marketing.
2. Click Add Widget.
3. Select the tabs you want to include in the widget. A light blue color means the option has been chosen. For example, if you select Services, the client will see this as an option on your Vagaro booking page.
4. Click on the drop-down under Open this tab at launch to select the tab you see first when you launch your widget.
5. This option appears if you have the multi-location setup. Click on the drop-down to make the selection. This allows you to pick the location that will be listed on the widget as the main location.
6. Toggle the Display Vagaro App option if you want to display a button that allows customers to download the Vagaro App. This button appears at the bottom of your widget.
7. Click on the square to customize the button color for your widget.
8. Select the color. Then, click OK when you're finished.
9. Enter the Header in the box. The header will appear above the widget.
10. Select the widget type.
11. Thanks to our Preview window you can get a sense of the look and feel of the widget on the customer's desktop or phone before creating it. You also save time by adjusting the design as often as needed before launching the final widget.
12. Click on the Computer option to get a feel for how the widget appears on your desktop.
13. Click on a tab to get an idea of how the page appears. For example, you can view how the Services section displays when you click on the option.
14. Notice you also can get an idea of how the widget displays on your customer’s phone. Just click on the Mobile tab.
15. Click Save once you’re happy with the design.
16. Click the Copy Code button. Next, paste the code into your personal website. You can manually select the code if the Copy Code function does not display or copy properly. In this case, select the whole code with your mouse. Right click. Click Copy. Then, right click again to paste the code into your website.
17. Click OK.