🚌 Bus Charter Widget

Multiple Instance Demo

✨ Multiple Instance Support

This demo shows the widget's ability to initialize on multiple elements. Below you'll see three widget instances:

All instances are initialized from a single createWidget() call with widgetId: 'demo-local'

Widget #1: ID Selector #demo-local
Widget #2: Class Selector .demo-local
Widget #3: Class Selector .demo-local

🔧 How to Embed This 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.