@vetomatic/widget

Embeddable widget for integrating Vetomatic into veterinary business software.

Installation

Via package manager

# npm
npm install vetomatic/vetomatic-widget

# yarn
yarn add vetomatic/vetomatic-widget

# pnpm
pnpm add vetomatic/vetomatic-widget

Usage

Via CDN (script tag)

<script src="https://cdn.jsdelivr.net/npm/@vetomatic/widget/dist/index.global.js"></script>
<script>
  const widget = new Vetomatic.VetomaticWidget({
    apiKey: 'your-api-key',
    userId: 'user-123',
    consultationId: 'consultation-456',
    slots: {
      trigger: '#vetomatic-trigger',
      recorder: '#vetomatic-recorder',
    },
    onError: (error) => console.error(error),
  });

  widget.mount();
</script>

Via ES module

import { VetomaticWidget } from '@vetomatic/widget';

const widget = new VetomaticWidget({
  apiKey: 'your-api-key',
  userId: 'user-123',
  consultationId: 'consultation-456',
  slots: {
    trigger: '#vetomatic-trigger',
    recorder: '#vetomatic-recorder',
  },
  onError: (error) => console.error(error),
});

await widget.mount();

// When done
widget.unmount();

Options

• apiKey (string, required) — API key for authentication
• userId (string, required) — User identifier
• consultationId (string, required) — Consultation identifier
• slots (Record<SlotName, string>, required) — CSS selectors for widget slots
• onError ((error: Error) => void, optional) — Error callback

Slot Names

trigger · prepare · recorder · qr_code · detail · backup

Events

The widget dispatches custom events on document:

• vetomatic:mounted — slot mounted (detail: slot name)
• vetomatic:unmounted — slot unmounted (detail: slot name)