Embed Diagrams

Interactive Diagrams in your Chess Web Site

A puristic small diagram with no replay buttons.
White to Move - Mate in Three. Entering and replaying of moves is possible.
White to Move - Mate in Three
A hint and the solution are provided
Play a position
Every diagram has a little embedded engine.

How to do it:

You can embed diagrams right into your html code like this:
The attribute data-pos describes the position. You can either type it manually or copy it from ChessBase or Fritz in the position setup dialog box.

Further data-attributes:

  • Title: data-title="A Typical Sacrifice."
  • Hints: data-hint="Sacrifice in a way that blocks escape squares of the black king."
  • Solutions: data-solution="f3g5"
  • Arrows: data-arrows="c1g5,g5f6"
  • Square markers: data-squares="f7,g7,h7"
  • Moves: data-moves="1.e4 e5 2.Nf3 Nc6 3.Bb5" (use this instead of data-pos)
  • Play the position: data-play="1000", where the number is the thinking time of the internal engine in milli seconds.

Additionally, you have to add the following three lines to the <head> section of your html code:
The "jQuery" file in the second line is not needed if you have it already in your web page (quite common). jQuery version 1.12 is sufficient.
You can use the same plugin to embed a replayer for PGN games.

More Tools to Embed

Tactics Solve easy tactical positions. Thousands of positions available. Your visitors will stay a lot longer when solving positions. Example and Code
Live Blitz Chess Kibitz a strong blitz game currently played on playchess.com. Nice entertainment. Longer visitor duration for you. Example and Code
Your own chess server Visitors of your site can play blitz games with one click. No need to leave your page. Will increase visitor duration a lot. Example and Code
Chess Program Fritz Let people play against a chess program with the strength of an average club player. Entertaining games, no frustration by unbeatable engines or artificial handicaps. Will your visitors in your site and let them return. Example and Code
PGN Files Let your viewers replay chess games in PGN format. Comfortable player with integrated chess engine and annotation functions. Example and Code
Live Chess Tournaments Follow grandmaster games currently being played in real tournaments. Broadcast specific tournaments. Example and Code
Diagrams Show your chess content with interactive diagrams. Users can enter and replay moves or even play out positions against a chess program. This will enrich the user experience of your site. Example and Code
ChessBase.com ChessBase Shop Privacy Policy Event Calendar Embed Licenses
We use cookies and comparable technologies to provide certain functions, to improve the user experience and to offer interest-oriented content. Depending on their intended use, analysis cookies and marketing cookies may be used in addition to technically required cookies. Here you can make detailed settings or revoke your consent (if necessary partially) with effect for the future. Further information can be found in our data protection declaration.