Embed Scheduling in Your App

Drop the Slatis booking widget into any website or app with a single script tag.

Script tag embed (no framework required)

The simplest integration — add to any HTML page:

<script src="https://cdn.slatis.com/widget.js" defer></script>
 
<div
  data-slatis-widget
  data-api-key="pk_live_xxxxxxxxxxxxxxxxxxxx"
  data-event-type-id="evt_01abc123"
></div>

The widget handles slot selection, the attendee form, and the confirmation screen automatically.

Configuration attributes

Attribute	Description
`data-api-key`	Your public key (`pk_live_*`)
`data-event-type-id`	Which event type to book
`data-timezone`	Pre-fill timezone (IANA, e.g. `America/New_York`)
`data-theme`	`light` or `dark` (default: `light`)
`data-locale`	BCP 47 locale for date/time formatting (default: browser locale)

React component

If you use React, import the component directly:

import { BookingWidget } from '@slatis/sdk/react'
 
export default function Page() {
  return (
    <BookingWidget
      apiKey="pk_live_xxxxxxxxxxxxxxxxxxxx"
      eventTypeId="evt_01abc123"
      onSuccess={(booking) => {
        console.log('Booked:', booking.id)
      }}
    />
  )
}

Prefill attendee data

Pass known values so the attendee doesn't have to re-enter them:

<div
  data-slatis-widget
  data-api-key="pk_live_xxx"
  data-event-type-id="evt_01abc"
  data-prefill-name="Jane Smith"
  data-prefill-email="jane@example.com"
></div>

Callbacks

Listen to booking events from the embed:

<script>
  window.addEventListener('slatis:booking:created', (e) => {
    const booking = e.detail
    // redirect, show confirmation, track analytics, etc.
    analytics.track('booking_created', { bookingId: booking.id })
  })
</script>