/ Html Tutorials / By

Interactive Puzzle Page Templates: Custom HTML (Keep Required Blocks Intact)

Overview

Want your interactive puzzle page to look and read like the rest of your site? With Puzzle Maker Pro you can supply a custom HTML template before generation so every exported puzzle uses your layout automatically. This tutorial shows how to set a custom HTML template, what must remain in place for the puzzle to work, and where it’s safe to add your own content.

This tutorial covers HTML template structure. For visual styling (colors, fonts, spacing) see Interactive Puzzle Page Styling.

Required Modules

  • Any Puzzle Maker Pro module that supports HTML output

Preparation

Before you start, have:

  • A puzzle you’ll export with HTML output enabled
  • A text editor for preparing your custom HTML template
  • Hosting access (you’ll upload the generated files later)

You can download the default html and css here. (Most recent version)

Where to select your custom HTML

  1. Open the puzzle’s module in Puzzle Maker Pro.
  2. Go to Branding → HTML settings.
  3. Select your custom HTML template.
    • [Screenshot: Branding → HTML settings with custom template selected]
  4. Open Output Settings and enable HTML output (can be combined with other formats).
    • [Screenshot: Output Settings with HTML enabled]
  5. Click Create.
    • Puzzle Maker Pro generates the trio of files per puzzle: name.html, name.json, name.svg.
    • All files (plus any icons/images) should live together in the same folder.

HTTPS is recommended for hosting. Link directly to the .html page (iframes are not covered here).

Step-by-Step

1) Understand the “Do Not Remove” requirements

Your custom HTML must keep these pieces intact:

  • Head stylesheets
    • Keep the BPT settings stylesheets in the <head>.
    • custom.css is optional (used for your own tweaks; covered in the CSS tutorial).
  • Puzzle container
    • Keep the main container and its BPT subitems: <div class="bpt-container"> <!-- BPT subitems are inserted here; keep them intact --> </div>
    • You may add HTML around this container (header/footer/aside). If something breaks, revert to the standard template and re-apply changes incrementally.
  • Core JavaScript
    • Keep all required bpt*.js includes.
    • Ensure the app-config.json reference used by bptpmp.boot.js is present and correctly referenced.
    • These power loading, interactivity, validation, and the dropdown (when using galleries).

If the page fails to load or the puzzle doesn’t appear, compare your template with a fresh export to restore any missing <link>, <script>, or the .bpt-container.

2) Start from a safe minimal HTML skeleton

Use this starter layout and insert your site’s header/footer without touching the required blocks.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title><!-- Your custom title here --></title>

  <!-- KEEP: BPT settings stylesheets (inserted by PMP) -->
  <!-- <link ... bpt settings css ...> -->
  <!-- Optional: your custom.css (for visual styling only) -->
  <!-- <link rel="stylesheet" href="custom.css"> -->
</head>
<body>

  <!-- Your site header / brand -->
  <header class="site-header">
    <!-- Safe to add: logo, nav, tagline, CTA -->
    <!-- e.g., <img src="logo.png" alt="Brand"> -->
  </header>

  <!-- KEEP: Main puzzle container and BPT subitems -->
  <main>
    <div class="bpt-container">
      <!-- Do not remove or rename BPT subitems placed by PMP -->
    </div>
  </main>

  <!-- Your site footer / promotions -->
  <footer class="site-footer">
    <!-- Safe to add: links to your book/store/newsletter -->
  </footer>

  <!-- KEEP: Core BPT scripts (inserted by PMP) -->
  <!-- <script src="bpt...js"></script> -->
  <!-- <script src="bptpmp.boot.js" data-config="app-config.json"></script> -->
</body>
</html>

Where you can edit freely

  • Above/below .bpt-container: add headers, footers, CTAs, links, book covers, etc.
  • In the <head>: your own meta tags, preload hints, favicon.
  • Don’t rename/remove the BPT links/scripts or the .bpt-container.

[Screenshot: Annotated HTML skeleton with “keep” vs “custom” zones]

3) Save and select it in Puzzle Maker Pro

  • Save your template as an .html file.
  • In Branding → HTML settings, select this file as your custom HTML template.
  • In Output Settings, enable HTML output, then Create to export puzzles using your template automatically.

4) Upload and test

  1. Upload the exported files to your server in one folder: /puzzles/ my-puzzle.html my-puzzle.json my-puzzle.svg (optional icons/images) (custom.css if you use it)
    • [Screenshot: Deployed folder structure]
  2. Open the page in a browser (e.g., https://yourdomain.com/puzzles/my-puzzle.html).
  3. Verify:
    • Puzzle loads and responds to clicks
    • Reset and Validate buttons and timer work
    • Your custom header/footer appear as expected

If anything fails, compare against a fresh standard export, restore missing pieces, and reapply your changes step by step.

Outcome

You now have a reusable custom HTML template that:

  • Preserves all required puzzle functionality (BPT CSS, .bpt-container, bpt*.js, app-config.json)
  • Lets you add your own header, footer, and CTAs around the puzzle
  • Scales to single-puzzle pages and future galleries

Further Reading

Shopping Cart