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.
Extra-Large (the full webform minus the background)
Large (no top logo visible)
Medium (only shows the top summary section and selection area)

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
-
Comments
0 comments
Please sign in to leave a comment.