OptimoCMSDocs
Guides

Restaurantsite bouwen

Maak een complete restaurantwebsite met menu, boekingen, reviews en design tokens via de OptimoCMS SDK, MCP en REST API.

Een complete restaurantsite bouwen

In deze tutorial bouw je stap voor stap een restaurantwebsite met:

  • Menu-pagina met categorieën en gerechten
  • Online reserveringen via het booking-systeem
  • Klantreviews
  • Design tokens voor de huisstijl
  • Publicatie naar productie

We tonen elke stap met SDK, MCP en REST voorbeelden naast elkaar.

Vereisten

  • Node.js 18+
  • Een OptimoCMS API key (maak er een aan in het dashboard onder Instellingen → API)
  • npm install @optimocms/sdk

Stap 1 — Site aanmaken

SDK

import { OptimoCMS } from '@optimocms/sdk';

const client = new OptimoCMS({
  apiKey: process.env.OPTIMOCMS_API_KEY!,
});

const site = await client.sites.create({
  name: 'Ristorante Bella Vista',
  subdomain: 'bellavista',
  language: 'nl',
});

console.log(`Site aangemaakt: ${site.id}`);

MCP (Cursor / Claude)

Maak een nieuwe site genaamd "Ristorante Bella Vista" met subdomain "bellavista" in het Nederlands.

De MCP tool create_site wordt aangeroepen met:

{
  "name": "Ristorante Bella Vista",
  "subdomain": "bellavista",
  "language": "nl"
}

REST

curl -X POST https://api.optimocms.com/v1/sites \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Ristorante Bella Vista",
    "subdomain": "bellavista",
    "language": "nl"
  }'

Stap 2 — Template installeren

Kies een restaurant-template uit de bibliotheek en installeer deze op je site.

SDK

const templates = await client.templates.list({ category: 'restaurant' });
const template = templates.data[0];

const result = await client.templates.install(site.id, {
  templateId: template.id,
  designTokens: {
    colorPrimary: '#8B0000',
    fontHeading: 'Playfair Display',
    fontBody: 'Inter',
    radiusCard: '12px',
    radiusButton: '8px',
  },
});

console.log(`Template geïnstalleerd, ${result.pagesCreated.length} pagina's aangemaakt`);

MCP

Installeer het restaurant-template op site "bellavista" met een donkerrode primaire kleur (#8B0000) en Playfair Display als heading-font.

REST

curl -X POST https://api.optimocms.com/v1/sites/$SITE_ID/templates/install \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "tmpl_restaurant_classic",
    "designTokens": {
      "colorPrimary": "#8B0000",
      "fontHeading": "Playfair Display",
      "fontBody": "Inter",
      "radiusCard": "12px",
      "radiusButton": "8px"
    }
  }'

Stap 3 — Menu-pagina vullen

Maak een menupagina met categorieën en gerechten als content blocks.

SDK

const menuPage = await client.pages.create(site.id, {
  title: 'Menu',
  slug: 'menu',
  status: 'draft',
  blocks: [
    {
      type: 'Hero',
      props: {
        title: 'Ons Menu',
        subtitle: 'Verse Italiaanse gerechten, dagelijks bereid',
        backgroundImage: '/images/kitchen.jpg',
      },
    },
    {
      type: 'MenuCategory',
      props: {
        title: "Antipasti",
        items: [
          { name: 'Bruschetta al Pomodoro', price: '€9,50', description: 'Geroosterd brood met tomaat en basilicum' },
          { name: 'Carpaccio di Manzo', price: '€14,00', description: 'Dun gesneden rundvlees met rucola en parmezaan' },
          { name: 'Burrata con Prosciutto', price: '€16,50', description: 'Romige burrata met parmaham' },
        ],
      },
    },
    {
      type: 'MenuCategory',
      props: {
        title: "Primi Piatti",
        items: [
          { name: 'Spaghetti Carbonara', price: '€16,00', description: 'Klassiek met guanciale en pecorino' },
          { name: 'Risotto ai Funghi Porcini', price: '€18,50', description: 'Romige risotto met eekhoorntjesbrood' },
          { name: 'Tagliatelle al Ragù', price: '€17,00', description: 'Verse pasta met langzaam gegaard vlees' },
        ],
      },
    },
    {
      type: 'MenuCategory',
      props: {
        title: "Dolci",
        items: [
          { name: 'Tiramisù della Casa', price: '€9,00', description: 'Huisgemaakt volgens oma\'s recept' },
          { name: 'Panna Cotta', price: '€8,50', description: 'Met seizoensfruit en coulis' },
        ],
      },
    },
  ],
});

