Menoo Widget

Integration guide for the Menoo widget to enable online ordering on your restaurant's website

What is the Menoo Widget?

The Menoo Widget is an easy-to-integrate JavaScript solution that lets you add full online ordering functionality directly to your restaurant's website. Customers can browse the menu, add items to the cart, and complete orders without ever leaving your site.

Key Features

Simple Integration: Just a few lines of code to add the widget
Multi-Language: Support for Romanian, English, and Russian
Responsive: Works seamlessly on desktop and mobile
Customizable: Flexible configuration to suit your needs
Cross-Domain: Works on any domain without restrictions

Quick Integration

Add the SDK

Add the following code to your HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>Restaurant - Meniu Online</title>
  </head>
  <body>
    <!-- Container pentru widget -->
    <div id="menoo-widget"></div>

    <!-- Inițializare widget -->
    <script type="module">
      import MenooSDK from 'https://widget.menoo.ro/v1/menoo-sdk.js';

      await MenooSDK.init({
        restaurantId: 'YOUR_RESTAURANT_ID', // Înlocuiți cu ID-ul restaurantului dvs.
        container: '#menoo-widget',
        language: 'ro', // ro, en, sau ru
      });
    </script>
  </body>
</html>

Get Your Restaurant ID

Your restaurant ID can be found in:

Partners Dashboard -> Settings -> Integrations
Or in the URL of your admin page

Advanced Configuration

Init Options

await MenooSDK.init({
  restaurantId: 'YOUR_RESTAURANT_ID', // Obligatoriu
  container: '#menoo-widget', // Selector CSS sau element HTML
  language: 'ro', // ro, en, ru (implicit: ro)
  stickyOffset: 80, // Offset pentru poziționare sticky (implicit: 0)
});

Widget API

After initialization, you can interact with the widget:

// Obține informații despre coș
const cart = MenooSDK.getCart();
console.log('Coș:', cart);

// Obține numărul de produse
const itemCount = MenooSDK.getItemCount();
console.log('Produse în coș:', itemCount);

// Obține prețul total
const total = MenooSDK.getTotalPrice();
console.log('Total:', total);

// Obține coșul în format API (pentru trimitere la backend)
const apiCart = MenooSDK.getCartForApi();
console.log('Coș format API:', apiCart);

// Golește coșul
MenooSDK.clearCart();

// Deschide pagina de checkout
MenooSDK.openCheckout();

// Distruge widget-ul
MenooSDK.destroy();

Events

Listen to widget events:

// Widget gata
window.addEventListener('menoo:ready', (e) => {
  console.log('Widget gata:', e.detail);
});

// Coș modificat
window.addEventListener('menoo:cart-changed', (e) => {
  console.log('Coș modificat:', e.detail);
});

// Produs adăugat
window.addEventListener('menoo:item-added', (e) => {
  console.log('Produs adăugat:', e.detail);
});

// Checkout inițiat
window.addEventListener('menoo:checkout-started', (e) => {
  console.log('Checkout început:', e.detail);
});

// Eroare
window.addEventListener('menoo:error', (e) => {
  console.error('Eroare widget:', e.detail);
});

Framework Integration

import { useEffect } from 'react';

function MenuWidget() {
  useEffect(() => {
    import('https://widget.menoo.ro/v1/menoo-sdk.js').then(async (module) => {
      const MenooSDK = module.default;

      await MenooSDK.init({
        restaurantId: 'YOUR_RESTAURANT_ID',
        container: '#menoo-widget',
        language: 'ro',
      });
    });

    return () => {
      // Cleanup la unmount
      import('https://widget.menoo.ro/v1/menoo-sdk.js').then((module) => {
        module.default.destroy();
      });
    };
  }, []);

  return <div id="menoo-widget" />;
}

<template>
  <div id="menoo-widget"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(async () => {
  const module = await import('https://widget.menoo.ro/v1/menoo-sdk.js');
  const MenooSDK = module.default;

  await MenooSDK.init({
    restaurantId: 'YOUR_RESTAURANT_ID',
    container: '#menoo-widget',
    language: 'ro',
  });
});

onUnmounted(async () => {
  const module = await import('https://widget.menoo.ro/v1/menoo-sdk.js');
  module.default.destroy();
});
</script>

'use client';

import { useEffect } from 'react';

export default function MenuWidget() {
  useEffect(() => {
    import('https://widget.menoo.ro/v1/menoo-sdk.js').then(async (module) => {
      const MenooSDK = module.default;

      await MenooSDK.init({
        restaurantId: 'YOUR_RESTAURANT_ID',
        container: '#menoo-widget',
        language: 'ro',
      });
    });
  }, []);

  return <div id="menoo-widget" />;
}

<div id="menoo-widget"></div>

<script type="module">
  import('https://widget.menoo.ro/v1/menoo-sdk.js').then(async (module) => {
    const MenooSDK = module.default;

    await MenooSDK.init({
      restaurantId: '<?php echo get_option('menoo_restaurant_id'); ?>',
      container: '#menoo-widget',
      language: 'ro',
    });
  });
</script>

Content Security Policy (CSP)

If your site uses CSP, add:

<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' https://widget.menoo.ro; img-src 'self' https://widget.menoo.ro;"
/>

Order Flow

Customer visits the restaurant's website
Widget displays the menu (products, prices, options)
Customer adds items to the cart
Clicks "Checkout" -> Redirects to menoo.ro/[language]/embedded/widget/[restaurantId]
Cart transfer via URL (base64 encoded, product IDs only for security)
Menoo receives and validates the cart (prices are recalculated server-side)
Customer authentication (if not already logged in)
Order completion (delivery address, payment)

Security

Prices cannot be tampered with: The widget only sends product IDs
Server-side validation: All prices are recalculated on the Menoo server
Secure transfer: The cart is encoded in the URL (base64)
Cross-domain safe: Works on any domain without security issues

Support & Documentation

Repository: github.com/crisposoft/menoo-widget
Full Documentation: README.md
Live Examples: widget.menoo.ro/examples/
Contact: contact@menoo.ro
Website: menoo.ro

Frequently Asked Questions

Updates & Versions

The widget is automatically updated via CDN. We use semantic versioning:

v1/menoo-sdk.js - Major version 1 (stable)
Minor updates and patches are applied automatically
Breaking changes will be announced in advance

Migrating from Other Solutions

If you already have an online ordering solution and want to switch to the Menoo widget, contact us at contact@menoo.ro for migration assistance.

Bill – Viewing and Management

Guide to viewing and managing the bill in the Menoo Waiter app

API & Integrations

Technical documentation for developers - authentication, endpoints, and integrations