In this article, we'll explain how to add the booking widget button or inline version to your website, covering the most commonly used websites. If you don't see the settings for the website you are using, feel free to contact our support team, and we are happy to help.
Table of Contents:
Add your Booking Widget
Step 1: Adjust the settings for your booking widget
Go to Salonized, navigate to Settings icon > Click Online Bookings in Calendar, and adjust the following settings under 'Style and Sharing' if needed:
Schedule View: Display your availability per week or per month and week.
Widget Color: (use the default "paradise pink" or choose your own color).
Widget Display: Ensure you have selected on how to share your booking widget. For example: "Code to add the button on my website."
Button Position (aligned to left or right).
Click "Save".
Step 2: Copy the code (the script)
At the bottom of the page, you'll find the code to add the button on my website.
Click "Copy to clipboard" to copy the entire code.
Step 3: Add the code to the footer of your website
Log in to your website management and paste the copied code into the footer of your website.
Publish the changes.
The widget is now added!
If you need a detailed guide on how to add the code to the footer on a WordPress, WIX, Jimdo or Weebly website, you'll find them below.
Note: Every time you adjust the color or position of your booking button in your Salonized account, the code (script) also changes. This means that each time you make those adjustments, you need to remove the old code from your website and add the new code in the same place (in the footer).
WordPress Website
WordPress Website
In your Salonized account, click on Settings at the bottom left, then go to Online bookings > Style and Sharing > navigate to the code section and click 'Copy to Clipboard.'
Log in to your WordPress website.
Click on "Plugins" on the left. If you can't find "plugins," someone else may manage your website. Contact your contact person/website administrator to add the button for you.
Click on 'New Plugin' at the top.
In the search bar, type "Headers and Footers."
Click on "Insert Headers and Footers." Click 'install now' and, when ready, click 'activate.'
Go to the left side, click on "Settings, and then click on "Insert Headers and Footers."
At the bottom, find "Footer," go to that text box.
Paste the code copied from Salonized into the "Footer" text box.
Click 'Save.'
WIX Website
WIX Website
In your Salonized account, click on Settings at the bottom left, then go to Online Bookings > Style and Sharing > navigate to code and click 'Copy to Clipboard.'
Log in to your WIX website.
On the left in the dark bar, go to Settings > Advanced > and click on "Custom Code."
Click on "Add Code" next to the Head - end.
Paste the code copied from your Salonized account into the field under "Enter code snippet."
Optionally, you can give the tool a name, e.g., "Salonized booking widget." The other options should be default (Add code to: All pages, Load code once, and Place code in: Body - end).
Click "Apply."
Jimdo Creator Website
Jimdo Creator Website
In your Salonized account, click on Settings at the bottom left, then go to Online Bookings > Style and Sharing > navigate to code and click 'Copy to clipboard.'
Log in to your Jimdo website and select the correct website.
Click on "Edit."
Scroll all the way down to the gray area, hover your mouse over it, click on "Add content," and then on "more elements and additions."
Select the HTML element.
Add the code copied from your Salonized account to the HTML element.
Click "Save."
Weebly Website
Weebly Website
In your Salonized account, click on Settings at the bottom left, then go to Online Bookings > Style and Sharing > navigate to code and click 'Copy to clipboard.'
Log in to your Weebly website.
Click on "Edit website."
Go to the top menu under "Settings."
In the left menu, click on "SEO."
Go to "Footer Code" and paste your Salonized code there.
Click "Save."
Click "Publish."
Existing Buttons Redirecting to the Booking Widget
After adding the booking widget button to your website, you can also redirect customers through a button (e.g., in the main menu) to the widget. The booking widget will open automatically when you click on the button in the menu bar.
WordPress Website Steps:
Log in to your (WordPress) website.
Go to Appearance > Menus.
Under "Menu Structure," find the items you added to your menu.
Click on the item, then on the right, click on the arrow next to "custom link" to expand it.
In the "URL" text box, add: #sz-booking-toggle. If you want to change the button's name, you can do so under "Navigation Label."
Click "Save menu."
WIX Website Steps:
If you have added a button on a particular page or maybe even on multiple pages that redirects to the old version of the booking widget, make these button(s) now redirect to your booking widget button visible at the bottom of each page.
Log in to your (WIX) website.
Go to the page where you have a button that still redirects to the old widget.
Click on that button and click on the hyperlink icon (see video).
Enter: #sz-booking-toggle and select the appropriate option or click enter.
Click "update" or "save."
Adding Inline Version of the Booking Widget to Your Website
Adding Inline Version of the Booking Widget to Your Website
The inline version means adding the widget to a specific page on your site. You can add the widget to multiple pages as an inline version.
Step 1: Adjust the settings for your booking widget in your Salonized account (Settings > Online bookings > Style and Sharing):
Choose the default color "paradise pink" or select your own color.
Select the display option "Code to add an open booking widget on my website."
Choose to keep the automatic width enabled (or disable if you want to custom it).
Keep the height at 700 or adjust as desired.
Step 2:
Copy the code (click "Copy to clipboard') and add it to your website.
Note: The settings you adjust in step 1 affect the code (script) you add to your website. Therefore, set the correct settings first before copying the code to add to your site. If you later modify any of these settings, the code must be re-added to your site, and the old code must be removed to implement the changes.
Weebly Website
Weebly Website
In your Salonized account, click on Settings at the bottom left, then go to Online Bookings > Style and Sharing > navigate to code and click 'Copy to clipboard.' Ensure that the widget display is set to "Code to add an open booking widget on my website."
Log in to your Weebly website.
Click on "Edit website."
Go to the top menu under “Pages” and click on the left on the page where you want to place the inline version of the booking widget.
Click on </> and drag the image to where you want it on the page.
Click on "Edit HTML Code."
Paste the code you just copied from Salonized.
Click "Publish."
Mijndomein Website
Mijndomein Website
In your Salonized account, click on Settings at the bottom left, then go to Online Bookings > Style and Sharing > navigate to code and click 'Copy to clipboard.' Ensure that the widget display is set to "Code to add an open booking widget on my website."
Log in to your Mijndomein website and go to the left to "products."
Click on "manage" next to the website builder and then "log in to website builder."
Go to the page where you want to place your inline version.
On the left, in the menu, go to "widgets" and click on "HTML" and drag it to the right on the page where you want the inline version of the booking widget.
Click on "add your custom HTML here," delete that text, and paste your Salonized code there. Click "Update."
Finally, click on "Republish" in the top right.