console.log(`Menu pagina aangemaakt: ${menuPage.id}`);

MCP

Maak een menu-pagina op site "bellavista" met categorieën Antipasti, Primi Piatti en Dolci. Voeg bij elke categorie 2-3 gerechten toe met naam, prijs en korte beschrijving.

REST

curl -X POST https://api.optimocms.com/v1/sites/$SITE_ID/pages \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Menu",
    "slug": "menu",
    "status": "draft",
    "blocks": [
      {
        "type": "Hero",
        "props": { "title": "Ons Menu", "subtitle": "Verse Italiaanse gerechten" }
      },
      {
        "type": "MenuCategory",
        "props": {
          "title": "Antipasti",
          "items": [
            { "name": "Bruschetta al Pomodoro", "price": "€9,50" },
            { "name": "Carpaccio di Manzo", "price": "€14,00" }
          ]
        }
      }
    ]
  }'

Stap 4 — Reserveringen activeren

Configureer het booking-systeem zodat gasten online kunnen reserveren.

SDK

const bookingPage = await client.pages.create(site.id, {
  title: 'Reserveren',
  slug: 'reserveren',
  status: 'published',
  blocks: [
    {
      type: 'Hero',
      props: { title: 'Reserveer een tafel', subtitle: 'Kies uw gewenste datum en tijd' },
    },
    {
      type: 'BookingWidget',
      props: { serviceId: 'dinner', showStaff: false, showBranch: false },
    },
  ],
});

// Beschikbare slots opvragen
const slots = await client.booking.getSlots(site.id, {
  serviceId: 'dinner',
  date: '2026-06-15',
});

console.log(`${slots.slots.filter(s => s.available).length} beschikbare tijdslots`);

// Test-reservering maken
const booking = await client.booking.create(site.id, {
  serviceId: 'dinner',
  date: '2026-06-15',
  startTime: '19:00',
  customer: {
    name: 'Jan de Vries',
    email: 'jan@voorbeeld.nl',
    phone: '+31612345678',
  },
});

console.log(`Reservering bevestigd: ${booking.id} (${booking.status})`);

MCP

Activeer reserveringen op site "bellavista". Maak een reserveringspagina met een booking widget voor dinnerservice.

REST

# Slots ophalen
curl https://api.optimocms.com/v1/sites/$SITE_ID/booking/slots?serviceId=dinner&date=2026-06-15 \
  -H "Authorization: Bearer $API_KEY"

# Reservering aanmaken
curl -X POST https://api.optimocms.com/v1/sites/$SITE_ID/booking \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "serviceId": "dinner",
    "date": "2026-06-15",
    "startTime": "19:00",
    "customer": {
      "name": "Jan de Vries",
      "email": "jan@voorbeeld.nl"
    }
  }'

Stap 5 — Design tokens instellen

Pas de huisstijl aan met design tokens — deze werken door op alle pagina's.

SDK

const tokens = await client.designTokens.update(site.id, {
  colorPrimary: '#8B0000',
  colorBackground: '#FFF8F0',
  colorSurface: '#FFFFFF',
  colorText: '#1A1A1A',
  colorTextMuted: '#6B7280',
  fontHeading: 'Playfair Display',
  fontBody: 'Inter',
  radiusCard: '12px',
  radiusButton: '8px',
  radiusInput: '6px',
});

console.log(`Design tokens bijgewerkt: ${tokens.updatedAt}`);

MCP

