The product problem
Empty states can feel unfinished, especially while users wait for imports, reports or first data. But entertainment must never obscure activation steps.
Why this placement can work
The widget is useful only when the product has already communicated the empty-state reason and next action. Then it can add character to otherwise idle space without requiring a custom interactive component.
Implementation notes
- Show the actual setup or next-step CTA first.
- Use surface=transparent when embedding inside an existing SaaS card.
- Do not render the puzzle in error states that require immediate user action.
- Keep source labels at product/placement level, not account level.
What to avoid
- Do not let the game compete with onboarding or billing actions.
- Do not use it on destructive, security-sensitive or urgent error screens.
A practical example
A reporting SaaS says “Your first import is processing” with progress and notification options, then shows a small “Take a logic break” card underneath.
Minimal HTML
<iframe
src="https://puzru.com/embed/?mode=daily&source=saas-empty-state&theme=auto&surface=card"
title="Daily logic puzzle"
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-popups"
referrerpolicy="strict-origin-when-cross-origin"
style="display:block;width:100%;max-width:540px;height:720px;border:0;background:transparent"
></iframe>
