You can embed the Scheduling wizard on any external platform and, thereby, accept bookings directly from other websites, Facebook, listings pages, or anywhere else that supports embedded HTML. Appointments booked through external platforms will appear in your Calendar view in the Editor.
Before you embed Scheduling
Walk through the steps below to successfully configure Scheduling and prepare for taking bookings:
- Set up your basic configuration, including supported languages and currencies, your business information, opening hours, the texts you want to appear in the Scheduling wizard, etc.
- Create services that you want visitors to be able to book.
- Add staff members and associate them with the services you are providing.
- Familiarize yourself with Scheduling's calendar view where you manage pending appointments and manually create new appointments as well.
SSL certificate required
Most external platforms require that any embedded content is hosted on a domain with an SSL certificate added in order to ensure encrypted data transfer. Many external platforms prevent non-SSL-protected embedded content from displaying, including the Scheduling wizard overlay if SSL has not been enabled. If your subdomain or domain doesn't have an SSL certificate installed, please contact your digital services provider and request one.
Option 1: Embed the Scheduling wizard on an external platform
Once you've set up your basic configuration, services and staff members, you're ready to embed Scheduling on your external platform of choice.
Ensure that the external platform supports embedded content
Before you attempt to embed Scheduling, make sure that the external platform supports embedded HTML. Look for options to add "HTML code", "code snippet", "iframe", "embed code", "custom HTML", or similar. Consult the platform's technical documentation or support resources if you're unsure about where to paste external HTML code.
First, in the Editor, head to Scheduling > Settings > Widget embed where you can configure the appearance of the Scheduling booking button that you will be embedding on the external platform.
Input the text you want to show on the button, select from four different design options, and pick a button color.
You can choose between the following four pre-defined design options:
- Sharp corners, no shadow
- Sharp corners, with shadow
- Rounded corners, no shadow
- Plain text link
The embed code at the bottom of the screen will change depending on the design option you select for your button.
On the external platform where you wish to embed Scheduling, paste the code snippet into the location of your choice.
Working with multiple languages
If you are offering Scheduling in multiple languages, you can alter the embed code after you've pasted it to show the Scheduling wizard in the language of your choice. For example, if you want the wizard to show in French, make the following change:
<a href="#" id="schwiz-ifr-btn" data-url="//u1119527.yourdomain.com/s"
data-locale="fr">Book now</a>
Update embed code if your site domain changes
When you retrieve an embed code from the Editor, it will reference your current website domain, for example //u1119527.yourdomain.com. If you subsequently change your domain, it's important that you remember to update the embed code accordingly so it references the correct domain. The easiest way to do this is to generate a new embed code right after you've switched domains and then use that to replace the old code on the third-party platform.
Styling the button after you've embedded it
After you've pasted the embed code onto the external platform, you can make changes to it in order to modify the styling and appearance of the button. Bigger styling changes may require some fundamental knowledge of CSS, but it's easy to make minor changes such as changing the button color.
How to change button text color
In the embed code, look for the following parameter:
color: #fff;
Change fff to any HEX color code of your choice.
How to change button background color
In the embed code, look for the following parameter:
background: #ab1234;
Change ab1234 (or whatever number/digit combination you see in the embed code) to any HEX color code of your choice.
How to change the size of the button
In the embed code, look for the following parameter:
padding: 16px 20px;
The first number (16px) defines the amount of top and bottom spacing between the button text and the button border. The second number (20px) defines the amount of right and left spacing between the button text and the button border. Change the numbers to modify the size of your button to your liking.
Option 2: Create a link to your website and automatically trigger the Scheduling wizard
If you already have Scheduling set up on your website, you can create a link that immediately triggers the Scheduling wizard when clicked. You can insert this link anywhere you please, for example in an email signature.
Requirements for this option to work
In order to be able to use this option you must have a website in the Editor with a Scheduling button added on the page URL you are linking to. If you don't have a Scheduling button on the page, the Scheduling wizard cannot be triggered.
You generate this link by simply adding /#showBooking at the end of your URL (please ensure that the B remains capitalized). For example, if you have a Scheduling button on the page https://www.infinityhairstudio/book-time, your link URL would be https://www.infinityhairstudio/book-time/#showBooking. Once clicked, the page will open up in the visitor's browser and immediately trigger the Scheduling wizard.
Example of link inserted in an email:
