How to Create a Heatmap, Scrollmap and Confetti maps

A Headline Test lets you compare different titles or headlines on your WordPress site — whether on pages, posts, or custom post types — to discover which one drives more clicks, engagement, or conversions.

These visual tests help you understand your visitors’ behavior so you can improve usability and optimize your WordPress site for better engagement and conversions.

Step 1: Create a New Heatmap Test

1. In your WordPress dashboard, go to Nelio A/B Testing → Tests.
2. Click Add Test.
3. In the dialog, select Heatmap (under the Page category).

Step 2: Name and Describe Your Heatmap

Give your test a descriptive name so you can easily identify it later — for example, Homepage Interaction Map or Product Page Scroll Behavior.

In the right sidebar, you’ll find:

• Status & Management — shows your test’s current state (Draft, Ready, Running, etc.) and lets you schedule start and end dates.
• Description — briefly note what you’re testing and what you expect to learn (e.g., “Identify which areas of the pricing page get the most clicks”).

⚠️ If you try to creat a heatmap for your “Latests posts” page and you have Your home displays set to “Your latest posts”, then when creating a Heatmap test check the option Track heatmap of a page specified using its URL. This will display a field where you can type the URL of your homepage directly.

Step 3: Select the Page to Test

Choose the content you want to analyze:

• First, select the content type (e.g., Page or Post).
• Then select the specific page you want to track.

You can pick it from the default list or check “Track heatmap of page specified using its URL” to manually enter a custom URL.

✏️ Step hich title, excerpt, and featured image combination attracts more readers.

Step 4: Add Participation Rules (Optional)

Participaton rules lets you decide who participates in the test. You can target visitors by conditions such as:

URL parameter · Referrer · Language · Location · Logged-in status · Day/time · Browser · Device type · Operating system · Cookie · IP address

If you skip participation rules, all visitors to the tested page are included automatically.

🔍 Learn more What is Segmentation and How to Use It →

Step 5: Start the Test

Once everything is ready, you can click Start in the upper-right corner to begin collecting visitor interaction data.

If you prefer, you can schedule the test for a specific start date using the Start field in the Status & Management section. After launching, the test status updates to Running and Nelio begins tracking interactions in real time.

💡 You’ll automatically see the results page once the test starts.

⏯ Pause, Resume, or Stop Your Test

• Pause a running test if you need to make changes, then resume it later.
• Stop a test manually whenever you want, or let it end automatically under certain conditions such us duration, total number of visits or confidence results (available in Professional and Enterprise plans).
• Once a test is stopped, its results remain available for review.

Step 6: Review Results

The right sidebar shows:

• The test status, start date, and duration.
• The configured end mode.
• The description and display settings for each map type.

You’ll also find three map tabs that visualize visitor behavior:

🔥 Heatmap

Shows the “hot” and “cold” zones of your page — where users focus and click most often. Use it to identify which sections attract attention and which are ignored.

You can adjust:

• Page opacity (to emphasize heat zones).
• Heat intensity (color strength).
• Interactive Heatmap — enables interaction with dynamic elements on the page, such as dropdown menus or banners.
• Resolution (desktop, tablet, or mobile views).

💡 With the interactive mode enabled, you can hover over menus, click to open or close banners, and explore different on-page states to see exactly where users clicked in each scenario.

📜 Scrollmap

Visualizes how far visitors scroll on the page, using color bands to indicate depth and engagement. Great for long pages where you need to see where users drop off.

You can adjust:

• Page opacity.
• Scrollmap legend to interpret engagement by color.
• Resolution (desktop, tablet, or mobile).

💡 Helps you spot content that’s missed because it’s too far down the page.

🎯 Confetti

Shows every individual click on the page, color-coded by user or context. This view helps you understand not just where people click, but also who, how, and when.

You can adjust:

• Page opacity
• Click on Interactive confetti if you only want
• Filter by:
  • Browser type
  • Country
  • Day of the week
  • Device type
  • Operating system
  • Time of day
  • Time since page load
  • Window width
• Interactive Confetti — lets you interact with dropdowns, expandable sections, or banners to view how users clicked inside hidden or dynamic areas.

💡 For example, you can open a collapsible banner or menu on the map to see exactly where users clicked inside it — a powerful way to uncover interactions that standard maps can’t show.

Step 7: Use Your Insights

Once you’ve analyzed your maps, use the insights to refine your layouts, reposition CTAs, improve content visibility, or remove distractions. Every change based on real visitor data brings your site one step closer to better usability and higher conversion rates.