Skip to main content

Creating Templates

Create your own templates for center websites and digital signage kiosks using v0 and integrate them seamlessly into cockpitOS.

Two Different "v0" Paths (Brief)​

You want to...Documentation
A design ZIP for the Cockpit (same pages as the center website, upload to the dashboard)This section Templates → Website Prompt / Kiosk Prompt
Your own app/website only via API (e.g., Next.js on Vercel, fetch to the dashboard)Developer Guide → Step-by-step: v0 + public API and API Contract (Copy-Paste: Context for v0 / AI)

The paths are deliberately separated: the ZIP prompt describes props and file structure for the cockpit; the API contract describes URLs, CORS, and JSON for external frontends.

Quick Start (Content Creator)​

  1. Copy prompt – From Website Template Prompt or Kiosk Template Prompt
  2. Create screenshots – Section by section (Hero, Cards, Footer) – better than full page
  3. Insert into v0 – Screenshots + prompt → v0 generates the template
  4. Download ZIP – From v0
  5. Dashboard → Templates → Upload – Upload ZIP, assign a name, submit
  6. System validates – Checks structure and compatibility
  7. After approval – Template is applied

Overview​

What are Templates?​

Templates are layout skins over the same technical structure (like a smartphone with different cases):

  • Website Templates: Public center websites – same pages (Home, Shops, Center Map, etc.), different design
  • Kiosk Templates: Touchscreen kiosks in shopping centers

How does it work?​

  1. Screenshots + Prompt in v0 – Content Creator shows desired layout, prompt secures structure
  2. Upload ZIP in Dashboard – Templates → Upload
  3. Automatic validation – System checks the structure
  4. Review & activation – Template is reviewed and adopted
  5. Available for Centers – Usable after approval

Template Types​

Website Templates​

For public center websites (same technology, different design):

  • Same Structure: Home, Shops, Center Map, Services, News + subpages
  • Props: centerConfig, tiles, shops, events, news, services
  • Layout: Header, Hero, TileGrid, Footer – your design
  • Slots: Center Map (WayfindingMap) – placeholder in the template. Chatbot (AI Chat including consent, SearchInterface) – global cockpitOS component in the layout, already integrated
  • Usage: Multi-tenant websites for visitors

Kiosk Templates​

For touchscreen kiosks:

  • Props: config, shops, services, content, kioskConfig
  • Structure: Screens (HomeScreen, ShopsScreen, etc.)
  • Usage: Interactive kiosks with touch navigation

Documentation​

Requirements​

  • v0 Account – For template generation
  • cockpitOS Dashboard Access – For upload
  • Basic Knowledge – HTML/CSS/React (for adjustments)

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/templates/intro