Embed guide

You can embed Squads formations in your blog, website or app for free (please read the terms of use). There are three ways, depending on what you need.

1. Paste the code (blogs and CMSs)

Create a formation in Squads and open “Embed code” from the </> button in the header (on smartphones, it is in the share menu). Choose a height (sideways boards default to a lower height), click “Copy code”, and paste it into your article's HTML. The “Sandbox” shows how it will look in a blog post.

<iframe src="https://squads.xxox-xxox-xxox.jp/embed#d=…" width="100%" height="600"
  style="border:0" loading="lazy" title="Formation"></iframe>

The board data is stored in the URL's #d=… part. Nothing is stored on a server.
The board is shown in the orientation (portrait or landscape) you created it in.
Embedded boards are view-only (players cannot be moved). Add ?edit=1 to allow editing; changes are not saved.
Pick the display language with “Language” in the dialog. “Auto” follows each viewer's browser (Japanese for Japanese browsers, English otherwise). Choosing 日本語 or English adds ?lang=ja / ?lang=en to the URL.
Very long URLs may be truncated by some sites. In that case, use method 2 below.
If you update the formation, generate the code again and replace it.

2. Use the SDK (app developers)

Pass data from your app and receive the result of user edits. Your host app is responsible for saving the data.

<div id="pitch" style="height: 600px"></div>
<script type="module">
  import { mount } from 'https://squads.xxox-xxox-xxox.jp/embed-sdk.js'

  const embed = mount(document.getElementById('pitch'), {
    src: 'https://squads.xxox-xxox-xxox.jp/embed',
    squad,                                        // board data
    options: { mode: 'edit', lang: 'en' },        // omit lang to follow the viewer's browser
    onChange: (squad) => save(squad),             // saving is up to the host
  })
</script>

3. Use postMessage directly

Without the SDK, send squads:init to the iframe.

window.addEventListener('message', (e) => {
  if (e.source !== iframe.contentWindow) return
  if (e.data?.type === 'squads:ready') {
    iframe.contentWindow.postMessage({ type: 'squads:init', v: '1.0', squad }, ORIGIN)
  }
})

For the message specification of methods 2 and 3 (options, PNG export and more), see “Squads embed protocol v1”.

Embed a versus (two teams)

A versus, with two squads side by side, can be embedded with any of the methods above.

Method 1: generate the embed code while a versus is open in Squads, and it is embedded as a versus. Pieces you moved in the versus, the ball and hidden pieces are shown as they are.
Methods 2 and 3: pass a second squad as opponent. For a versus of a squad against itself, pass a squad with the same id as squad.
In an editable embed (?edit=1 for method 1, mode: 'edit' for methods 2 and 3), pieces and the ball can be dragged anywhere, including into the other half.
The arrangement arrives as layout, separate from the squads. The squads (players and formation) do not change.
The host can show the ball or hide pieces through layout (they cannot be toggled inside the embed).

let layout = null                                 // put a saved arrangement here, if any
const embed = mount(document.getElementById('pitch'), {
  src: 'https://squads.xxox-xxox-xxox.jp/embed',
  squad, opponent, layout,                        // passing opponent makes it a versus
  options: { mode: 'edit' },
  onChange: (squad, opponent, next) => {
    layout = next                                 // the versus arrangement (null for a single squad)
    save(squad, opponent, layout)                 // save it together with the squads
  },
})

// When the host replaces the squads, pass the received arrangement back
embed.set(updatedSquad, opponent, layout)

If you replace the squads without layout, the arrangement goes back to the start (the formation, no ball). When you switch the opponent to a different squad, do not pass it, since it does not fit that squad. For the shape of layout and its coordinates, see “Squads embed protocol v1”.

To create boards from AI assistants such as Claude or ChatGPT, see the AI assistant guide.

Please note

Keep the “Squads” link at the bottom right of the embedded page as it is.
Embedding on sites that are contrary to public order and morals is not allowed.