Using Scheduling externally

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:

  1. 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.
  2. Create services that you want visitors to be able to book.
  3. Add staff members and associate them with the services you are providing.
  4. 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

1__Scheduling_embed_design_options.jpg

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>

 

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:

2__ezgif.com-video-to-gif-6.gif

Was this article helpful?
0 out of 0 found this helpful