CSS Classes

`next-display-ready`

Applied by the SDK to the <html> element after the first DOM scan completes. Use it as a CSS prefix for any rule that should activate once the SDK is ready.

/* Before SDK is ready */
.product-card { opacity: 0.5; }

/* After SDK is ready */
.next-display-ready .product-card { opacity: 1; }

The SDK adds this class once per page load — there is no "loading" state to come back to. If the SDK fails to load campaign data, the class is still added so that skeletons clear instead of being stuck on screen.

Built-in Skeleton Rule

The SDK stylesheet includes:

[data-next-skeleton] {
  transition: opacity 0.3s ease-out;
}

.next-display-ready [data-next-skeleton] {
  opacity: 0;
  pointer-events: none;
}

This is enough for most pages. If you want a different behavior, override it in your own stylesheet.

Window Events

The SDK also emits two CustomEvents on window during the same phase. These are useful when you want to run JavaScript (not CSS) at SDK ready:

Event	When
`next:initialized`	The SDK has finished initializing — stores rehydrated, DOM scan complete
`next:display-ready`	Same moment, dispatched right after the `next-display-ready` class is added to `<html>`

window.addEventListener('next:display-ready', () => {
  console.log('SDK display ready');
});

In most cases you don't need these — the CSS class is the right hook for visual changes.

next-display-ready

Built-in Skeleton Rule

Window Events

On this page

`next-display-ready`