MotoTote Selector Widget Implementation Guide

Quick Start

Add the MotoTote selector widget to your website by including these two lines in your HTML:

<!-- Add the CSS file in your <head> tag -->
<link rel="stylesheet" href="https://oscarmorrison.com/mototote-selector/assets/index.css">

<!-- Add this where you want the widget to appear -->
<div id="mototote-selector"></div>

<!-- Add the JavaScript file just before your closing </body> tag -->
<script src="https://oscarmorrison.com/mototote-selector/assets/mototote-widget.js"></script>

Example Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website - MotoTote Selector</title>
    <link rel="stylesheet" href="https://oscarmorrison.com/mototote-selector/assets/index.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    
    <!-- The widget will appear here -->
    <div id="mototote-selector"></div>

    <script src="https://oscarmorrison.com/mototote-selector/assets/mototote-widget.js"></script>
</body>
</html>

Features

Customization

The widget automatically inherits your website's font styles. If you want to override the default styles, you can add your own CSS:

/* Custom CSS examples */
#mototote-selector {
    max-width: 900px;  /* Change maximum width */
    margin: 2rem auto;  /* Adjust margins */
}

#mototote-selector select {
    /* Customize dropdown styles */
    border-color: #your-color;
    background-color: #your-bg-color;
}

#mototote-selector button {
    /* Customize button styles */
    background-color: #your-brand-color;
}
Note: The widget requires a container element with the ID mototote-selector. Make sure this ID is unique on your page.

Testing

To test the widget implementation, add ?test=true to your URL. This will enable a "Test Fill" button that populates the form with sample data.

Live Demo

See the widget in action: https://oscarmorrison.com/mototote-selector/