Skip to main content

Embed a floor plan in your page

With a client library

The easiest way to show a chart is to use one of our client libraries:

Without a client library

If we don't offer a library for your frontend framework, you can embed a chart using plain HTML and JS.

  1. Insert one of following scripts in your HTML page (for instance inside <head>) based on your account region:

    • Europe:
      <script src="https://cdn-eu.seatsio.net/chart.js"></script>
    • North America:
      <script src="https://cdn-na.seatsio.net/chart.js"></script>
    • South America:
      <script src="https://cdn-sa.seatsio.net/chart.js"></script>
    • Oceania:
      <script src="https://cdn-oc.seatsio.net/chart.js"></script>
  2. Add an empty element to your page to act as a container for the embed, for instance:

    <div id="chart"></div>
  3. Add the following snippet at the end of the HTML page:

    <script>
    new seatsio.SeatingChart({
    divId: 'chart',
    workspaceKey: 'PUBLIC_WORKSPACE_KEY',
    event: 'EVENT_KEY'
    }).render();
    </script>

    Where:

    • PUBLIC_WORKSPACE_KEY is your public workspace key, found at your accounts Workspace Settings.
    • EVENT_KEY is the floor plans event you want to display.

Below you will find a live example of this.