JSFiddle - React, Tailwind, and code Playground

by seatsio

HTML

<div class="buttons">
<button id="reset">😴 Reset to boring mode </button>
<button id="eco">🌱 💚 🍀 Eco</button>
<button id="disco"> 🕺  🕺  🕺 Disco</button>
<button id="pond">🐟 🐠 🐡 Pond</button>
</div>

<div id="chart"></div>
<script src="https://cdn.seatsio.net/chart.js"></script>

CSS

.buttons {
  text-align: center;
  margin: 2em;
}

JavaScript

const chart = new seatsio.SeatingChart({
        divId: 'chart',
        publicKey: "publicDemoKey",
        event: "largeTheatreEvent"
        }).render();

$("#reset").click(()=>{chart.changeConfig({"mode": "normal"})});
$("#eco").click(()=>{chart.changeConfig({"mode": "eco"})});
$("#disco").click(()=>{chart.changeConfig({"mode": "disco"})});
$("#pond").click(()=>{chart.changeConfig({"mode": "pond"})});