1. Base de conocimiento
  2. renderer

Inicializar el SDK

El Booking Renderer SDK (@seatmap.pro/renderer) es el selector de asientos incrustable que se ejecuta en tu página de venta. Se conecta a la Booking API, renderiza el plano del recinto usando WebGL y dispara callbacks cuando los clientes seleccionan o deseleccionan asientos.

Requisitos previos

  • Node.js 18+ (se recomienda LTS)
  • Gestor de paquetes npm, yarn o pnpm
  • Un esquema publicado y un evento creados mediante la guía Getting Started
  • Tu Public API Key del panel Editor Admin (Organization Settings)

Paso 1: Instala el paquete

npm install @seatmap.pro/renderer

yarn add @seatmap.pro/renderer

pnpm add @seatmap.pro/renderer

Detalles del paquete: @seatmap.pro/renderer on npm

Paso 2: Añade un elemento contenedor

El renderer se monta en un elemento del DOM de tu página. Dale dimensiones explícitas:

<div id="seatmap-root" style="width: 100%; height: 600px;"></div>

El renderer rellena el contenedor por completo. Usa CSS para controlar el tamaño del plano dentro del diseño de tu página.

Paso 3: Inicializa el renderer

import { SeatmapBookingRenderer } from '@seatmap.pro/renderer';

const container = document.getElementById('seatmap-root')!;

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'YOUR_PUBLIC_API_KEY',
  onSeatSelect: (seat) => {
    console.log('selected', seat);
  },
  onSeatDeselect: (seat) => {
    console.log('deselected', seat);
  },
});

await renderer.loadEvent('YOUR_EVENT_ID');

Valores obligatorios:

Paso 4: Gestiona la selección de asientos

El callback onSeatSelect se dispara cada vez que un cliente hace clic en un asiento disponible. Úsalo para sincronizar la selección con tu carrito o backend.

Para ticketing en producción, el patrón recomendado es bloqueo por clic: bloquea el asiento en tu backend de inmediato al seleccionarlo y desbloquéalo al deseleccionarlo.

const renderer = new SeatmapBookingRenderer(container, {
  publicKey: 'YOUR_PUBLIC_API_KEY',
  onSeatSelect: async (seat) => {
    await fetch('/api/cart/lock', {
      method: 'POST',
      body: JSON.stringify({ seatId: seat.compositeKey }),
    });
  },
  onSeatDeselect: async (seat) => {
    await fetch('/api/cart/unlock', {
      method: 'POST',
      body: JSON.stringify({ seatId: seat.compositeKey }),
    });
  },
});

Para la referencia completa de callbacks y ajustes, consulta el Renderer Spec.

Pruébalo en vivo

Abre el Renderer Playground para experimentar con el SDK de forma interactiva – sin necesidad de configuración.

También hay disponible un ejemplo completo y funcional en CodePen.

Resolución de problemas

El contenedor no es visible – el renderer necesita un contenedor con anchura y altura distintas de cero. Si no aparece nada, comprueba que el elemento contenedor tenga dimensiones CSS explícitas.

Errores de CORS – el renderer obtiene datos de booking.seatmap.pro. Si usas un proxy o un dominio personalizado, asegúrate de que tu servidor reenvíe las solicitudes a la Booking API con el encabezado Origin correcto.

No se muestran asientos – verifica que el evento tenga precios asignados a los asientos. El renderer solo muestra los asientos con al menos una asignación de precio.

Más información