Embed Tic-Tac-Toe on your website

Do you have a website and want your visitors to be able to play Tic Tac Toe while browsing your content? Now, you can embed our game and let others play it for free, no strings attached. Just copy and paste the embed code below into your website’s HTML.

We kindly ask you to link to our Tic-Tac-Toe game from your website. Although this is not required to be able to embed our game, we would highly appreciate it. For your convenience, you can find an example of the linking code below. Feel free to modify it in any way you like.

Use the following creator to customize your embed code.

Here is the preview of the game based on the embed code above and the parameters you selected.

User manual

This page generates a code snippet that you can later copy and paste into your website’s HTML so that people can play Tic-Tac-Toe while on your website. This service is free of charge, and there is no liability for using this game as a part of your content. You can use it for both commercial and non-commercial purposes. You can monetize your website in any way you like, and we will not make any claims towards your revenue. We only encourage you to give us credit by posting a link to the game on your website, although this is not mandatory. Our goal is to make our game as popular as possible.

You can either manually edit the code snippet or use the provided creator. Above, you can see a preview that shows how the game will look on your website with the current parameters. However, the preview is available only if you use the creator. Manually editing the code does not update the preview. Therefore, we strongly encourage you to use the creator.

How to use the creator?

Seven yes/no options and two numeric values for the width and height of the frame allow you to customize the game’s appearance. The first four options are: “Display header and footer,” “Display article,” “Display feedback panel,” and “Display ads.” Thanks to them, you can determine what is displayed within the game frame. Try to experiment with them to see for yourself how they affect the preview window.

The next option is “Default dark mode,” which is a bit more complicated. If it is switched on, the game appears in dark mode to the new players. However, this option does not affect anyone who has played the game before and has saved their dark/light mode preferences. Only newcomers will see the game in the dark mode by default.

If you have opened the game before, it has probably saved your preferences, such as the difficulty level and whether you prefer light or dark mode. For this reason, the “Default dark mode” option in the creator may not seem to work at first. You will need to clear your preferences and reload the game to see it as a new player would. Use the “Erase your data and reload” button to do it. Bear in mind, however, that this action will delete all your preferences, including your preferred difficulty level, starting character, singleplayer/multiplayer settings, etc.

Another thing that might be a little confusing is that our Tic-Tac-Toe game has a black background in dark mode and a transparent background in light mode. Therefore, if you have chosen light mode as the default, the background of your website will also be the background of the game frame. This is potentially problematic – if your website’s background is black, the game will try to display black drawings over a black background, and, as a result, the user will be unable to see anything. You can observe this issue when the page is switched to dark mode while the game in the game frame (or the preview window) remains in light mode. To mitigate this problem, you can either enable “Default dark mode” in the creator or set the background property of the iframe in your website’s CSS.

The “Scroll bars allowed” option lets you decide whether you want the scroll bars to be displayed within the game frame when the content is larger than the frame itself. If the contents fit inside the frame, the scroll bars are not necessary and will not be displayed anyway.

Similarly, “Border” lets you decide whether you want the game frame to be visibly marked on your website. If you switch this option off, there will be no apparent border between your content and the game. In light mode, the game adopts the background of your website, so the border is the only visual element that distinguishes the inside of the game frame from the outside.

“Width” and “Height” are the corresponding dimensions of the game frame in CSS pixels. The minimum value for both variables is 200, and the maximum is 5000. However, the game may not work properly if the width is less than 280. Even for values greater than 280, it may look strange if the height does not make it possible for all the elements to fit inside the game frame. The game works well in both portrait and landscape orientations.

If you are not sure how to set the perfect width and height for your website, draw inspiration from the seven available presets. Use the “Preset sizes” drop-down menu to select one; the width and height fields will fill with the appropriate values.

If you look closely at the embed code, you will notice an id parameter. Each embed code has a unique identifier that you should not change, as the embed code may not work with an incorrect id. These identifiers help us monitor the usage of our game on the Internet.

Contact information

Please let us know if you have any questions. This game was created by the Simiade company. Here is how you can contact us: