spork-digital-menu
v1.0.4
Published
An embeddable widget for rendering Spork digital menus.
Readme
Spork Digital Menu
An embeddable Vanilla JS widget that allows restaurant owners to display their Spork digital menus directly on their own websites.
Installation
You can embed the widget in any HTML page using a simple script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Restaurant</title>
</head>
<body>
<!-- 1. Add a container with your Spork Zone ID -->
<!-- Optional: Add data-restaurant-id="YOUR_RESTAURANT_ID" to improve initial loading performance -->
<div id="spork-menu" data-zone-id="YOUR_ZONE_ID_HERE" data-restaurant-id="YOUR_RESTAURANT_ID_HERE"></div>
<!-- 2. Import the widget script -->
<script src="https://unpkg.com/spork-digital-menu@latest/dist/spork-digital-menu.umd.cjs"></script>
<!-- 3. Mount the widget -->
<script>
document.addEventListener('DOMContentLoaded', () => {
if (window.SporkDigitalMenu) {
window.SporkDigitalMenu.mount('#spork-menu')
}
})
</script>
</body>
</html>Usage in NPM Projects
If you are using a modern build pipeline (Webpack, Vite, etc.), you can install the package via NPM:
npm install spork-digital-menuThen import and use it in your JavaScript:
import 'spork-digital-menu'
// It registers a custom element: <spork-digital-menu>
const menuWidget = document.createElement('spork-digital-menu')
menuWidget.setAttribute('zone-id', 'YOUR_ZONE_ID_HERE')
// Optionally, specify a restaurant-id
// menuWidget.setAttribute('restaurant-id', 'YOUR_RESTAURANT_ID_HERE')
document.body.appendChild(menuWidget)Features
- Zero Dependencies: Built with Vanilla JS and native Web Components (Shadow DOM) to guarantee zero style conflicts with your host website.
- Auto-Translation: Automatically detects and provides a dropdown for any translation languages configured in your Spork dashboard.
- Tabbed Interface: Automatically generates tabs if you have multiple active menus (e.g., Lunch Menu, Dinner Menu).