🏍️ MotoTote Widget Demo

This page demonstrates how to embed the MotoTote vehicle compatibility widget on any website.

📋 Basic Usage

Simply include the widget script and add a div with the correct ID:

<script src="https://oscarmorrison.com/mototote-selector/widget.js"></script>
<div id="mototote-widget"></div>
      

Live Widget Demo

⚙️ Advanced Usage

You can also initialize the widget manually with custom options:

<script src="https://oscarmorrison.com/mototote-selector/widget.js"></script>
<div id="my-custom-widget"></div>
<script>
  MotoToteWidget.init('my-custom-widget', {
    baseUrl: 'https://oscarmorrison.com/mototote-selector/',
    theme: 'custom'
  });
</script>
      

Custom Container Demo

🎨 Multiple Widgets

You can have multiple widgets on the same page:

<div class="mototote-widget"></div>
<div class="mototote-widget"></div>
      

Multiple Widgets Demo

Widget 1

Widget 2

📚 API Reference

// Initialize widget in specific container
MotoToteWidget.init(containerId, options)

// Initialize all widgets on page
MotoToteWidget.initAll(options)

// Options:
{
  baseUrl: 'https://oscarmorrison.com/mototote-selector/', // Data source URL
  theme: 'default' // Theme name
}
      