widgetfied
Actions
Contact
Login

© 2026 Widgetfied

Documentation
Get Started

Cart Widget

Digital menu with AI-powered dietary recommendations, online ordering, spreadsheet POS integration, and delivery routing sync. Doubles as a standalone browsable menu for your website.

Digital Menu

Doubles as your restaurant's browsable menu page with categories, modifiers, and dietary tags

AI Menu Assistant

Customers ask about allergies, dietary needs, or mood — AI recommends items from your menu

Spreadsheet POS

Orders sync to Google Sheets as a lightweight POS

Delivery Routing

Syncs with Genius Router for optimized deliveries

AI Menu Assistant

Customers can switch to AI Recommend mode and ask natural language questions about your menu. The AI reads your entire menu — items, descriptions, dietary tags, modifiers — and recommends the right dishes. Works with any menu, no extra setup.

  • ✅ "I'm celiac — what can I eat?" → filters gluten-free items
  • ✅ "What goes good with a beer?" → mood-based recommendations
  • ✅ "Healthy options under $10" → dietary + price filtering
  • ✅ Quick suggestion chips: Popular, Vegan, Spicy, Budget-friendly
  • ✅ OpenAI-powered with client-side fallback if API is unavailable

Digital Menu — Doubles as Your Menu Page

The Cart widget isn't just for ordering — it's a full browsable digital menu with category tabs, item images, descriptions, dietary tags, and modifier groups. Embed it inline on your website and it becomes your restaurant's menu page. Customers can browse before ordering.

  • ✅ Category tabs with emoji icons and drag-to-scroll
  • ✅ Item cards with images, descriptions, prices, and dietary badges
  • ✅ Modifier bottom sheets (toppings, sizes, extras) with min/max rules
  • ✅ Search by name, dietary tag, or modifier
  • ✅ External menu mode — bind to your own HTML menu with data attributes

Spreadsheet-Based POS Integration

Every order syncs automatically to Google Sheets — one master sheet per business with full order details. Use it as a lightweight POS: track orders, manage inventory counts, and export data for accounting. No expensive POS hardware required.

  • ✅ Orders auto-append to your Google Sheet in real-time
  • ✅ Full order details: items, modifiers, prices, customer info, status
  • ✅ Works with any spreadsheet workflow — pivot tables, dashboards, exports

Delivery Routing with Genius Router

The Cart Widget feeds delivery orders directly into the Genius Router — our VRPTW route optimization engine. Import orders by date, optimize multi-stop delivery routes, and track drivers in real-time. Cart + Router together give you a complete order-to-doorstep pipeline.

  • ✅ Import today's delivery orders as route stops in one click
  • ✅ Optimize delivery sequence with time windows and vehicle constraints
  • ✅ Live GPS tracking and turn-by-turn navigation for drivers
⚡

Order-After-Payment Architecture

Orders are created only after successful payment via Stripe Connect. No abandoned orders, no unpaid invoices — funds go directly to your bank account.

  • ✅ No abandoned or unpaid orders in your system
  • ✅ Funds deposited directly to your Stripe account
  • ✅ Automatic order tracking to Google Sheets

Quick Start

1. Add the Cart Widget Container

<!-- 1. Cart Widget Container -->
<div id="qt-cart"
  data-widget="cart"
  data-tenant="YOUR_TENANT_ID"
  data-container="qt-cart"
  data-display-mode="button"
  data-show-toast="true">
</div>

<!-- 2. Load the widget script (before </body>) -->
<script type="module" 
  src="https://cdn.widgetfied.com/portal.js">
</script>

Replace YOUR_TENANT_ID with your actual tenant ID. The widget loads your menu from the dashboard configuration and syncs orders to your Google Sheet.

2. (Optional) External Menu Mode — Add Menu Items

<!-- Menu Item Card (optional - for external menu mode) -->
<article class="menu-item"
  data-product-id="spring-rolls-001"
  data-product-name="Crispy Spring Rolls"
  data-product-price="899"
  data-product-image="https://example.com/spring-rolls.jpg"
  data-product-description="Crispy vegetable spring rolls with dipping sauce">
  
  <img src="https://example.com/spring-rolls.jpg" alt="Spring Rolls">
  <h3>Crispy Spring Rolls</h3>
  <p>$8.99</p>
  
  <!-- Just add data-cart-add to any button! -->
  <button data-cart-add>🛒 Add to Order</button>
</article>

External menu mode: the widget auto-binds to buttons with data-cart-add. For in-widget menu mode, your menu is configured entirely in the dashboard.

Menu Management

Build your entire menu in the dashboard. No code needed for in-widget menu mode.

Categories

Organize items into categories (Appetizers, Mains, Desserts, Drinks, etc.) with custom emoji icons

Menu Items

Name, price (in cents), description, image URL, prep time, dietary tags (vegan, gluten-free, etc.)

Modifier Groups

Add-ons like "Dipping Sauce" or "Extra Toppings" with min/max selections and price adjustments

Availability

Toggle items as sold out without removing them from the menu

Popular Items

Flag items as popular to highlight them in the widget

All prices are stored in cents (e.g., 899 = $8.99). The widget handles display formatting automatically.

Restaurant Information

Set up your restaurant profile shown to customers in the widget.

Cuisine Type

Pizza, Thai, Mexican, American, etc.

Restaurant Address

Physical location for delivery radius calculations

Restaurant Phone

Contact number shown on receipts and in the widget

Operating Hours

Per-day open/close times with closed-day toggle

Delivery Configuration

Configure delivery fees, zones, tipping, and cancellation policies in the dashboard.

