How to Add a "Surprise Me" Random Page Button to Your Site

Details: Updated: March 24, 2026

Sometimes the simplest interface ideas can have the biggest impact. A "Surprise Me" button is one of those, on the surface, it's just a random redirect. In practice, it can either quietly improve engagement or end up as a pointless gimmick, depending on how it's implemented.

Most tutorials stop at a basic JavaScript snippet: pick a URL, redirect, done. That works for a demo, but in real projects it often falls short, no context, no tracking, and no real value to the user.

When we use this pattern in production, the goal isn't randomness for its own sake. It's about guiding users toward meaningful content, surfacing pages that would otherwise be missed, and doing it in a way that still feels intentional.

Why Use a “Surprise Me” Button?

Done well, a "Surprise Me" feature can:

Encourage deeper exploration without overwhelming users
Increase page depth on content-heavy sites
Give older or overlooked pages a second life

Below is a simple implementation to get you started, along with a few practical considerations that make the difference between a novelty feature and something genuinely useful.

How This Works in Real Projects

We've used this pattern in a few different contexts, not just as a novelty feature, but as a way to improve how users explore content.

For example:

On content-heavy sites, it helps surface pages that would otherwise go unnoticed
In structured navigation systems (like card-based sitemaps), it adds a layer of discovery without overwhelming users
On smaller business sites, it adds a bit of personality while quietly increasing internal page visit

You can see a more structured version of this approach in our Card Grid Sitemap demo, where exploration is guided but still flexible.

What actually made a difference:

Limiting randomness to relevant content (i.e. blog posts, services, or a specific section, not the entire site)
Using it as a secondary navigation tool rather than a primary call-to-action
Tracking interactions to understand whether users are engaging with it or ignoring it
Avoiding "true randomness" on larger sites (curated randomness tends to perform better)

Done right, this isn't just a fun button, it becomes a lightweight way to improve internal linking and keep users moving through your site.

When NOT to Use a "Surprise Me" Button

As simple as this feature is, it's not always the right fit. In some cases, it can do more harm than good, especially when it works against user intent.

Situations where we typically avoid it:

Conversion-focused landing pages
If the goal is to guide users toward a specific action (sign-up, purchase, inquiry), introducing randomness can distract from that path and reduce conversions.
Small websites with limited content
When there are only a handful of pages, users are better served with clear navigation rather than unpredictable jumps.
Highly structured user journeys or funnels
In workflows where order matters, like onboarding, checkout, or multi-step processes, random navigation breaks the flow and creates confusion.
Content that requires context or sequencing
If pages build on each other, sending users to a random entry point can make the experience feel disjointed.

In these cases, more intentional navigation patterns, like guided links, related content, or progressive disclosure, tend to perform better.

Common Mistakes

A "Surprise Me" button is easy to build, but it's just as easy to get wrong in ways that make it ineffective or even frustrating.

Here are the issues we see most often:

Sending users to completely random, unrelated pages
If the destination feels disconnected, users are more likely to bounce. Random doesn't have to mean irrelevant.
Using it as a primary navigation element
This works best as a secondary feature. Relying on it too heavily can make your site feel unstructured.
No tracking or measurement
Without tracking clicks or engagement, you have no idea if it's actually adding value or just being ignored.
Including low-value or outdated pages
If users land on thin or outdated content, it weakens trust in the feature (and your site overall).
Applying it to small or highly focused sites
If you only have a handful of pages, randomness doesn't add much and can feel unnecessary.
Treating it as a gimmick instead of a tool
The "cool factor" fades quickly if it doesn't help users discover something useful.

In most cases, a bit of structure, like limiting the pool of pages or grouping by content type, makes a big difference in how this feature performs.

Step 1: Set Up Your HTML Button

Before we dive into the JavaScript, first start by creating the button itself. This will be the interactive element users click to trigger the random page redirect.

You only need a simple <button> element with an ID so we can target it in JavaScript later:

<button id="surpriseButton">Surprise Me!</button>

You can place this button anywhere on your page, inside your navigation bar, in a sidebar, or even on a 404 page. Just make sure it's placed somewhere logical and easy to spot.

Tip: For accessibility and SEO, stick with a <button> rather than an <a> tag styled like a button. Buttons are more semantically appropriate for triggering actions like this one.

Step 2: Create an Array of URLs

Now that the button is in place, it's time to define where the "Surprise Me" button can take the user. We'll do this by creating an array of URLs in JavaScript. This array will serve as your pool of destinations. When the button is clicked, the script will randomly pick one of these URLs and redirect the user to it.

Add Your Page Links

You can include internal links, external links, or a mix of both, just be sure each entry is wrapped in quotes and separated by commas.

Here's a basic example using internal links for a blog:

const pages = [
  "https://e-dimensionz.com/blog",
  "https://e-dimensionz.com/about/about-us",
  "https://e-dimensionz.com/blog/you-have-an-app-idea-but-what-do-you-do-next",
  "https://e-dimensionz.com/blog/step-by-step-how-to-prepare-for-a-website-migration",
  "https://e-dimensionz.com/blog/signs-youve-outgrown-your-no-code-platform"
];

Tip: If your site uses a CMS like WordPress, Joomla, or a static site generator, you can generate this list dynamically. But for simplicity, we're hardcoding it here.

Example with External Links

You can also include full URLs to external pages or partner sites:

const pages = [
  "https:/edz.dev",
  "https://e-dimensionz.com/about/about-us",
  "https://e-dimensionz.com/blog",
  "https://wyldcode.com",
  "https://wyldapi.com"
];

Just make sure the links are correct and relevant to the context of where you place the button.

