Knowledge Base

  2. Home
  4. Knowledge Base
  6. Online Booking Pages
  8. Embedding Your Booking Page

Embedding Your Booking Page

The “Embed” tab on the “Booking Page Details” page provides various options for embedding your Online Booking page on your website.

At the highest level, you can choose to embed an IFrame or a Book Now button on your website. An IFrame allows you to embed your online booking page onto a page on your website. You can also utilize a Book Now button to add a call-to-action button anywhere on your website. A modal will appear when a person clicks the “Book Now” button, allowing them to select an appointment time and confirm.

Embedding An IFrame

embed Apptoto online scheduling page on your website

Option 1: HTML IFrames (embeds your booking page into an existing page on your website)

Embedding your online booking page on your website can be done by

  1. Selecting the Embed > IFrame tab.
  2. Select one of the following three layouts:
    1. Wide – Week View (800px)
    2. Medium – Single Day (600px)
    3. Narrow – Single Day (350px)
  3. Copy/paste the code generated onto your site.

Note: The Week View options show the client an entire week’s worth of availability, whereas the Single Day views prompt the client to pick a day first and then pick a time on the day. For reference, the Week View is what clients see in the browser on their desktop, and the Single Day view is what clients see on their mobile devices when they access your booking page directly.

Option 2: HTML FrameSets (host the booking page on your own domain)

You can use HTML Framesets to add your Booking Page to your own domain. For example, if you own and control the domain name BookFredNow.com, then you could make your http://BookFredNow.com/ show your Apptoto booking page using the following HTML as the default document on that domain:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Fred's Booking Calendar </title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<frameset rows="100%,*" border="0">
  <frame src="https://YOURBOOKINGPAGE.apptoto.com/" frameborder="0" />
  <frame frameborder="0" noresize />
</frameset>
</html>

Embedding A Book Now Button

Embed Apptoto "Book Now" button on your website to display booking page when clicked.

 

  1. Selecting the Embed > Book Now button tab.
  2. Enter your button text in the “Button Label” field.
  3. Ensure the appropriate appointment type is displayed. If you have multiple appointment types, select “None” or the appointment type you wish to display when the button is clicked.
  4. Advanced:
    1. Button CSS: Change the CSS properties of the “Book Now” button, such as button color, font size, and border
    2. Modal CSSChange the CSS properties of the “Online Scheduling” modal, such as width, height, color, and background
  5. Copy/paste the code generated onto your site.

Pre-filling Fields

You can pre-fill fields for your clients by adding to the “query string” of the booking page URL. If you have a field named “source,” you can pre-fill that field with https://YOURBOOKINGPAGE.apptoto.com/?source=webform.

You can pre-fill custom fields as well as the standard fields (i.e., name, email, and phone).

 

Was this article helpful to you? Yes No 1