App Store Rating Prompt Modal — Free HTML CSS JS Snippet

<button class="asrp-trigger" id="asrpTrigger">Open rating prompt</button>

<div class="asrp-overlay" id="asrpOverlay" hidden>
  <div class="asrp-modal" role="dialog" aria-modal="true" aria-labelledby="asrpTitle">
    <div class="asrp-step" id="asrpStepRate">
      <div class="asrp-app-icon" aria-hidden="true">FT</div>
      <h3 id="asrpTitle">Enjoying FwdTools?</h3>
      <p class="asrp-sub">Your feedback helps other developers find this app.</p>
      <div class="asrp-stars" id="asrpStars">
        <span data-v="1">★</span><span data-v="2">★</span><span data-v="3">★</span><span data-v="4">★</span><span data-v="5">★</span>
      </div>
      <button class="asrp-btn asrp-ghost" id="asrpNotNow">Not now</button>
    </div>

    <div class="asrp-step" id="asrpStepStore" hidden>
      <div class="asrp-emoji">🎉</div>
      <h3>Thanks for the love!</h3>
      <p class="asrp-sub">Mind leaving a quick rating on the App Store? It takes 10 seconds.</p>
      <button class="asrp-btn asrp-primary" id="asrpGoToStore">Rate on the App Store</button>
      <button class="asrp-btn asrp-ghost" id="asrpMaybeLater">Maybe later</button>
    </div>

    <div class="asrp-step" id="asrpStepFeedback" hidden>
      <div class="asrp-emoji">💬</div>
      <h3>Help us improve</h3>
      <p class="asrp-sub">Sorry to hear that. What could be better?</p>
      <textarea id="asrpFeedback" placeholder="Tell us what went wrong..."></textarea>
      <button class="asrp-btn asrp-primary" id="asrpSendFeedback">Send feedback</button>
      <button class="asrp-btn asrp-ghost" id="asrpSkipFeedback">Skip</button>
    </div>

    <div class="asrp-step" id="asrpStepDone" hidden>
      <div class="asrp-emoji">✅</div>
      <h3 id="asrpDoneTitle">All set</h3>
      <p class="asrp-sub" id="asrpDoneSub">Thanks for helping us improve.</p>
      <button class="asrp-btn asrp-primary" id="asrpClose">Close</button>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.asrp-trigger{padding:12px 20px;background:#6366f1;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer}
.asrp-trigger:hover{background:#4f46e5}
.asrp-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;animation:asrpFade .15s ease}
.asrp-overlay[hidden]{display:none}
@keyframes asrpFade{from{opacity:0}to{opacity:1}}
.asrp-modal{background:#fff;border-radius:18px;padding:30px 26px;width:100%;max-width:340px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:asrpPop .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes asrpPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.asrp-step[hidden]{display:none}
.asrp-app-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.asrp-emoji{font-size:38px;margin-bottom:10px}
.asrp-modal h3{font-size:17px;font-weight:800;color:#0f172a;margin-bottom:6px}
.asrp-sub{font-size:12.5px;color:#64748b;line-height:1.5;margin-bottom:18px}
.asrp-stars{display:flex;gap:6px;justify-content:center;margin-bottom:20px;font-size:32px}
.asrp-stars span{color:#e2e8f0;cursor:pointer;transition:color .1s,transform .1s}
.asrp-stars span:hover{transform:scale(1.1)}
.asrp-stars span.on{color:#f59e0b}
.asrp-btn{width:100%;padding:12px;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;border:none;font-family:inherit;margin-bottom:8px}
.asrp-primary{background:#6366f1;color:#fff}
.asrp-primary:hover{background:#4f46e5}
.asrp-ghost{background:none;color:#94a3b8}
.asrp-ghost:hover{color:#64748b}
textarea{width:100%;min-height:80px;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:9px;font-family:inherit;font-size:13px;resize:vertical;margin-bottom:14px;outline:none}
textarea:focus{border-color:#6366f1}

(function(){
  var trigger = document.getElementById('asrpTrigger');
  var overlay = document.getElementById('asrpOverlay');
  var stepRate = document.getElementById('asrpStepRate');
  var stepStore = document.getElementById('asrpStepStore');
  var stepFeedback = document.getElementById('asrpStepFeedback');
  var stepDone = document.getElementById('asrpStepDone');
  var stars = Array.prototype.slice.call(document.querySelectorAll('#asrpStars span'));
  var doneTitle = document.getElementById('asrpDoneTitle');
  var doneSub = document.getElementById('asrpDoneSub');

  function showStep(step) {
    [stepRate, stepStore, stepFeedback, stepDone].forEach(function (s) { s.hidden = (s !== step); });
  }

  function open() { overlay.hidden = false; showStep(stepRate); highlightStars(0); }
  function close() { overlay.hidden = true; }

  function highlightStars(value) {
    stars.forEach(function (s) { s.classList.toggle('on', Number(s.getAttribute('data-v')) <= value); });
  }

  trigger.addEventListener('click', open);
  overlay.addEventListener('click', function (e) { if (e.target === overlay) close(); });
  document.getElementById('asrpNotNow').addEventListener('click', close);
  document.getElementById('asrpMaybeLater').addEventListener('click', close);
  document.getElementById('asrpSkipFeedback').addEventListener('click', close);
  document.getElementById('asrpClose').addEventListener('click', close);

  stars.forEach(function (star) {
    star.addEventListener('mouseenter', function () { highlightStars(Number(star.getAttribute('data-v'))); });
    star.addEventListener('click', function () {
      var value = Number(star.getAttribute('data-v'));
      // route: 4-5 stars -> ask for a public store rating; 1-3 stars -> ask for private feedback first
      if (value >= 4) showStep(stepStore);
      else showStep(stepFeedback);
    });
  });
  document.getElementById('asrpStars').addEventListener('mouseleave', function () {
    var onStars = stars.filter(function (s) { return s.classList.contains('on'); });
    highlightStars(onStars.length);
  });

  document.getElementById('asrpGoToStore').addEventListener('click', function () {
    // in production this opens the platform's real store review URL
    doneTitle.textContent = 'Thanks for rating us!';
    doneSub.textContent = 'You are being redirected to the App Store.';
    showStep(stepDone);
  });

  document.getElementById('asrpSendFeedback').addEventListener('click', function () {
    var text = document.getElementById('asrpFeedback').value.trim();
    doneTitle.textContent = 'Feedback received';
    doneSub.textContent = text ? 'Thanks — our team will review this personally.' : 'Thanks for letting us know.';
    showStep(stepDone);
  });
})();