@appointlet/appointlet.js
v3.0.7
Published
JavaScript SDK for Appointlet.
Downloads
103
Readme
@appointlet/appointlet.js
Appointlet JavaScript SDK for adding your booking page to your website.
Installation
# NPM
npm install @appointlet/appointlet.js
# Yarn (please note we only support yarn 1.X at this time)
yarn add @appointlet/appointlet.jsUsage
There are two ways you can render the scheduling page on your website:
- A modal that is opened after the user takes some action.
- An inline embed directly into your website.
Both methods require a valid Appointlet scheduling page link (e.g. https://appt.link/your-scheduling-page).
import Appointlet from '@appointlet/appointlet.js'
// Styles can be imported from
import '@appointlet/appointlet.js/dist/appointlet.min.css'
// Create an instance of the Appointlet object, passing in your scheduling page URL.
const appointlet = new Appointlet('https://appt.link/your-scheduling-page')
// Open the scheduling page in a modal layout.
// This returns the bookingData if completed and null if canceled
const meetingData = await appointlet.openModal()
// Embed the scheduling page into a DOM node on the page.
// This returns the bookingData if completed and null if canceled
const meetingData = await appointlet.inlineEmbed(
document.getElementById('place-to-put-the-scheduling-page')
)Loading snippet from CDN
The script loads on either document:DOMContentLoaded or window:load events
For best effect do not use async on the script tag, it can cause the script to miss the document:DOMContentLoaded event this will delay loading until the window:load event triggers.
<html>
<body>
<script defer src="https://js.appointlet.com/"></script>
<link href="https://js.appointlet.com/styles.css" rel="stylesheet" />
<div
class="appointlet-inline"
data-appointlet-inline="https://appt.link/your-scheduling-page"
></div>
</body>
</html>TypeScript
We're working on proper typings, but these should work in a pinch.
declare class Appointlet {
constructor(link: string)
inlineEmbed: (el: Element) => Promise<SchedulerAttendeeNode | null>
openModal: () => Promise<SchedulerAttendeeNode | null>
}