Add the Book 24/7 Widget and start booking clients and selling items from your personal website, in addition to selling services from the Vagaro online booking page!
To get started, watch the video or follow the steps below.
Adding the Vagaro Widget
1. Click Marketing at the top of the screen.
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 and will be visible on your widget. For example, if a client selects the Services tab, the client will be able to see and book your services.
4. Click on the drop-down under Open this tab at launch to select the tab you see first when you launch the widget.
5. This option appears if you have the multi-location setup. Click the drop-down to select the option you prefer. This allows you to pick the location that will be listed as the main location on the widget.
6. Select the Display Vagaro App option if you want to display a button that allows customers to download the Vagaro Customer App. This button appears at the bottom of the widget.
7. Click the Button Color square to customize the button color of the widget.
8. Click the arrow in the middle of the display. Then drag it to the color you prefer. Click OK when you're finished.
9. Enter a Header of your choice in the box. The header will appear above the widget.
10. Select the widget type. The In Website option functions as a traditional website when you select one of the Widget Tabs.
The Popup widget generates a pop-up window when you select one of the Widget Tabs. The New Tab option generates a new tab on the web browser when you select a tab.
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. Let's take a closer look at this!
12. Click on the Computer option to get a feel for how the widget appears on a computer or the desktop.
13. Once you select the Computer tab, select one of the Widget Tabs to get an idea of how the page appears. For example, you can see how the Services page displays on the widget when you select the Services tab.
14. You can also see how the widget displays on a mobile device. Click Mobile to view it.
15. Click Save once you’re happy with the design.
16. Copy the embedded code. Click the Copy Code button. Then paste the code on the preferred location on the website.
You can manually select the code if the Copy Code function does not display or work properly. In this case, select the whole code with your mouse. Right-click. Then click Copy to paste it to your website.
17. If you clicked Copy Code in the previous step, you'll see the popup below. Click OK. Go to the edit page builder of your website. Find the section where you want to paste the code. Then right-click again to paste it to the site.