🚌 Bus Charter Widget

1. Add Container HTML

<!-- Option A: Single widget using ID -->
<div id="bushire-nz"></div>

<!-- Option B: Multiple widgets using class -->
<div class="bushire-nz"></div>
<div class="bushire-nz"></div>

<!-- Option C: Mix both (ID and class) -->
<div id="bushire-nz"></div>
<div class="bushire-nz"></div>

Place container div(s) where you want the widget to appear. Use an ID selector for a single widget or a class selector for multiple widgets. The widget will initialize on all matching elements based on your widgetId config.

2. Include Widget Script

<script type="module"
        src="https://your-widget-domain.com/demo.js"></script>

Add this script tag to load the widget. The config is now embedded in the JS file.

3. Create Custom Entry Points

// your-site.js
import createWidget from './main.js';

const yourConfig = {
  widgetId: "your-site", // Used to find #your-site or .your-site
  theme: {
    primary: "#your-color",
    accent: "#your-accent"
  },
  api: {
    proxyBase: "https://your-api.com/api"
  },
  branding: {
    logoUrl: "https://your-site.com/logo.png"
  },
  features: {
    viaStops: true,
    maxViaStops: 5,
    returnTrips: true,
    fileUpload: true
  },
  // ... rest of your config
};

createWidget(yourConfig);

Create custom JS files with embedded configuration. The widget will automatically initialize on all elements matching #widgetId or .widgetId. DOM ready state is handled automatically.

4. Listen for Custom Events

The widget dispatches custom events that you can listen to for tracking, analytics, or custom integrations.

form_submission_new

Fired when a booking form is successfully submitted. Use this to track conversions, send data to analytics, or trigger custom workflows.

window.addEventListener('form_submission_new', (event) => {
  const { formData, timestamp } = event.detail;

  // Example: Send to analytics
  console.log('Booking submitted:', formData.orderId);

  // Access the full payload
  console.log('Order ID:', formData.orderId);
  console.log('Contact:', formData.contactName, formData.contactEmail);
  console.log('Submitted at:', timestamp);
});

Event Payload Structure:

{
  detail: {
    formData: {
      orderId: number,           // Unique order reference
      vehicleType: string,       // e.g., "mini-bus", "coach"
      journeyType: string,       // e.g., "one-way", "return", "charter"
      passengers: number,        // Number of passengers
      suitcaseLuggage: number,   // Number of large luggage items
      handLuggage: number,       // Number of hand luggage items
      pickupLocation: {
        address: string,         // Full address text
        lat: number,             // Latitude coordinate
        lng: number              // Longitude coordinate
      },
      destination: {
        address: string,         // Full address text
        lat: number,             // Latitude coordinate
        lng: number              // Longitude coordinate
      },
      pickupDate: string,        // Format: "DD/MM/YYYY"
      pickupTime: string,        // Format: "HH:MM"
      returnDate: string | null, // For return trips
      returnTime: string | null, // For return trips
      charterDuration: string | null, // For charter bookings
      contactName: string,       // Full name (first + last)
      contactEmail: string,      // Email address
      phoneNumber: string,       // Phone (spaces removed)
      contactPreferences: string[], // e.g., ["email", "phone"]
      bookingDetails: string     // Additional notes/details
    },
    timestamp: string            // ISO 8601 format
  }
}