Get Started

Read URL parameters in conditionals to show or hide content.

Hide When Parameter Is Set

<!-- Hide when URL contains ?reviews=n -->
<div data-next-hide="param.reviews == 'n'">
  Customer reviews section
</div>

<!-- Hide when URL contains ?banner=n -->
<div data-next-hide="param.banner == 'n'">
  Promotional banner
</div>

Test this by loading the page with ?reviews=n in the URL. The reviews section disappears.

Show Only When Parameter Is Set

<!-- Show only when ?debug=true -->
<div data-next-show="param.debug == 'true'">
  Debug panel
</div>

<!-- Show when parameter exists, regardless of value -->
<div data-next-show="param.preview">
  Preview mode active
</div>

param.preview (without ==) is a truthy check — the element shows whenever the parameter is present, regardless of value.

A/B Test Variants

Use a single variant parameter to swap content:

<div data-next-show="param.variant == 'a'">
  <h1>Limited Time Offer!</h1>
  <button>Buy Now — Save 50%</button>
</div>

<div data-next-show="param.variant == 'b'">
  <h1>Premium Quality Products</h1>
  <button>Get Started Today</button>
</div>

<!-- Default (control) — show when no variant set -->
<div data-next-hide="param.variant">
  <h1>Welcome</h1>
  <button>Shop Now</button>
</div>

Direct visitors to ?variant=a or ?variant=b to test different copy.

Combine With Cart State

URL conditionals can be combined with cart conditions using &&:

<!-- Show only if special promotion AND cart has items -->
<div data-next-show="param.upsell == 'true' && cart.hasItems">
  Special upsell offer for existing customers!
</div>

Session Persistence

Parameters survive page navigation:

Page 1: /landing?banner=n&theme=dark
  → Stores banner=n, theme=dark in sessionStorage

Page 2: /checkout (no parameters)
  → Reads stored banner=n, theme=dark

Page 3: /thanks?theme=light
  → Updates theme=light, keeps banner=n

This means a tracking link can set parameters once and have them apply to the entire funnel.

Parameter names are case-sensitive. param.Test is not the same as param.test. Pick a casing convention and stick to it.

Webflow / Quote Stripping

Some page builders (like Webflow) strip quotes from attribute values. The SDK accepts both forms:

<!-- with quotes (preferred) -->
<div data-next-hide="param.timer == 'n'">

<!-- without quotes (also works) -->
<div data-next-hide="param.timer==n">

Next Steps

Read and write parameters from JavaScript: JavaScript API
All operators and helpers: Reference → Attributes