An interactive, gamified flash sale widget where users click to reveal a hidden discount. Features floating animated symbols and a seamless CSS state transition.
When generic discount banners fail to capture attention, your storefront needs a boost of engagement psychology. The Mystery Deal Reveal is an interactive, gamified flash sale widget engineered to leverage the power of curiosity. By forcing users to physically "reveal" their offer, this widget transforms a standard promotion into a memorable event, driving higher click-through rates and boosting conversion through anticipation.
This interactive reveal widget moves away from traditional static layouts in favor of a clean, energetic aesthetic inspired by high-concept retail promotions[cite: 13].
Floating Secret Symbols: The hidden state features three iconic symbols ($ ? %) framed by minimalist dividers[cite: 13]. To add dynamic energy, each symbol utilizes a hardware-accelerated CSS float animation, creating a gentle, un-synchronized "breathing" effect that makes the gamified sales widget feel alive and engaging.
Seamless State Transition: The magic happens when the button is clicked. The secret symbols mathematically shrink and fade away, replaced by a springy, upward-scaling reveal of your custom discount message (e.g., "40% OFF")[cite: 13]. This satisfying transition provides the psychological "payoff" that completes the interaction.
Brand-Native Customization: Designed for perfect theme integration, the widget strictly adheres to your platform's font-family: inherit rule. It transforms your native fonts into large, authoritative blocks, ensuring this flash sale reveal looks like a bespoke, hard-coded feature rather than a third-party add-on.
Behind the playful visuals is a robust framework optimized for maximum conversion funnel progression.
The Two-State State Machine: The widget utilizes pure CSS and a simple JavaScript toggle (classList.add) to manage the hidden and revealed states. This ensures the transition is instant and doesn't require any server round-trips or slow image swaps.
Persistent Reveal State: To protect the user experience and prevent frustration, the widget retains its "revealed" state after the first click. Customers cannot un-reveal the deal, keeping their focus directed entirely on utilizing the discount.
Contextual Call to Action: The button intelligently changes its function based on the reveal state. It starts as a "Reveal Your Deal" button to drive the initial click, and seamlessly transforms into a "Shop The Sale" button once the discount is visible, funnelling users directly into the checkout flow[cite: 13].
This layout is the ultimate engagement booster for highly competitive retail moments. Deploy it as your primary site takeover for surprise weekend drops, embed it into cart recovery landing pages to create a final incentive to purchase, or use it during Black Friday/Cyber Monday "Final Hours" events where injecting a sense of fun and urgency is crucial to capturing final sales.
Bring this layout to life on your website in just a few clicks.
Edit Mystery Deal Reveal visually using the native Squarespace extension
First, ensure you have connected your website to the native Redesignee extension. Once connected, you have two easy ways to build:
Native Block: Simply add the native Redesignee Widget Block directly from the fluid engine editor menu inside Squarespace.
Manual Markdown: Add a standard Markdown Block, paste your widget’s code snippet, and the Redesignee floating "Customize" button will automatically appear right over the block.
Both methods let you tweak settings, copy items, and design visually in real time. Saving your changes syncs the updates instantly to your live page.
See Squarespace installation guide
Connect natively via Gutenberg or Elementor
Make sure you have the free Redesignee WordPress Plugin installed. To drop the Mystery Deal Reveal into Elementor, simply drag and drop the Redesignee widget from your sidebar. If you are using the Gutenberg Block Editor, click the " + " icon and select the Redesignee Block. Launch the Cloud Library directly inside your workspace, choose your customized template, and import it with a single click. It automatically inherits your theme fonts and styles!
WordPress plugin installation guide
Quick copy-and-paste for custom setups
If you are using Webflow, Shopify, Wix, or a custom HTML site, click the "Export Widget" button on this page and ensure the platform selector is set to "HTML". Click "Copy" to copy the clean, un-nested source code snippet directly to your clipboard. Paste this code into any HTML component, Code Block, or Embed tool inside your website builder. All styles, animations, and scripts are self-contained and ready to run.
This Mystery Deal Reveal widget is optimized and categorized inside the following layout packs:
Embrace pristine minimal structures. Tweak crisp whitespace templates visually inside our cloud canvas layout, copy the fast-rendering script output, and paste it straight onto your host site.
Bring asymmetric, magazine-style aesthetics to your web project canvas. Browse editorial grids and refined typography elements from our cloud repository and copy-paste clean code rows.
Grab your visitors' attention instantly. Browse our collection of native WordPress hero blocks, customize the typography and backgrounds visually, and copy the markup straight into your Gutenberg editor.
Launch stunning landing pages faster. Explore fully responsive Elementor hero sections with advanced layouts, tweak the design in our cloud library, and drop them seamlessly into your page builder.
Published:
Sep 19, 2026 07:18 AM
Category:
Tags:
