| layout | post |
|---|---|
| title | Integrate Lichess Content in a Blog |
| author | Ulysse |
See Lichess Documentation on How to Embed.
<iframe src="https://lichess.org/tv/frame?theme=brown&bg=dark" style="width: 400px; height: 444px; margin: 0 auto; display: block;" allowtransparency="true" frameborder="0"></iframe>Another more flexible solution is to directly use Chessground, the Mobile/Web chess UI for lichess.org.
<style> .chessground { width: 500px; height: 500px; display: block; margin: 0 auto; } </style> <script type="module"> import { Chessground } from 'https://cdn.jsdelivr.net/npm/chessground@9.0.2/+esm' Chessground(document.getElementById('board'), { fen: 'r2q2k1/1p6/p2p4/2pN1rp1/N1Pb2Q1/8/PP1B4/R6K b - - 2 25', turnColor: 'white', }) </script>And another example is this blogpost, which source can be found on Github.