Solve, create, share and talk about jigsaw puzzles
English
Čeština
Dansk
Deutsch
English
Español
Français
Nederlands
Menu Back
Sign In
  1. Jigidi
  2. Guides & Help
  3. Resources & Tools
  4. Custom jigsaw puzzles
  5. In depth installation guide for custom jigsaw puzzles

In-Depth Installation Guide for Jigidi Custom Jigsaw Puzzle Integration

Welcome to our comprehensive guide on integrating a Custom Jigsaw Puzzle into your website! Whether you're a blogger, educator, or business owner, our easy-to-follow instructions will help you enhance your site's interactivity and visitor engagement. In this guide, we cover various platforms, ensuring that no matter your technical skill level or website backend, you can effortlessly add a jigsaw puzzle to captivate and entertain your audience. Let's get started on transforming your digital space with this unique, interactive element!

But before diving into specific platforms, it’s essential to understand how to obtain the HTML code for the Custom Jigsaw Puzzle and the general idea of where it should be placed in your website's code.

1. Access the Custom Puzzle Creator:

2. Retrieve the HTML Code:

  • Once your puzzle is created, you will find an HTML code snippet provided at the bottom of the page.
  • This snippet is the embeddable code you’ll use on your website.

3. Copy the HTML Snippet:

  • Click the provided button or manually select the code to copy it to your clipboard.

4. Inserting the Code:

  • The copied HTML snippet should be inserted into the HTML structure of your website. This can be in a static HTML file, within a CMS (like WordPress or Squarespace), or a script file if your website uses a scripting language like PHP.
  • Place the snippet where you want the puzzle to appear on your webpage.
    Once you have copied the HTML snippet, follow the specific instructions below for the platform you are using.

For Basic HTML Websites

1. Locate the Desired Page:

  • Open the HTML file of the page where you want the puzzle to appear.

2. Insert the Code:

  • Place the cursor where you want the puzzle to be displayed.
  • Paste the provided HTML code snippet into your HTML file. Your code should look like this:

3. Save and Test:

  • Save the HTML file.
  • Open it in a web browser to ensure the puzzle appears and links correctly.

To master how to reduce bounce rate, focus on enhancing user engagement and site usability. Start by ensuring your website is fast-loading and mobile-friendly, as slow sites often drive visitors away. Create compelling, relevant content that resonates with your target audience, and structure it for easy reading with headings, bullet points, and images. Also, include clear calls-to-action and internal links to guide visitors to more content, reducing the likelihood of them leaving your site prematurely.

For WordPress

1. Access the Post or Page:

  • Navigate to the WordPress dashboard.
  • Go to 'Posts' or 'Pages' and select the post/page where you want to embed the puzzle.

2. Embed the Code:

  • If using the Gutenberg editor, add a 'Custom HTML' block where you want the puzzle.
  • Paste the provided HTML code snippet into the block.
  • For the Classic Editor, switch to the 'Text' tab and paste the code where you want it.

3. Preview and Publish:

  • Click 'Preview' to see how it looks on your site.
  • If satisfied, click 'Update' or 'Publish' to make the changes live.

Custom jigsaw puzzles offer an innovative way to captivate your audience. By integrating these puzzles into your website, you provide a unique and enjoyable challenge that can keep visitors engaged.

For Squarespace

1. Select the Right Page:

  • Log into your Squarespace account.
  • Choose the page where you want to embed the puzzle.

2. Add Embed Block:

  • Click on 'Add Block' (+ icon).
  • Select the 'Embed' block from the menu (the 'Code' block will also work).

3. Embed the Code:

  • Under "Embed as," choose "Code Snippet".
  • Below that, click "Embed data" and paste the provided HTML code snippet.

4. Save and View:

  • Click 'Done' and then 'Save'.
  • View the page to ensure the puzzle displays correctly.

For content creators looking to add an interactive twist to their websites, our online Custom Jigsaw Puzzle maker is an invaluable tool. This innovative platform allows you to transform images into engaging puzzles, perfect for boosting user interaction and dwell time. Whether you're a blogger aiming to captivate your audience or an educational content creator seeking to present information in a fun, memorable way, this tool fits seamlessly into your creative arsenal. With its user-friendly interface, it stands out as one of the easy tools for content creators, enabling them to enrich their digital content and stand out in a crowded online space.

For Wix

1. Edit Your Site:

  • Log into your Wix account and open your site in the editor.

2. Add an HTML Code Element:

  • Click on 'Add' (+ icon) on the left side.
  • Select 'More' and then choose 'HTML iframe' or 'Embed a Site'.

3. Insert the Embed Code for Website:

  • Click 'Enter Code' and paste the provided HTML snippet.
  • Adjust the size and position as needed.

4. Publish to See Changes:

  • After arranging, click 'Publish' on the top right to see the changes on your live site.

Interactive learning is revolutionizing educational content, making it more engaging and memorable. By incorporating tools like our jigsaw puzzle maker, educators can transform traditional learning materials into captivating interactive experiences. This approach not only reinforces the subject matter but also enhances cognitive skills such as problem-solving and memory.

For Shopify

1. Edit the Desired Page:

  • From your Shopify admin, go to 'Online Store' > 'Pages'.
  • Click the page you want to edit.

2. Add the HTML Code:

  • In the page editor, switch to the HTML mode ( icon).
  • Paste the provided HTML snippet where you want the puzzle to appear.

3. Save and Review:

  • Click 'Save' and preview the page to ensure it looks as expected.

General Tips

  • Testing: Always preview or test the page after embedding to ensure functionality. Make sure the puzzle loads correctly and is interactively responsive.
  • Positioning: Adjust the position of the code snippet in your HTML for optimal placement on your page. The placement of the iframe can impact the user experience and flow of your content.
  • Customization Limitations: Due to the nature of iframe content, customization of the puzzle's appearance using your site’s CSS might not be possible, as the iframe content is isolated from your site's styles. You can, however, adjust the surrounding elements on your page for a cohesive look.
  • Iframe Size Adjustments: While you can't alter the internal design of the puzzle via CSS, you can modify the size of the iframe container for better integration with your site layout. Ensure that the iframe dimensions are set in a way that complements your page design and provides a good user experience.

By following these specific instructions, you should be able to seamlessly integrate the custom jigsaw puzzles into a variety of website platforms, enhancing user engagement and interaction. Interactive elements keep visitors engaged for longer periods, encouraging them to explore your content further. This engaging addition is not only about elevating the entertainment value of your site but also plays a role in how to reduce bounce rate on website. Incorporating this puzzle feature thus serves a dual purpose: it adds a unique and enjoyable element to your website while also improving key performance metrics crucial for online success.

Last revision: 5 December 2023