Minimum Order

Minimum order amount before delivery is available (e.g., $15.00)

Base Delivery Fee

Flat delivery fee added to all orders (e.g., $3.99)

Service Fee

Percentage-based service fee (e.g., 15%)

Delivery Radius

Maximum delivery distance in miles from your restaurant

Tipping

Enable/disable tipping with preset percentages (15%, 18%, 20%, 25%)

Tax Rate

Your local tax rate set once in the dashboard (e.g., 8.25%)

Order Scheduling

Allow customers to place orders for a future delivery time.

Minimum Lead Time

Soonest a customer can schedule from now (e.g., 30 minutes)

Max Advance Days

How far ahead customers can schedule (e.g., 7 days)

Time Slot Duration

Granularity of available delivery slots (15, 30, or 60 minutes)

Scheduling respects your configured operating hours — customers cannot schedule outside business hours.

Widget Container Attributes

Required and optional attributes for the cart widget container:

Required

data-widget"cart"

Identifies this as a cart widget

data-tenant"YOUR_TENANT_ID"

Your unique tenant identifier

data-container"unique-id"

Must match the container element ID

Optional

data-display-mode"button" | "inline" | "modal"

How the widget is displayed (default: button)

data-show-toast"true" | "false"

Show toast notifications when items are added (default: true)

How It Works

1

Customer Browses Menu

Menu categories and items are loaded from your dashboard configuration. Customers can filter by dietary tags.

2

Adds Items to Order

Customer selects items, customizes with modifiers, and adds to their order.

3

Reviews Order

Customer sees items, quantities, subtotal, delivery fee, service fee, tax, and tip in the order summary.

4

Enters Delivery Details

Customer provides name, email, phone, delivery address, and optional scheduled delivery time.

5

Secure Payment

Payment processed via Stripe Connect — funds go directly to your restaurant's account.

6

Order Created

Order is created AFTER successful payment. Synced to Google Sheets for tracking.

Display Modes

Button Mode

Recommended
data-display-mode="button"

Shows a floating order button. Best for restaurant websites with existing content.

Modal Mode

data-display-mode="modal"

Menu stays hidden until opened programmatically. Perfect for custom integrations.

Inline Mode

data-display-mode="inline"

Renders the full menu and ordering flow directly in the container. Good for dedicated ordering pages.

Button Styles

Customize how your floating order button appears:

Icon Only

icon

Shows order icon only (default)

Text Only

text

Shows custom text like "Order" or "Menu"

Icon + Text

both

Shows both icon and text together

Configure button style in your dashboard under White-Label → Cart → Button Style

Dashboard Configuration

Configure your cart widget in the dashboard:

Stripe Connect

Required
Settings → Payments

Connect your Stripe account to receive payments directly

Google Sheets

Settings → Integrations

Set up orders spreadsheet for automatic order tracking

Restaurant Info

Required
White-Label → Delivery → Restaurant

Cuisine type, address, phone, and operating hours

Menu

Required
White-Label → Delivery → Menu

Categories, items, modifiers, and pricing

Delivery Fees

Required
White-Label → Delivery → Delivery

Minimum order, delivery fee, service fee, and tax rate

Scheduling

White-Label → Delivery → Scheduling

Enable scheduled orders with lead time and time slots

Button Style

White-Label → Delivery → Button Style

Choose icon, text, or both for the order button

Cancellation Policy

Configure cancellation rules in the Delivery tab:

  • Toggle cancellations on/off
  • Set cancellation window (e.g., 10 minutes after placing order)
  • Choose refund policy: full, partial, or no refund
  • Optional approval requirement for cancellation requests

Google Sheets Order Tracking

Orders are automatically logged to Google Sheets for easy tracking:

  • One master spreadsheet per restaurant with tabs for each customer
  • Automatic order reference numbers (e.g., ORD-20260204-ABC1)
  • Full order details: items, quantities, modifiers, prices, totals
  • Customer information: name, email, phone, delivery address
  • Delivery fees, service fees, tax, tips, and timestamp tracking

Set up your Orders Spreadsheet ID in Settings → Business Info → Google Sheets Integration

Requirements

  • Active Widgetfied subscription (Growth plan or higher)
  • Stripe Connect account configured
  • Valid business information for Stripe
  • SSL certificate on your website (https://)
  • Google Sheets (optional, for order tracking)
  • Restaurant menu configured in the dashboard

Troubleshooting

Widget not appearing
  • • Verify data-tenant matches your tenant ID exactly
  • • Check that data-widget="cart" is spelled correctly
  • • Ensure script tag is after the widget container
  • • Open DevTools (F12) → Console for errors
Payment not processing
  • • Verify Stripe Connect is configured in dashboard
  • • Check your Stripe account is in good standing
  • • Ensure customer entered valid card details
  • • Check for Stripe webhook errors in dashboard
Orders not appearing in Google Sheets
  • • Verify Orders Spreadsheet ID is set in settings
  • • Check Google Sheets integration is connected
  • • Ensure the spreadsheet has proper sharing permissions
  • • Check API logs for any sheet sync errors
Menu not loading
  • • Verify you have at least one category with items in the dashboard
  • • Check that menu mode is set to "in-widget"
  • • Ensure items have valid prices (in cents)
  • • Confirm operating hours allow ordering at current time

Related Documentation

Genius Router — Delivery Route OptimizationWidget Embed GuidePayment WidgetGoogle Sheets SetupWhite-Label Settings
Previous
Payment Widget
Accept payments
Next
Genius Router
Multi-stop route optimization
⚡ Quick setup
🚀 Get Started
DOCS