@vennio/widget

Embed a booking and scheduling widget with 2 lines of HTML. Drop it into any website — no framework required.

Keywords: booking widget · scheduling widget · embed booking · calendar embed · appointment booking · no-framework scheduling

Quick Start

<script src="https://unpkg.com/@vennio/widget"></script>
<div data-vennio-booking data-shortcode="your-shortcode"></div>

That's it! Replace your-shortcode with your Vennio booking link shortcode.

Options

Customize the widget with data attributes:

<div
  data-vennio-booking
  data-shortcode="abc123"
  data-height="600px"
  data-width="100%"
></div>

| Attribute | Default | Description | |-----------|---------|-------------| | data-shortcode | (required) | Your Vennio booking link shortcode | | data-height | 700px | Widget height | | data-width | 100% | Widget width | | data-base-url | https://vennio.app | Custom Vennio URL (for self-hosted) |

Programmatic Usage

You can also initialize widgets programmatically:

import { init } from '@vennio/widget'

const container = document.getElementById('booking')

init(container, {
  shortcode: 'abc123',
  height: '600px',
  onBooked: (booking) => {
    console.log('Booking completed!', booking)
  }
})

Framework Integration

React

import { useEffect, useRef } from 'react'
import { init } from '@vennio/widget'

function BookingWidget({ shortcode }) {
  const containerRef = useRef(null)

  useEffect(() => {
    if (containerRef.current) {
      init(containerRef.current, { shortcode })
    }
  }, [shortcode])

  return <div ref={containerRef} />
}

Vue

<template>
  <div ref="container" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { init } from '@vennio/widget'

const props = defineProps(['shortcode'])
const container = ref(null)

onMounted(() => {
  init(container.value, { shortcode: props.shortcode })
})
</script>

Get Your Shortcode

1. Sign up at vennio.app
2. Connect your calendar
3. Create a booking link
4. Copy the shortcode (the short string at the end of your booking URL)

Size

• IIFE (for <script> tag): ~2KB
• ESM/CJS: ~1.5KB

Documentation

Full reference: docs.vennio.app

License

MIT