Custom Jigsaw Puzzles for Your own Website

You can use Jigsaw Explorer's custom jigsaw puzzle page to create jigsaw puzzles for your own website using your own images. You can either link to your puzzle from your website, or you can use the small HTML code snippet provided when the puzzle is created to embed the puzzle directly into a page on your website so your visitors enjoy your puzzles without ever leaving your site (see the demo).

Jigsaw Explorer offers this puzzle service free of charge, including for commercial use. There is no limit on the number of puzzles you are allowed to create and the puzzles do not expire. You do not need an account or registration to use the puzzle service. Jigsaw Explorer does not store, copy, or otherwise make use of the images you specify for your puzzles (i.e., when the puzzle loads the puzzle program retrieves your image from the image URL you provide). Jigsaw Explorer's custom jigsaw puzzles do not display advertisements. Also, any internal links (e.g., Support links) within the embedded puzzle program are always marked as "nofollow" to ensure the puzzle program is fully compliant with Google's guidelines.

The Benefits of Jigsaw Puzzles on Your Website

Online jigsaw puzzles are a great way to get your website's visitors enthusiastically engaged with your site! Many sites already have lots of great images that would work well as jigsaw puzzles, and Jigsaw Explorer's puzzle program allows webmasters to make good use of those images. Visitors who enjoy your puzzles are more likely to tell friends and family about your site thereby driving more word-of-mouth traffic. If you regularly add new jigsaw puzzles to your site, even if it's only one puzzle per week, it will encourage visitors to return regularly which leads to greater traffic growth over time.

Embedding a Jigsaw Puzzle into a Web Page

The easiest way to allow your visitors to enjoy your custom jigsaw puzzles is to simply place the provided puzzle link at an appropriate location on your website. However, many webmasters prefer to embed the jigsaw puzzles directly into their own web pages so their visitors never leave their website. Jigsaw Explorer's custom jigsaw puzzles accommodate that by providing an HTML code snippet when a custom jigsaw puzzle is created (see the demo). The code snippet can be inserted wherever you wish to make room for it within the page body. The HTML code snippet can be tweaked to meet your needs. Here are some commonly used tweaks:

Allow the puzzle to fill the page

An easy way incorporate a custom jigsaw puzzle into your website is to place the puzzle's HTML code snippet into its own web page and then set both the width and height values in the snippet to a value of 100%. Also, set the max-height value to 100vh (or just remove that setting altogether). That will cause the puzzle to fill the page if no other content is present.

If you set the width and height to 100% then you may also want to set the border-width value to 0. That will remove the thin border around puzzle since the border serves no purpose when the puzzle fills the page.

Allow the puzzle to occupy only a portion of the page:

Your custom jigsaw puzzle can be embedded with other content on a page. This is most commonly done by setting the HTML code snippet's width value to 100% and setting the height value to a desired pixel value, such as 600. The max-height value should be left at 90vh unless you understand the effect of changing it. The purpose of the default max-height: 90vh setting is to prevent the puzzle from being taller than the screen when displayed on phones, regardless of how high you set the height value.

Note: The user can use the puzzle program's full screen mode feature to cause the puzzle to fill the entire screen regardless of your chosen width and height values. (see "Full screen mode" below).

Note: You should not embed multiple puzzles into a single web page. The reason is because each instance of the puzzle program uses a lot of resources, so multiple puzzles on one page can stress the user's computing device, especially phones! Instead, place thumbnail images of your puzzle subjects on a single page and then link each thumbnail to a page that embeds just that puzzle. This strategy is more user friendly and has the added benefit of generating more page views from your web traffic.

Note: If your puzzle will only occupy a portion of the web page then we recommend that you specify a value of 60 as the initial number of puzzle pieces to ensure the resulting pieces are comfortably sized. As an example, our embedded demo puzzle specifies 60 puzzle pieces.

Full screen mode

By default, the user can click the puzzle program's full screen mode button so the puzzle fills the entire screen. Users like this feature since the puzzle program maximizes the size and detail of the puzzle pieces to take advantage of the extra screen space and the puzzle becomes more engaging. However, if you are displaying ads around the puzzle then the ads are no longer in view while the user is in full screen mode. If that is not acceptable then change the allowFullScreen value in the HTML code snippet to false to remove the puzzle program's full screen capability.

Note for Wix users: If you use Wix to host your website then you will notice full screen mode is disabled for your embedded jigsaw puzzles. You can resolve this issue by reading this Wix forum thread.

Other style values

If you are familiar with CSS styling then you can add other values to the HTML code snippet's inline style setting as you see fit. One commonly added style is a margin to create spacing between the puzzle and its surrounding content.

Future Enhancements

Our custom jigsaw puzzle platform will be further enhanced in the future. If you would like to receive email notice when these enhancements occur then subscribe to Jigsaw Explorer news.