In this article we'll tell you about three different ways to replace the old booking widget with the new one. Still haven't read our help article on how to install the booking widget? We recommend reading that one before continuing with this article.
We're sharing the method for a Wordpress website in this article's roadmaps and videos. This roadmap might still be useful even if you have built your website differently. If it looks too different from your own website we would like to advise you to Google this or send it to your website builder.
✨ TIP: If you want to give your customers the best user experience make sure you add the booking widget button to your website. This button will be visible on each page so that the customer can book an appointment at any given moment! ✨
1. Redirect your customers to the booking widget via the menu bar
Have you added the booking widget button to your website? You can also redirect your customers to the booking widget via a link in the menu bar. The booking widget will automatically open once you click on "book appointment" in the menu bar.
In the example below you can see the "book appointment" option in the menu bar. As soon as you click on this, the booking widget will open in the lower right corner of your website.
You can read about how to get the "make appointment" button in the menu bar to redirect to the booking widget in the roadmap below.
Log into your (Wordpress) website
Go to appearance > menus
You'll find which items you've placed in your menu via > menu structure
Go to the item and click on the arrow right next to "custom link", like in the example below so that the item expands
Add this to the "URL" text box: #sz-booking-toggle
If you want to adjust the name of the button you can do this in "navigation label"
Click "save menu"
If you don't have a button in your menu bar yet that links back to the booking widget (but you want to add this), then follow these steps:
After logging into your (Wordpress) website go to appearance > menus. Then go to "add menu items" and click on "custom links"
Add this to the "URL" text box: #sz-booking-toggle
Add the correct text that you want to add to your button in the menu bar via "link text". For example: "book appointment"
Then click on "add to menu"
2. Adjusting existing buttons to redirect you to the booking widget button
Did you already add a button to one or multiple pages on your website that link to the old version of the booking widget? Make this button (or buttons) redirect you to the booking widget button that's visible at the bottom of every page.
Add the booking widget button to your website. (You can read how to do it here)
Log into your (Wordpress) website
Go to the page with the button that redirects your clients to the old book widget
Click on that button and then on the hyperlink icon (watch video)
Add: #sz-booking-toggle and select the correct one or hit enter
Click "edit" or "save"
Do you prefer to delete the button in your menu bar and solely make use of the booking widget button on the lower right corner on each page? Then follow these steps:
Add the booking widget button to your website if you haven't already. Read how to do this by clicking here
Log into your (Wordpress) website
Once you've added the booking widget button you can delete the old button. Go to display > menus > menu structure >, then click on the menu item that is still redirecting to the old widget
Once you've opened this you'll see "remove" on the bottom of the item box. You can click on this to delete the whole menu item
3. Replacing the old inline version with the new booking widget's inline version
Do you already have the old booking widget's inline version on your website (do you have the widget on one specific page)? You can replace it with the new one by following these steps:
Go to Settings > Online bookings > Style and sharing.
Choose the colour for your booking widget and make sure the display of your widget is set to "Open booking tool on my website.
Go to the code on the bottom of the screen and click on "copy to clipboard"
Log into your (Wordpress) website
Go to where your old booking widget is and select the code
Replace this old code with the new one (the one that you just copied in Salonized)
Click "save"
✨ TIP: It looks best when you use the booking widget everywhere on your website. Do you already have the booking widget button in the lower right corner on your website but is the old widget still on a certain page? Replace that old widget with the new one. ✨
You can find more information about the booking widget via:
Don't hesitate to contact the Salonized team if you have any further questions.
You can always send us a message or call us during business hours.
Thank you for reading!