Step 3: Add JavaScript to Pick a Random URL

Now that you have your list of URLs ready, it's time to bring your "Surprise Me" button to life with a little JavaScript.

The core idea is simple:

Use Math.random() to select a random index from your array.
Redirect the browser to that URL using window.location.href.

How It Works

Math.random() returns a decimal between 0 and 1.
Math.floor() rounds that down to the nearest whole number.
Multiplying Math.random() by the array length gives us a valid index.

Add the JavaScript

Here's a complete example assuming you've already created your pages array:

<script>
  const pages = [
    "https://e-dimensionz.com/blog",
    "https://e-dimensionz.com/about/about-us",
    "https://e-dimensionz.com/blog/you-have-an-app-idea-but-what-do-you-do-next",
    "https://e-dimensionz.com/blog/step-by-step-how-to-prepare-for-a-website-migration",
    "https://e-dimensionz.com/blog/signs-youve-outgrown-your-no-code-platform"
  ];

  document.getElementById("surpriseButton").addEventListener("click", () => {
    const randomIndex = Math.floor(Math.random() * pages.length);
    const randomPage = pages[randomIndex];
    window.location.href = randomPage;
  });
</script>

What This Does

It waits for a click on the button with id="surpriseButton".
Then it picks a random URL from the pages array.
Finally, it redirects the browser to that URL.

This technique is super flexible and can be reused anywhere you want to create dynamic, randomized navigation.

Step 4: Add Some Styling

Now that your Surprise Me button works, let's give it a bit of flair. A well-designed button doesn't just look nice, it invites clicks.

Here's a simple base style to start:

#surpriseButton {
  background-color: #3c7cff;
  color: white;
  padding: 0.75em 1.5em;
  border: none;
  border-radius: 0.5em;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

Add Interactions (Hover/Focus)

#surpriseButton:hover,
#surpriseButton:focus {
  background-color: #2a5edb;
  transform: scale(1.05);
  outline: none;
}

Add a Pulse Animation (Optional)

If you want to draw attention to the button, on a homepage or 404 page, for example, try a soft pulsing glow:

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(60, 124, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(60, 124, 255, 0);
  }
}

#surpriseButton.pulse {
  animation: pulse 2s infinite;
}

Just add the pulse class to the button:

<button id="surpriseButton" class="pulse">Surprise Me!</button>

Bonus Tips

Avoid Redirecting to the Current Page
If you want to prevent the user from being "surprised" by the page they're already on, add a quick check before redirecting:

const currentPage = window.location.pathname;
let randomPage;

do {
  randomPage = pages[Math.floor(Math.random() * pages.length)];
} while (randomPage === currentPage);

window.location.href = randomPage;

Make It Keyboard-Accessible
Because you're using a native <button>, it already supports:

Enter key activation
Focus via Tab
Screen reader labeling

To improve UX further, use a clear aria-label if the button uses only an icon or emoji

<button id="surpriseButton" aria-label="Click to visit a random page">🎲</button>

Use It for External Links
Want to link to external sites like a random blog article, product, or playlist? Just include full URLs:

const pages = [
  "https://www.youtube.com/@e-dimensionz/videos",
  "https://www.linkedin.com/company/e-dimensionz-web-solutions",
  "https://wyldcode.com/"
];

It works exactly the same way, just be mindful of cross-origin behaviour (e.g. opening in the same tab vs. a new tab).

If you're linking to external URLs and want them to open in a new tab, replace window.location.href with:

window.open(randomPage, "_blank");

With a polished button and a few smart extras, your Surprise Me feature is functional and fun. Now your visitors have a reason to click, explore, and stay longer.

Real-World Ideas

The beauty of a "Surprise Me" button is its flexibility. It's simple under the hood, but it can enhance the user experience in creative, meaningful ways, especially when integrated thoughtfully into your site's structure.

Surprise Me: Blog Post Discovery

Give your readers a way to explore older, niche, or evergreen content with one click. Instead of relying solely on categories or pagination, a Surprise Me button can:

Surface lesser-known posts
Increase time-on-site
Encourage discovery beyond the homepage

Great for: Personal blogs, tutorials, news archives, dev journals

Random Portfolio Project Feature

If you're a freelancer, agency, or creative showcasing work, a Surprise Me button adds a playful twist to the portfolio experience. It's perfect for:

Highlighting different client projects
Breaking visitors out of scrolling patterns
Adding interactivity to your homepage or "Our Work" section

Tip: Pair it with visual transitions or brief project summaries to tease content before redirecting.

Product Recommendation

eCommerce doesn't have to be all about filtering and categories. A Surprise Me button on a product page can act like a “digital dice roll" to:

Suggest alternate products
Highlight seasonal or promotional items
Offer an unexpected discovery moment (like “Feeling Lucky?”)

Ideal for: Niche shops, boutique items, themed stores (e.g. socks, books, collectibles)

404 Fallback Suggestion

Turn a dead-end into a win. Instead of a plain “Page Not Found” message, offer a "Try a Random Page Instead" button to help users stay on your site.

Pair it with helpful messaging like:

"Oops! That page doesn't exist anymore. But hey, how about something completely different?"

Result: Better retention, more clicks, and a friendlier 404 experience.

Where to Take This Next

Sometimes the best UX feature is the one that surprises your users in the best possible way.

This is just the beginning. Once you've got the core working, consider taking it further:

Track button clicks with Google Analytics or another tool to see what users engage with
Store the last visited page in localStorage to avoid repeats
Use category-based filters to create different pools (e.g., blog vs. projects)

With a little creativity, your Surprise Me button can evolve from a playful extra into a smart, UX-boosting feature.