More Whimsy: The Word Puzzle Plugin

Websites need more whimsy. As AI gets better at doing more and more, I think our sites should lean into being an enjoyable destination rather than just another knowledge base.

So I built a little word-guessing game you can drop onto your site. Why? Well, just because! Put it on your About page and let people guess a fact about you. Use it as a quick quiz for blog post or a lesson you’ve created. There's even a customizable popup at the end, so you can use it to hand out a giveaway or a reward.

The Game

The game is fairly intuitive. If you’ve ever played Wordle by the New York Times or watched a game of Wheel of Fortune you should be fairly familiar with the rules.

The idea is simple: players guess a hidden word. You give them a clue and a set number of guesses (you pick how many), and after each guess the tiles fill in to show how close they got. Green for a letter in the right spot, orange for a letter that's in the word but somewhere else, and faded for a letter that isn't in there at all. (All of those colors are yours to change.)

They can type on a real keyboard or tap the on-screen letters — Backspace deletes, Enter submits. You can have as many or as few questions as you’d like.

Where to use this

This probably isn’t a utility plugin, you won’t need to use it on every site. But I think it works best in places where whimsy lends itself best: about pages, marketing pages, and blog pages.

Here’s some fun examples Claude and I came up with:

1. Weddings & events — "How well do you know the couple?" on the wedding site or RSVP page. Answers like TACOS / PARIS / RESCUE for where they met, the honeymoon, and how they got the dog.

2. Course creators & language teachers — it's basically a vocab quiz with a satisfying loop. Great for end-of-lesson review, spelling practice, or language drills (HOLA, GATO).

3. Marketing "unlock-a-code" — drop it on a landing or promo page: solve the puzzle, and the completion popup reveals a discount code or secret menu item. People love earning a reward instead of just being handed it.

4. Restaurants & cafés — "Guess the secret ingredient" or "name this week's special." Light brand engagement, and the popup can tease the new menu item.

5. An About-me easter egg — "5 things about me, but you have to guess them." On-theme, and it's not blocking anyone from the rest of the page.
   

How to Install

I've made this a free plugin, so use it on any site, however you'd like. If you like it, check out our plugin store for more. And if you're a Code Curious member, you can grab it from the Chrome Extension anytime.

Installation

Step 1: Drop this in your Site Header Code Injection:

<link rel="stylesheet" href="https://cdn.wm-plugins.com/willmyerscode/word-puzzle/styles.min.css">

Step 2: Drop this in your Site Footer Code Injection area:

<script src="https://cdn.wm-plugins.com/willmyerscode/word-puzzle/app.min.js"></script>

Step 3: Then place this code in a code block anywhere on your website.

<div data-wm-plugin="word-puzzle">
  <script type="application/json" data-word-puzzle-settings>
    {
      "questions": [
        {
          "question": "What's my favorite food?",
          "answer": "Pizza"
        },
        {
          "question": "What city I live in?",
          "answer": "New York"
        },
        {
          "question": "What's my dog's name?",
          "answer": "Vivi"
        }
      ],
      "completion": {
        "title": "Woot Wooo!",
        "message": "You answered every question. Get your <a href="/prize-url">prize here</a>."
      }
    }
  </script>
</div>

Add, remove, or edit the items in that list to change your questions. Not comfortable editing code? Paste it into Claude or ChatGPT and ask it to make your edits. It's genuinely great at this stuff.

One rule to know: answers get trimmed down to letters only (so "New York" becomes NEWYORK), and they need to be 3–10 letters after that. Anything outside that range is skipped.

Customize the finish

When a player answers everything, they get a popup. To change what it says, change the `completion` options in the data-word-puzzle-settings element.

Both the title and the message accept HTML, so you can add a line break, bold text, an emoji, or a link.

A few style tweaks

Everything already follows your site's colors and fonts, but if you want to fine-tune, add these to Design → Custom CSS and change whatever you like:

[data-wm-plugin="word-puzzle"] {
  /* Overall width */
  --wm-wp-max-width: 760px;

  /* Letter tiles */
  --wm-wp-tile-background: var(--siteBackgroundColor);
  --wm-wp-tile-color: var(--paragraphMediumColor);
  --wm-wp-border-color: var(--paragraphMediumColor);
  --wm-wp-tile-border-radius: 0px;

  /* Guess-result colors */
  --wm-wp-correct-background: #00c853;
  --wm-wp-present-background: #ff8a00;
  --wm-wp-absent-background: #ffffff;
  --wm-wp-correct-color: #000000;
  --wm-wp-present-color: #000000;
  --wm-wp-absent-color: #000000;

  /* On-screen keyboard */
  --wm-wp-key-background: #ffffff;
  --wm-wp-key-color: #000000;
  --wm-wp-key-border-radius: 0px;

  /* Completion popup */
  --wm-wp-modal-background: var(--siteBackgroundColor);
  --wm-wp-modal-title-color: var(--headingMediumColor);
  --wm-wp-modal-message-color: var(--paragraphMediumColor);
  --wm-wp-modal-border-radius: 0px;
}

That's it, have fun with it. If you make something clever, I'd love to see it.

---