Customization

Pass an options object to next.fomo() to override any of the defaults.

Custom Items

Provide your own list of items instead of pulling from the campaign.

next.fomo({
  items: [
    { text: 'Premium Bundle — Save 30%', image: 'https://example.com/premium.jpg' },
    { text: 'Starter Pack', image: 'https://example.com/starter.jpg' },
    { text: 'Annual Plan', image: 'https://example.com/annual.jpg' },
  ],
});

Each item needs a text (the product line) and an image (URL or data URI). Items with no image are filtered out when pulling from the campaign, but if you provide them yourself they are used as-is.

Custom Customer Names

Provide a country-keyed object. The active country is auto-detected from the browser timezone, but you can override it explicitly.

next.fomo({
  customers: {
    US: ['Sarah from Dallas', 'Mike from Boston', 'Lisa from Miami'],
    CA: ['Jean from Montreal', 'Marie from Toronto'],
    GB: ['Emma from London', 'Oliver from Manchester'],
  },
  country: 'CA', // override auto-detection
});

Country auto-detection looks at Intl.DateTimeFormat().resolvedOptions().timeZone:

Timezone substring	Country
`Australia`	`AU`
`London`, `Dublin`	`GB`
`Toronto`, `Vancouver`	`CA`
(anything else)	`US`

If the active country is not in your customers object, the enhancer falls back to US. If neither exists, it shows Someone.

Timing

All values are in milliseconds.

next.fomo({
  initialDelay: 3000,  // wait 3 s before the first popup
  displayDuration: 4000, // each popup is visible for 4 s
  delayBetween: 15000, // wait 15 s between popups
});

Option	Default	Description
`initialDelay`	`0`	Time before the first popup is shown
`displayDuration`	`5000`	How long each popup stays on screen
`delayBetween`	`12000`	Pause between popups

Mobile Limits

next.fomo({
  maxMobileShows: 3, // show up to 3 popups, then auto-stop on mobile
});

The "mobile" check is window.innerWidth <= 768. After the cap is reached the rotation calls stopFomo() automatically — no further popups appear until the page reloads.

There is no maxShows option for desktop. On desktop the rotation continues indefinitely until you call next.stopFomo() or the user navigates away.

Page-Specific Configuration

Combine the SDK init event with meta[name="next-page-type"] to scope FOMO to the right pages.

window.addEventListener('next:initialized', () => {
  const pageType = document.querySelector('meta[name="next-page-type"]')?.content;

  // Only run FOMO on landing/product pages, never on checkout or upsell
  if (pageType !== 'product') return;

  next.fomo({
    initialDelay: 3000,
    displayDuration: 4000,
    delayBetween: 12000,
    maxMobileShows: 2,
  });
});

Conditional Items by Cart State

Read cart state to choose which products to show.

window.addEventListener('next:initialized', () => {
  const cartItemCount = next.getCartCount();

  next.fomo({
    items: cartItemCount > 0
      ? [{ text: 'Premium Upgrade', image: '/upgrade.jpg' }]
      : [{ text: 'Bestseller Bundle', image: '/bestseller.jpg' }],
  });
});

The popup is rendered into document.body with built-in styles. To customize it, target the SDK class names with CSS overrides.

.next-fomo-popup {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 16px;
  max-width: 320px;
}

.next-fomo-popup .customer-name {
  font-weight: 600;
  color: #1f2937;
}

.next-fomo-popup .product-name {
  color: #6b7280;
  font-size: 14px;
}

Next Steps

All config options in one table: Reference → API
Listen for events to track impressions: Reference → Events

On this page