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.