online menu for a restaurant or izakaya

how to set it up

1. claim your handle

sign up and claim a handle for your restaurant. something short and memorable — sakuratei, kaze-cafe, tonkatsu. with a business plan you can use handles as short as one character.

2. enable the menu plugin

dashboard → your handle → plugins → enable menu & orders. this unlocks the full menu management system.

3. configure your settings

in the plugin settings, configure the basics:

• currency — JPY, USD, EUR, or any ISO 4217 code
• tax — rate and whether prices are tax-inclusive or exclusive
• order types — dine-in, takeout (enable any combination)
• business hours — per-day schedule with timezone support
• service charge — optional percentage added to orders
• customer fields — choose which info to collect (name, phone, email)
• announcement — a message shown to customers before ordering

4. build your menu

add categories, then add items to each category. each item can have:

• variants — different sizes or options with separate prices (regular ¥800, large ¥1,100)
• modifier groups — customizations like spice level, toppings, add-ons (required or optional, with price adjustments)
• allergens — gluten, dairy, nuts, shellfish, eggs, soy, and more
• dietary flags — vegan, vegetarian, halal, kosher, gluten-free
• images — upload photos for each item and category
• stock — set available quantity or mark as unlimited
• featured — highlight signature dishes
• tags — custom labels like "popular", "seasonal", "chef's pick"

5. generate your page with AI

open the AI assistant and describe your restaurant's style. the AI reads your menu data — categories, items, prices, images — and generates a complete ordering page.

"build a menu page for a Japanese izakaya.
dark, moody atmosphere with warm accents.
show categories as tabs, items as cards with images.
include an order cart with item count and total.
show allergen icons on each item."

the AI generates working HTML with a full ordering flow: browse → add to cart → customize modifiers → enter customer info → place order. everything is wired to the menu SDK automatically.

managing orders

when a customer places an order, it appears in your dashboard in real time. the order dashboard shows:

• order queue — incoming orders with auto-refresh
• status workflow — received → confirmed → preparing → ready → completed (or cancelled)
• order details — items, quantities, modifiers, customer notes, table number
• print — print individual orders for the kitchen
• export — download order history as CSV
• analytics — popular items, revenue by day/week/month

you can also toggle accepting orders on or off instantly — useful for busy periods or when the kitchen is closing.

for developers: the menu SDK

if you want to build your own ordering page from scratch, the SDK gives you full access to your menu data and ordering system. no framework required — just HTML and the bb object.

loading the menu

bb.onReady(async function() {
  var menu = await bb.menu.getMenu();

  // menu.config — currency, tax, order types, hours
  // menu.categories — array of categories with items

  menu.categories.forEach(function(cat) {
    cat.items.forEach(function(item) {
      // item.name, item.description, item.image
      // item.variants — [{name, price, stock}]
      // item.allergens — ["gluten", "dairy"]
      // item.dietaryFlags — ["vegan"]
      // item.modifiers — [{name, options, required}]

      var price = item.variants[0].price;
      var formatted = bb.formatPrice(price, menu.config.currency);
      // "¥800", "$12.99", "€9,50"
    });
  });
});

placing an order

var result = await bb.menu.order({
  items: [
    {
      variantId: "variant-id-here",
      quantity: 2,
      note: "extra ginger please",
      modifiers: [
        { groupId: "spice-group", optionId: "medium" }
      ]
    }
  ],
  customer: { name: "Tanaka", phone: "090-1234-5678" },
  type: "dine-in",
  tableNumber: "5"
});

// result.orderNumber — e.g. 42
// result.totalAmount — total in smallest currency unit
// result.serviceCharge — service charge amount
// result.status — "received"

checking business hours

var menu = await bb.menu.getMenu();

if (!menu.config.acceptingOrders) {
  // show "currently closed" message
  if (menu.config.closedReason) {
    // e.g. "Outside business hours"
  }
  if (menu.config.nextOpenTime) {
    // e.g. "Opens at 11:00"
  }
}

example: a neighborhood izakaya

you run a small izakaya called Sakura-tei. you claim sakuratei as your handle and set up a subdomain at sakuratei.bb.bi.

you add your menu: categories for 前菜 (appetizers), 焼き鳥 (yakitori), 刺身 (sashimi), ドリンク (drinks). each yakitori item has a "salt or sauce" modifier group. you mark items with allergens and flag the edamame as vegan.

you ask the AI to build a menu page with a dark theme, vertical category navigation, and a sticky order summary. the AI generates the page with your actual menu data — categories, prices, allergen icons, modifier selectors, and a checkout flow.

sakuratei.bb.bi              → menu & ordering page
sakuratei.bb.bi              → "table 3, 2x negitoro, 1x karaage"

dashboard → orders           → order #47 received
                             → confirmed → preparing → ready

customers scan a QR code at the table, browse the menu on their phone, and place an order. you get a notification in the dashboard. update the status as the kitchen works through orders. at the end of the night, export the day's orders as CSV.

why go digital?

everything included