Update de design tokens van site "bellavista": primary kleur donkerrood #8B0000, achtergrond warm wit #FFF8F0, heading font Playfair Display, body font Inter.

REST

curl -X PUT https://api.optimocms.com/v1/sites/$SITE_ID/design-tokens \
  -H "Authorization: Bearer $API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "colorPrimary": "#8B0000",
    "colorBackground": "#FFF8F0",
    "colorSurface": "#FFFFFF",
    "colorText": "#1A1A1A",
    "fontHeading": "Playfair Display",
    "fontBody": "Inter",
    "radiusCard": "12px",
    "radiusButton": "8px"
  }'

Stap 6 — Publiceren

Publiceer de site naar productie zodat bezoekers hem kunnen bereiken.

SDK

const publishResult = await client.sites.publish(site.id);

if (publishResult.status === 'queued' || publishResult.status === 'deploying') {
  console.log(`Site wordt gepubliceerd! Deploy ID: ${publishResult.deployId}`);
  console.log(`Live op: https://bellavista.optimocms.com`);
}

MCP

Publiceer site "bellavista" naar productie.

REST

curl -X POST https://api.optimocms.com/v1/sites/$SITE_ID/publish \
  -H "Authorization: Bearer $API_KEY"

Response:

{
  "siteId": "site_abc123",
  "status": "deploying",
  "deployId": "dpl_xyz789"
}

Compleet script

Hieronder het volledige script dat alle stappen combineert:

import { OptimoCMS } from '@optimocms/sdk';

const client = new OptimoCMS({
  apiKey: process.env.OPTIMOCMS_API_KEY!,
});

async function buildRestaurantSite() {
  // 1. Site aanmaken
  const site = await client.sites.create({
    name: 'Ristorante Bella Vista',
    subdomain: 'bellavista',
    language: 'nl',
  });

  // 2. Template installeren
  const templates = await client.templates.list({ category: 'restaurant' });
  await client.templates.install(site.id, {
    templateId: templates.data[0].id,
  });

  // 3. Design tokens
  await client.designTokens.update(site.id, {
    colorPrimary: '#8B0000',
    colorBackground: '#FFF8F0',
    fontHeading: 'Playfair Display',
    fontBody: 'Inter',
    radiusCard: '12px',
    radiusButton: '8px',
  });

  // 4. Menu-pagina
  await client.pages.create(site.id, {
    title: 'Menu',
    slug: 'menu',
    status: 'published',
    blocks: [
      { type: 'Hero', props: { title: 'Ons Menu' } },
      { type: 'MenuCategory', props: { title: 'Antipasti', items: [
        { name: 'Bruschetta', price: '€9,50' },
        { name: 'Carpaccio', price: '€14,00' },
      ]}},
    ],
  });

  // 5. Reserveringspagina
  await client.pages.create(site.id, {
    title: 'Reserveren',
    slug: 'reserveren',
    status: 'published',
    blocks: [
      { type: 'BookingWidget', props: { serviceId: 'dinner' } },
    ],
  });

  // 6. Publiceren
  const result = await client.sites.publish(site.id);
  console.log(`✓ Site live op https://bellavista.optimocms.com (${result.status})`);
}

buildRestaurantSite().catch(console.error);

Volgende stappen

Gidsen

Praktische tutorials en stap-voor-stap gidsen voor OptimoCMS. Van restaurant-sites bouwen tot CI/CD pipelines en CRM webhook-integraties.

Multi-site automatisering

Maak en beheer tientallen sites programmatisch met de OptimoCMS SDK. Ideaal voor franchises, agencies en white-label platforms.

On this page

Een complete restaurantsite bouwenVereistenStap 1 — Site aanmakenSDKMCP (Cursor / Claude)RESTStap 2 — Template installerenSDKMCPRESTStap 3 — Menu-pagina vullenSDKMCPRESTStap 4 — Reserveringen activerenSDKMCPRESTStap 5 — Design tokens instellenSDKMCPRESTStap 6 — PublicerenSDKMCPRESTCompleet scriptVolgende stappen