Embedding

Views#

A tournament can be shown whole or in parts. Use the whole view unless your page has a reason not to: it covers joining, the rounds, the table and the games, and switches between them by itself.

<div data-ocheso-tournament="weekly-blitz" data-view="tournament" data-theme="auto" data-lang="auto">
  <a href="https://www.ocheso.com/o/yoursite/weekly-blitz">Weekly Blitz</a>
</div>
<script async src="https://www.ocheso.com/embed/v1.js"></script>

What to show#

Name exactly one of these on the element:

Attributes#

All optional. Unknown or malformed values are ignored rather than guessed at, and nothing personal ever goes into a frame's address.

A standings table for a sidebar, top ten, compact, without the title bar:

<div data-ocheso-tournament="weekly-blitz" data-view="standings" data-theme="auto" data-lang="auto" data-limit="10" data-compact="true" data-header="false">
  <a href="https://www.ocheso.com/o/yoursite/weekly-blitz">Weekly Blitz</a>
</div>
<script async src="https://www.ocheso.com/embed/v1.js"></script>

Install methods#

Script (recommended)

The element and the loader, as above. The loader watches the page, so widgets added later (a client-side route, a tab that renders on click) mount by themselves and unmount when they're removed.

iframe

For site builders that only take an iframe. It works on its own at the height you give it. If the loader is also on the page, it adopts the iframe and makes it follow its content.

<iframe data-ocheso-frame src="https://www.ocheso.com/embed/en/t/weekly-blitz" title="Weekly Blitz"
  style="width:100%;min-height:480px;border:0" loading="lazy"
  allow="fullscreen; autoplay; clipboard-write; web-share" referrerpolicy="origin"></iframe>

React and Next.js

Render the element, and add the script once. The loader keeps up with React adding and removing elements, so there is nothing to clean up on route changes. For full control use Ocheso.mount() instead; see Events & JS API.

WordPress

Add a Custom HTML block where the widget should go, paste the script snippet, and update the page. Page builders (Elementor, Divi) have an equivalent HTML element. No plugin to install.

Link

Every tournament has a hosted page at /o/{org}/{slug} with your logo and colours, in English and French, and a branded preview card when it is shared.

Sizing and loading#

• The widget takes the full width of its container and follows its content's height, up to 20,000px. Put it in a narrower column to make it narrower.
• Until the frame reports its height it holds the view's starting height, so the page doesn't jump. Override it with data-min-height.
• Frames load when they come within 300px of the viewport. A widget far down a long page costs nothing until someone scrolls to it.
• If the frame doesn't answer within 10 seconds (a strict security policy, an ad blocker, no network), the link you put inside the element shows instead and an error event fires with code blocked.

On phones#

Widgets are built for small screens first and work from 320px wide. When a player's game starts on a phone, it goes full screen: the browser's own full screen where it has one, otherwise the widget covers the page and the Back button brings the page back. Turn this off with data-mobile-fullscreen="never". Inside your own app, see Mobile apps.