Embed our webform in your website using iFrame

You can easily add your Appointiv webform to your website using our simple iFrame code.  This is very basic functionality for any web developer but, even if that's above your paygrade, you're still in luck because most modern website template tools allow you to easily create a section within your page that will run this simple code.

Here's my actual webform embedded into this page 

By the way - If you came here from our Appointiv Answer Bot then welcome!  Please use the form below to schedule a booking with me. Whether you need help setting up our app or have any other questions, I'm here to assist you. I look forward to working with you.  

(note, this demonstrates the "large-size" option along with prefilled flow where I pre-selected the Appointment Type and Service Provider)

Here is the basic iFrame code sample: (full size webform)

<p>
<iframe 
  class="appointiv-iframe" 
  title="Iframe" 
  src="https://yourcompany.appointiv.com/?stype=xl">
</iframe>
</p>

To make it mobile responsive, add this to your '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;
  }
}

Customize the way the webform looks in the iFrame

You can change the way the embedded webform looks by adding a simple webhook.  We offer the choice of Small, Medium, Large, or Extra-Large to determine how much of the webform is included in the iFrame.

Here is a graphical representation of the different sizes

Extra-Large (the full webform minus the background)

This includes the full webform with all of it's functionality and branding visible within the iFrame.

Make your URL look something like this:  https://yourcompany.appointiv.com/?stype=xl

Large (no top logo visible)

Same as the XL version but hide the Logo from the top.

Make your URL look a little more like this:  https://yourcompany.appointiv.com/?stype=l

Medium (only shows the top summary section and selection area)

Same as the L version but hide the progress bar.

Make your URL look a little more like the one below:  https://yourcompany.appointiv.com/?stype=m

Small (selection area only - surround with your own branding and graphics)

Nothing but the lower section - no branding, no summary - just the bizness

An example to make it look like the one below:  https://yourcompany.appointiv.com/?stype=s

And here's a little summary for those who like to skip to the end:

You can use our webhook parameter for displaying different portions of the webform

• The parameter is ?stype=

• The options you can choose are s, m, l, xl

• Each "size" relates to showing a different portion of our webform

  • xl = Extra Large = full new webform without the external border

  • l = Large = same as the extra-large version but hide the logo

  • m = Medium = same as the large version but hide the progress bar

  • s = Small = same as the medium version but hide the summary section

    • Small is great for surrounding with your own branding because this smallest version only includes the area of the webform where your customer makes their selections