Section with Side Panel

Integrate the seatmap with complementary UI elements through this layout demonstration of the SeatmapBookingRenderer with a collapsible side panel.

The interface features standard zoom controls (+ and -) for seatmap navigation, plus an arrow button that toggles the side panel’s visibility, showcasing how the renderer can dynamically adjust to changing page layouts. This implementation provides a practical example of embedding the seatmap within a more complex UI that might include additional information, filters, or booking controls.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3
 4const eventId = '526b78be-331e-44ea-a342-098ad7572074';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7const settings: IBookingRendererSettings = {
 8  env: 'stage',
 9  publicKey,
10};
11
12(() => {
13  const el = document.getElementById('root');
14  if (!el) {
15    return;
16  }
17
18  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
19
20  renderer.loadEvent(eventId);
21})();

HTML

1<div class="sidepanel" id="mySidepanel">
2  <button class="arrow" onclick="openCloseNav()">arrow</button>
3</div>
4<div id="root" class="root"></div>
5<div class="ZoomButtonList">
6  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
7  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
8</div>