Playing Online For Your Web Or Blog

ChessFriends.com Live Board will enrich your site with a unique interactive element. Your visitors and readers can play an online game against a human opponent directly at your site. Adding ChessFriends.com Live Board to your site is very easy and will take only several minutes.

How to add ChessFriends.com Live Board to your site?

Step 1 – Generating the code

Design Template
ID_of_your_existing_div
Language
Choose size of component
Custom authorization

Keep it empty, in case you have no private deal with ChessFriends.com. If you want individual conditions, more than 2 chessboards, or more featured chess client, write to [email protected].

Generate

Step 2 – Inserting the generated Javascript code into your website

Copy the first part of the code (Javascript code) and paste it anywhere in between the <html> and </html> tags.
Javascript code will not slow your site down, because it will be executed just after complete loading of the site.

Examples:

Inserting the generated code in HTML code header – anywhere in between <head> and </head> tags
<head>
    <title>Your Site Name</title>
    ...
    <script type='text/javascript'>
        
window._cf ={}; window._cf.id = '2';(function() {var cf = document.createElement('script'); cf.type ='text/javascript'; cf.async = true; cf.src = 'http://cf-cdn.s3.amazonaws.com/js/livechess.min.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cf, s);})();
</script> ... </head>
Inserting the generated code in HTML code body – anywhere in between <body> and </body> tags
<body>
   ...
   <script type='text/javascript'>
     
window._cf ={}; window._cf.id = '2';(function() {var cf = document.createElement('script'); cf.type ='text/javascript'; cf.async = true; cf.src = 'http://cf-cdn.s3.amazonaws.com/js/livechess.min.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cf, s);})();
</script> ... </body>

Step 3 – Positioning ChessFriends.com Live Board on your site

Copy the second part of the generated code (HTML code) and paste it in a suitable location in between <body> and </body> tags in HTML code of your site.

Examples:

Positioning the board in your site top left
<body>
   
<div id="CF_LIVE_BOARD_1"></div>
... </body>
Positioning the board into an existing section (<div>) of your site.
			
<div id="ID_of_your_existing_div">
   
<div id="CF_LIVE_BOARD_1"></div>
... </div>

Tip: Nowadays, most of pages and blogs are divided into sections (<div>–s). If you want to place ChessFriends.com Live Board e.g. in your menu, try to find the <div>, which contains the menu code and insert the HTML generated code of the ChessFriends.com Live Board there.