You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewApp Store Rating Prompt Modal — Free HTML CSS JS Snippet
App Store Rating Prompt Modal · Modals · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
App Store Rating Prompt — Star-Gated Branching Flow
Native mobile apps rarely ask "please leave a public review" outright — instead they ask an in-app star question first, then route the response: happy users get sent to the App Store or Play Store to leave a public review, while unhappy users are redirected to a private feedback form instead of a public one-star review. This snippet reproduces that exact branching flow with four self-contained modal steps.
Four steps, one visibility switch
showStep(step) loops all four step elements and sets hidden on every one except the target, so only one step is ever visible at a time. This keeps all the flow's markup and state in a single DOM tree — no step needs to be dynamically created or destroyed, which keeps the routing logic in showStep() trivially simple.
The routing decision
Clicking a star calls highlightStars() to update the visual state, then branches on the star value: if (value >= 4) showStep(stepStore); else showStep(stepFeedback). This single if statement is the entire mechanism behind the pattern — a high rating leads to the public ask, a low rating leads to the private one, protecting the app's visible store rating from frustrated one-off complaints while still capturing that feedback internally.
Hover preview mirrors the half-star pattern
stars.forEach(star => star.addEventListener('mouseenter', () => highlightStars(value))) previews the rating on hover the same way a checkout star-rating input would, and mouseleave restores the highlight to the last *committed* star count (tracked by counting how many stars currently carry the .on class) rather than resetting to zero — so browsing past the stars without clicking doesn't lose the visual state.
A shared "done" step for two different outcomes
Both the store-redirect button and the feedback-submit button ultimately call showStep(stepDone), but each first sets doneTitle.textContent and doneSub.textContent to outcome-specific copy. Reusing one terminal step for both paths avoids duplicating the "all set" UI while still giving each path its own confirmation message.
Escape hatches at every step
"Not now," "Maybe later," and "Skip" are all wired to the same close() function, so a user can exit the flow from any point without being forced through every step — an unhappy user is never trapped between "give feedback" and "leave a review" with no way out.
Customizing it
Replace the asrpGoToStore handler's placeholder with a real window.location.href to your platform's store review URL (using the App Store's itms-apps:// deep link or the Play Store's review intent), and wire asrpSendFeedback to your actual support or feedback API.
Build with AI
Build, Understand, Optimize, and Extend It With AI
You don't have to work out the branching logic by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain how the single if (value >= 4) check in the star click handler drives the entire public-versus-private routing decision, and why showStep() hiding every step but one keeps the flow's state management simple compared to mounting and unmounting separate modals. The same assistant can help optimize it too — ask whether the flow should remember a user's previous rating in localStorage to avoid re-prompting too often. It's also useful for extending it: ask it to add a real analytics event on each step transition, support a configurable star threshold instead of a hardcoded 4, or add a "remind me later" delay using a stored timestamp. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build an "app store rating prompt" modal in plain HTML, CSS, and JavaScript with no framework or library, using a branching multi-step flow.
Requirements:
- A trigger button that opens a centered modal overlay with a dimmed backdrop; clicking the backdrop itself (not the modal content) closes it.
- The modal's first step shows an app icon, a headline, and a row of 5 star icons that preview on hover (restoring to the last clicked rating when the pointer leaves the row, not resetting to zero) and commit on click.
- Clicking a star of value 4 or 5 must transition the modal to a "public review" step showing a button that represents redirecting to the platform's App Store or Play Store review page.
- Clicking a star of value 1, 2, or 3 must instead transition the modal to a private "feedback" step with a textarea for the user to describe what went wrong, and a submit button.
- Both the public-review step and the feedback step must ultimately lead to a single shared "done" confirmation step, with each path setting different heading and subtext content on that shared step before showing it.
- Every intermediate step must include an escape action (like "Not now", "Maybe later", or "Skip") that closes the modal entirely without forcing the user through the remaining steps.
- Manage all step visibility through one function that shows exactly one of the four steps at a time and hides the rest, rather than creating or destroying DOM elements per step.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSA trigger button opens the rating prompt modal with a 5-star row.
- 2Hover and click a starHovering previews the rating; clicking commits it and routes the flow.
- 3Rate 4 or 5 starsThe flow shows a "Rate on the App Store" step with a public review call to action.
- 4Rate 1-3 starsThe flow instead shows a private feedback textarea, keeping the complaint out of the public store.
- 5Complete either pathBoth paths end on a shared "done" step with outcome-specific confirmation text.
- 6Wire up real destinationsReplace the store button's placeholder with your real App Store or Play Store review deep link, and connect the feedback form to your support API.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
It's a widely used and generally accepted pattern (most major consumer apps use some version of it), but it does shape which sentiment becomes public. Many teams pair it with genuinely acting on the private feedback from low-rating users, rather than using it purely to suppress visible criticism — how you use the routed feedback matters more than the routing mechanism itself.
The star's click handler reads its data-v attribute as a number and checks if (value >= 4). Four or five stars shows the store-review step; one through three stars shows the private feedback step instead. Everything else in the flow is the same regardless of which branch is taken.
Both outcomes need the same basic "thanks, you're done" UI shell, so reusing one step avoids duplicating that markup and styling. Before showing it, each button handler sets doneTitle.textContent and doneSub.textContent to outcome-specific copy, so the shared step still shows the right message for whichever path was taken.
Replace the placeholder logic inside the asrpGoToStore click handler with window.location.href set to your app's actual store review URL — for iOS, an itms-apps:// URL with the action=write-review query parameter and your app's numeric ID; for Android, a Play Store URL with the same intent.
Yes — the "Not now" button already closes the modal without any rating being recorded. If you want an explicit "just leave feedback" option regardless of star count, add a link on the first step that calls showStep(stepFeedback) directly, bypassing the star-based routing.