For the complete documentation index, see llms.txt.

Booking Widget

@vennio/widget is a drop-in iframe widget. Two lines of HTML embed the full booking flow on any page. When a booking completes, an onBooked callback fires with the booking details.

Installation

CDN (no build step):

<script src="https://unpkg.com/@vennio/widget"></script>

npm:

npm install @vennio/widget

HTML embed (auto-init)

Place a div with data-vennio-booking and the script tag. The widget initialises automatically:

<script src="https://unpkg.com/@vennio/widget"></script>
<div
  data-vennio-booking
  data-shortcode="your-shortcode"
  data-height="700px"
  data-width="100%"
></div>

JavaScript embed (programmatic)

For more control, initialise the widget from your own code:

import { init } from '@vennio/widget'

init(document.getElementById('booking-widget'), {
  shortcode: 'your-shortcode',
  onBooked: (data) => console.log('Booked:', data)
})

Options

Option Type Default Description
shortcode string — Required. The Venn Link shortcode to embed
baseUrl string https://api.vennio.app Override the API base URL
height string 700px Height of the iframe (any valid CSS dimension)
width string 100% Width of the iframe (any valid CSS dimension)
onBooked (data: BookingData) => void — Callback fired when a booking completes

BookingData callback shape

interface BookingData {
  bookingId: string
  startTime: string   // ISO 8601
  endTime: string     // ISO 8601
  customerName: string
  customerEmail: string
}

Customization

height and width accept any valid CSS dimension (e.g. 600px, 80vh, 100%). Theming inside the booking form is not supported — the UI is rendered inside a hosted iframe page.

Gotchas