How to Embed the Appointiv Online Booking Form on Your Website

Embedding the Appointiv Online Booking Form into your website is straightforward, even if you're not familiar with web development. Modern website builders often provide a simple way to incorporate custom code, such as iFrames, which is what you'll use to add the Appointiv Online Booking Form to your site.

Step 1: Add the iFrame to Your Webpage

Here’s the basic iFrame code you’ll use to embed the online booking form. This example sets the booking form to the "Extra-Large" size, which includes all features and branding:

<p>
<iframe 
  class="appointiv-iframe" 
  title="Appointiv Booking Form" 
  src="https://yourcompany.appointiv.com/?stype=xl" 
  style="width:100%; height:960px; border:none;">
</iframe>
</p>

Copy and paste this HTML snippet into the HTML of your webpage where you want the booking form to appear.

Step 2: Make It Mobile Responsive

To ensure that the booking form looks good on all devices, including tablets and smartphones, add the following CSS to your site’s style.css or main.css file:

.appointiv-iframe {
  width: 100%;
  height: 960px;
  border: none;
}

/* Responsive styles for smaller devices */
@media screen and (max-width: 992px) {
  .appointiv-iframe {
    height: 1200px;
  }
}

@media screen and (max-width: 768px) {
  .appointiv-iframe {
    height: 1500px;
  }
}

This CSS ensures that the iFrame adjusts its height on smaller screens for optimal display.

Step 3: Customize Online Booking Form Appearance

You can customize the portion of the booking form displayed within the iFrame by changing the stype parameter in the URL. Here are the options available:

• Extra-Large (xl): Displays the full booking form, including all branding and functionality.

src="https://yourcompany.appointiv.com/?stype=xl"

• Large (l): Similar to Extra-Large, but without the top logo section.

src="https://yourcompany.appointiv.com/?stype=l"

• Medium (m): Displays only the top summary section and selection area, without the progress bar.

src="https://yourcompany.appointiv.com/?stype=m"

• Small (s): Only includes the selection area, ideal for surrounding with your own branding. 
  • Best when the booking form has the appointment type location and provider all pre-filled so the customer needs only to choose a time and date.

src="https://yourcompany.appointiv.com/?stype=s"

Conclusion

Using the stype parameter, you can control how much of the Online Booking Form is shown, allowing you to integrate it seamlessly with your website’s design. Whether you need a full-featured interface or just the crucial parts, Appointiv makes it easy to fit your needs.