Skip to content
Elo Chess Rating Calculator logo
Chess tools
Elo Chess Rating Calculator

Embeds and widgets

Embeddable Chess Rating Widgets

Embeddable chess rating widgets let clubs, coaching websites, blogs, and league portals add a working Elo rating calculator directly to their own pages. Instead of linking visitors to an external tool, you can place the calculator right next to tournament results, training articles, or event announcements where it is most useful. This page covers available widget modes, setup instructions, sizing guidelines, and what to expect in terms of performance and ongoing support. For a step-by-step workflow, use Embedding tutorial.

Available Widget Modes

The widget is available in three configurations: Rating Change Only (the most compact option, showing player rating, opponent rating, result, K-factor, and output fields), Initial Rating Only (for club pages that primarily serve new players estimating their first published rating), and Combined Mode (both calculators in a tabbed interface, identical to the homepage calculator). You can continue with API documentation for closely related guidance.

All three modes are fully responsive and will adapt to the container width of your page. The minimum recommended width is 320px for single-column layouts. Wider containers will display the calculator in a more spacious layout with better visual separation between input and output sections.

How to Add a Widget to Your Site

  1. 1 Choose the widget mode you want (rating change, initial rating, or combined) and copy the corresponding embed snippet from the setup panel below.
  2. 2 Paste the HTML snippet into your page where you want the calculator to appear. In WordPress, use a Custom HTML block. In Squarespace, use a Code block. In static HTML, paste directly into the markup.
  3. 3 The widget loads asynchronously to avoid blocking your page render. It initializes automatically once the script finishes loading.
  4. 4 Preview your page on desktop and at least one mobile viewport. Adjust the container width or padding if the calculator feels too cramped or too wide for your layout.

Styling, Performance, and Privacy

The widget uses an isolated stylesheet scoped to its container, so it will not interfere with your site's existing CSS. The total payload is under 50KB gzipped, including the calculation logic, styles, and all interactive behavior. No external fonts or heavy frameworks are loaded.

Privacy-wise, the widget performs all calculations client-side. No user input data is sent to our servers when visitors use the embedded calculator. The only network request is the initial script load. This makes the widget suitable for sites that need to minimize third-party data collection.

Support and Versioning

  • Widget versions are pinned: your embed snippet loads a specific version that will not change without your action.
  • When a new widget version is available (new features, rule profile updates), an optional migration path is provided.
  • If you encounter display issues, check the minimum container width requirement (320px) before reporting a bug.
  • For technical support, licensing questions, or custom widget configurations, use the contact form.

Best Placement Strategies

The most effective widget placements put the calculator where the user's question naturally arises. On a tournament results page, place it immediately after the crosstable. On a coaching article about K-factor, embed it so readers can test values while they read. On a league homepage, place it in the sidebar or hero section as a quick-access utility.

Avoid placing the widget inside deeply nested containers, below-the-fold on long pages, or without any surrounding context. A brief one-sentence introduction above the widget dramatically improves engagement compared to an unexplained calculator appearing mid-page.