Skip to main content

Embed a floor plan in your page

In order to embed a chart in your website, you will need to:

  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.

And that's it! This is the shortest path to embed a chart, but based on your needs, you will want to configure several additional settings and even insert the chart using different methods.

Below you will find a live example of this.

Client-side libraries​

To make client-side integration easier, we've developed wrapper libraries for a number of popular frameworks and tools:

TypeScript types are available here: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/seatsio