Rendering the booking widget

The booking widget can be embedded onto your website or mobile app to allow your customers to make bookings with you there and then.

Jubrine Fortuno avatar
Written by Jubrine Fortuno
Updated over a week ago

The Appointedd widget only requires the ability to add a small piece of HTML onto the page where it will be hosted.

This guide takes you through how to create a booking widget, or if you have an Account Manager at Appointedd, they will supply you with your HTML snippet. Simply copy the snippet, and paste it into the HTML of your website or mobile app.

Examples of HTML snippets

In embed mode, the booking widget is embedded directly in the body of the page. The HTML snippet for an embedded booking widget will be a little like this:ย 

<iframe width="100%" height="550px"
src="https://book.appointedd.com/app/UNIQUEWIDGETID"></iframe>

In popover mode, a customizable "book now" button is embedded into the body of the page. From this button, the booking widget will pop over as an overlay in front of the page. The HTML snippet for an popover booking widget will be a little like this:ย 

<button style="outline: 0;cursor:pointer;border: 0;color: #fff;padding: 10px 
20px;font-size: 20px;border-radius: 5px;background-color:#042229;"
class="appointedd-booking-popover" ap-appid="UNIQUEWIDGETID">Book now</button>
<script src="//s3-eu-west-1.amazonaws.com/appointedd-portal-assets/popover/
appointedd-button.min.js"></script>

If you have any questions, send us a message through the messenger on the bottom right, or contact your Appointedd Account Manager.


If you have any feedback we would love to hear it ๐Ÿ‘‚

Did this answer your question?