Embedding Chess Analysis with ChessTempo PGN Viewer
Embed and analyze chess games on your course page with the free ChessTempo PGN reader. Simply cut and paste your PGN file and a few HTML tags in order to display positions, analysis arrows, annotations, and game descriptions. It's easy and the result looks great!
Introduction
"Share your favorite chess games with ChessTempo PGN reader!"
Have you ever wanted to make an online chess course? This tutorial walks you through embedding a real chess game analyses in on your course page (or on any website for that matter) with the free ChessTempo PGN reader. All you need is a PGN (Portable Game Notation) file for the game you want to display. It's really quite easy, and I think you'll be pleased with the versatility of ChessTempo reader: you can add metadata, annotations, arrows, different color highlights for squares, etc. Also, it's free. (Go check out the ChessTempo website though, if you aren't familiar with it. There're tons of other cool free tools too.)
A screenshot of an embedded chess game
"What is ChessTempo?"
ChessTempo.com is an online platform dedicated to chess training for all levels of players.
It offers extensive databases of historical games, tactical puzzles curated from real games, an opening trainer (which I use a lot for my own practice), and an active chess forum, among other features.
It's free and has over 1.7 million users (as of this writing). Why not go check it out?
Note: LMStutorials.com has no affiliation with ChessTempo.com -- we are just appreciators!
"What is a PGN file?"
PGN (Portable Game Notation) is a universal format for recording and sharing chess games across different chess analysis software and platforms. If you play chess online on Chess.com or LiChess.com, you may already be familiar with these files. PGN files typically begin with metadata, such as the names of the players, the event, the site, the date, and the result of the game. Following the metadata, the actual moves of the game are recorded using standard algebraic notation, with each move listed sequentially. Additionally, PGN files can include annotations, variations, and comments to provide further insights or analysis into the game.
-
PGN files often include metadata describing the game:
PGN files often include metadata describing the game
Prerequisites
- A website in which you have access have permission to embed CSS and Javascript
- Recommended: Knowledge of algebraic notation in chess.
Instructions
1. Find a Chess Game PGN
You can find lots of chess PGNs on lichess.org:
An example of a game on lichess.org
You can copy or download a PGN underneath a game or chess study on lichess.org:
Choose the "Study PGN" option
2. Referencing CSS and JS in Header
You'll need to add the following references between your <head> </head> tags:
<link href="https://c2a.chesstempo.com/pgnviewer/v2.5/pgnviewerext.vers1.css" media="all" rel="stylesheet" crossorigin>
Add this JS reference:
<script defer language="javascript" src="https://c1a.chesstempo.com/pgnviewer/v2.5/pgnviewerext.bundle.vers1.js" crossorigin></script>
Also, you'll need to access some fonts saved in WOFF file format
<link href="https://c1a.chesstempo.com/fonts/MaterialIcons-Regular.woff2" rel="stylesheet" crossorigin>
3. Adding the PGN Code
Between the <body></body> tags, you can simply paste the text of the PGN file:
<ct-pgn-viewer>
[Your PGN here]
</ct-pgn-viewer>
4. Change the Text Theme
You will probably want to change the theme to "light" in order improve text visibility:
Between the <body></body> tags:
<ct-pgn-viewer class="ct-theme-light">
Add the "light" theme to improve annotation visibility.
Annotations can be less visibile without the "light" theme.
Annotations with the "light" theme.
5. Changing the Board and Piece Themes
You will probably want to change the theme to "light" in order improve text visibility:
move-list-useFigurineNotation="true"
You can change the board and piece themes by adding attributes to the "ct-pgn-viewer" tag!
6. Enabling "Figurine" Notation
You can also enable "figurine" notation to display piece icons next to moves rather than the piece "letters" of algebraic notation:
You can replace piece "letters" with figurines!
First add this between the <head></head> tags:
<link href="https://c1a.chesstempo.com/fonts/chessalphanew-webfont.woff" media="all" rel="stylesheet" crossorigin>
Then add this attribute in the <ct-pgn-viewer> tag:
move-list-useFigurineNotation="true"
Conclusion
Congratulations on integrating the ChessTempo PGN reader into your webpage. I think you'll see that it opens up so many possibilities for sharing, analyzing, and enjoying your chess games online. It's especially valuable if you're looking to author chess articles or create a basic chess course. Feel free to reach out and share any cool applications that you adopt. Good luck!
