1. Home
  2. Blog
  3. Progressive Web App (PWA)

Show a QR Code Install Prompt for Your WordPress PWA

A visitor is already on your WordPress site on a laptop. They like what they see. They will not open a separate phone browser, type your URL, wait for the page, then hunt for Add to Home Screen. That path dies at the keyboard. A QR code install prompt closes the gap: the desktop page shows a scannable code, the phone camera opens your installable PWA URL, and the install story continues where phones actually live.

Progressify includes a QR code install prompt as one of five prompt styles (banner, popup, overlay, button, and QR). You pick QR when the visitor is on desktop and the install belongs on a phone. Triggers can fire on visit count, time on page, or scroll depth. Once dismissed, the prompt stays dismissed. Icon, app name, splash, and theme colour still define what the installed tile feels like. Install analytics help you see whether people act. This post stays on the QR prompt and those install rules.

Progressify is the DaftPlug PWA plugin. This post is only about the QR code install prompt and the shared install-prompt rules around it. Not push notifications, not offline cache, not the bottom tab bar, not dark mode, not shake to refresh, not pull to refresh, not wake lock, not haptics, not the native share button, not Android or iOS store builds, not smooth page transitions, not idle detection, not autosave forms, not skeleton loaders, not toast messages, not background sync. Those live elsewhere. For the branding that makes the install feel intentional after the scan, keep WordPress PWA splash screen, theme colour, and display mode nearby.

What Progressify actually ships here

Stay inside the real feature set:

  • Install prompt styles including banner, popup, overlay, button, and QR so you can match the UI to the context
  • QR as the style built for desktop-to-phone install handoff via a scannable code
  • Triggers on visit count, time on page, or scroll depth so the prompt does not fire on the first pixel of a bounce
  • Dismissed stays dismissed so people who close the prompt are not nagged on every navigation
  • Icon, app name, splash, and theme colour as the install presentation stack that still matters after someone scans
  • Install analytics so you can see install-related activity instead of guessing

This post does not invent undocumented QR pixel sizes, per-template QR allowlists Progressify does not publish, custom deep-link schemes beyond the installable PWA URL, or promises that every desktop browser will show a native beforeinstallprompt next to your QR. The product promise is a QR install prompt among the five styles, with visit, time, or scroll triggers, dismiss persistence, install presentation, and install analytics. Stay there. Push, offline, tab bar, dark mode, shake, pull, wake lock, haptics, share, store builds, transitions, idle, autosave, skeletons, toasts, and background sync are parallel tools, not this article’s job.

Why a QR install prompt matters on WordPress

Desktop traffic is often where people decide. Phones are where they install. Many WordPress sites still earn a large share of sessions on laptops and office monitors. The installable PWA experience is strongest on phones. QR bridges that mismatch without asking someone to copy a URL by hand.

Native install banners are inconsistent across browsers and devices. Some desktop browsers never offer a strong Add to Home Screen path for your PWA. A Progressify QR prompt is a deliberate UI you control: show a code, explain the scan, let the phone finish the install.

Timing beats permanent clutter. A QR block glued into every footer forever trains people to ignore it. Visit count, time on page, and scroll depth let you wait until someone has actually engaged. Dismiss persistence respects people who already said no.

Install presentation still carries the brand. A scan that lands on a white flash and a generic name feels like a bug. Splash, theme colour, icon, and app name (covered in the related post) make the post-scan open feel like a product, not a browser tab cosplay.

Analytics close the honesty loop. Without install analytics, teams argue from anecdotes. With them, you can see whether QR prompts correlate with installs after you change copy, timing, or style.

How to enable a QR code install prompt in wp-admin

Assume Progressify is installed, HTTPS works, and the PWA can already install (manifest, service worker, icons, basic identity). QR is a desktop-to-phone story. You will verify the prompt on a laptop and the install on a phone.

1. Decide that QR is the right style for this audience

Banner, popup, overlay, and button still exist for visitors who are already on a capable phone browser. QR shines when the session is on desktop and the install target is a phone. If your analytics show mostly mobile sessions already, you may prefer button or banner on mobile and reserve QR for desktop layouts. Mentally pick one primary style for the first test. Mixing five styles on day one creates mystery UX.

2. Confirm the PWA is installable before you promote a scan

A beautiful QR that opens a URL that cannot install wastes trust. Confirm icons, name, start URL, and service worker behavior on a phone first. If splash and theme colour still look unfinished, fix that pass (see the related splash and theme colour post) so the first open after scan feels intentional.

3. Open Progressify and choose the QR prompt style

In wp-admin, open Progressify. Find the install prompt settings Progressify exposes. Select QR among banner, popup, overlay, button, and QR. Keep the first pass boring: QR style on, one clear trigger rule, leave push, offline, tab bar, dark mode, shake, pull, wake lock, haptics, share, transitions, idle, skeletons, toasts, and background sync alone until the QR path is verified.

4. Set a trigger you can explain in one sentence

Pick visit count, time on page, or scroll depth. Examples that stay honest:

  • Visit count: show after the second or third visit when repeat interest is real
  • Time on page: show after someone has been reading long enough to care
  • Scroll depth: show after a meaningful scroll on a long page, not at 5 percent

Write the rule in your runbook. “QR prompt after 30 seconds on key landing pages” is a policy. “We turned on something once” is not.

5. Respect dismiss behavior

Dismissed stays dismissed. That is a feature. Do not fight it with aggressive theme banners that re-ask every pageview. If you need to re-test as an admin, use a fresh browser profile or clear the relevant site data for the test identity. Do not invent undocumented Progressify reset buttons that are not there. Plan QA with clean profiles.

6. Smoke-test desktop prompt and phone install

  1. Open a public landing URL on a desktop browser over HTTPS.
  2. Meet the trigger (second visit, wait the time, or scroll to the depth you set).
  3. Confirm the QR install prompt appears in the style you chose.
  4. Scan with a real phone camera (or the phone’s QR helper).
  5. Confirm the phone opens the installable PWA URL you intended.
  6. Complete install (or the platform’s Add to Home Screen path) and open the tile once.
  7. Confirm icon, app name, splash, and theme colour look like your brand, not a blank shell.
  8. On desktop, dismiss the prompt once, reload, and confirm it stays dismissed.
  9. Spot-check install analytics after a few real test installs so you know where to look later.

If the QR opens the wrong environment (staging, HTTP, or a preview URL), fix start URL and environment hygiene before marketing the prompt.

7. Document the enablement for the next teammate

Write one line in your internal runbook: “Progressify QR install prompt enabled on [date], trigger [visit count / time / scroll], style QR. Re-test after homepage redesigns and after icon or name changes.” Prompt UX gets blamed when designers ship a new sticky bar that covers the QR, or when marketing changes the hero and assumes the prompt moved with it.

Who this is for

Stores and product sites whose buyers research on desktop and reorder or browse later on phones.

Membership, course, and community WordPress sites that want the installed app in someone’s pocket after a desktop signup session.

Agencies shipping PWAs for clients who asked for “app-like install” and still earn most first sessions on laptops.

Content brands with long articles where scroll-depth or time-based QR prompts feel earned rather than spammy.

Anyone tired of emailing “open this on your phone and tap Add to Home Screen” as a support ritual.

This is less urgent for pure mobile-first audiences who already see phone install UI, or for intranet tools where nobody installs a public PWA. Even then, a desktop admin console that offers QR for field staff phones can still help.

What good looks like

  • A desktop visitor who meets your rule sees a Progressify QR install prompt.
  • A phone scan opens the installable PWA URL, not a random marketing redirect.
  • Banner, popup, overlay, and button remain available as alternate styles when QR is the wrong context.
  • Visit count, time on page, or scroll depth controls when the prompt appears.
  • After dismiss, the prompt stays dismissed for that visitor context.
  • Icon, app name, splash, and theme colour make the first installed open feel branded.
  • Install analytics give you a place to look after you change timing or copy.
  • Push, offline, tab bar, dark mode, shake, pull, wake lock, haptics, share, store builds, transitions, idle, autosave, skeletons, toasts, and background sync were not required for this win.
  • You did not invent custom QR branding APIs or claim every desktop browser shows a native install button beside your QR.

If the prompt never appears, confirm style is QR, confirm the trigger was actually met, confirm you are on a URL and device context Progressify will show prompts for, and confirm you did not already dismiss it on that profile. Stale dismiss state causes more false alarms than service workers for this feature.

Pitfalls (the ones that bite)

Showing QR to people already on phones. Phones do not need a camera pointed at their own screen. Prefer QR for desktop contexts. Use banner, popup, overlay, or button when the visitor is already mobile.

Firing on first paint. A QR modal at zero seconds feels like interstitial adware. Use visit count, time, or scroll so the ask follows interest.

Ignoring dismiss persistence. Re-prompting through a second theme banner teaches people to hate your brand. Trust dismissed stays dismissed.

Promoting a scan before the PWA is installable. Broken manifest, missing icons, or HTTP staging URLs turn a clever QR into a support ticket.

Skipping splash and theme colour. The related branding post matters. A successful scan into a white flash still feels unfinished.

Enabling every app-like toggle with the prompt. If QR, tab bar, dark mode, and shake all land together, you cannot tell which change moved conversion or caused a layout fight. Enable QR, verify, then add the next piece.

Forgetting install analytics. Without a read on installs, teams tweak copy forever with no signal.

Covering the QR with sticky chat widgets. Design QA on the real desktop breakpoint you care about. A chat bubble over the code is a silent failure.

Practical checklist before you call it done

  1. Confirm the PWA installs on a real phone over HTTPS without the QR path.
  2. Set icon, app name, splash, and theme colour so the post-install open looks intentional.
  3. In Progressify, choose the QR install prompt style (among banner, popup, overlay, button, QR).
  4. Configure one clear trigger: visit count, time on page, or scroll depth.
  5. Load a desktop landing URL, meet the trigger, and confirm the QR appears.
  6. Scan with a phone and confirm the installable URL opens.
  7. Install or Add to Home Screen, open once, and confirm branding.
  8. Dismiss on desktop and confirm the prompt stays dismissed.
  9. Check install analytics after test installs.
  10. Leave push, offline, tab bar, dark mode, shake, pull, wake lock, haptics, share, store builds, transitions, idle, autosave, skeletons, toasts, and background sync for separate passes if they are not already stable.
  11. Re-test after the next homepage or sticky-widget redesign.
  12. Write the trigger rule and date in the team runbook.

Takeaway

Desktop visitors often decide. Phones often install. A WordPress PWA that ignores that handoff leaves growth on the table. Progressify’s QR code install prompt is one of five prompt styles, built for scannable desktop-to-phone install, with visit count, time on page, or scroll depth triggers, dismiss persistence, install presentation through icon, name, splash, and theme colour, and install analytics to keep you honest.

Progressify handles the QR install prompt alongside the rest of the PWA stack, without asking you to maintain a third-party QR plugin that knows nothing about your manifest. Enable QR once. Test with a laptop and a phone you actually hold. Keep sibling PWA features as separate enablement work.

One Pro membership unlocks Progressify plus Lightify, Generatify, Rankify, and Snapshotify. New Pro plugins join existing memberships. Plans differ by site count only (Pro $37.99 for 1 site, Pro Plus $74.99 for 5, Pro Max $138.99 for 100), with a 14-day money-back guarantee. See pricing when desktop visitors should scan their way into your installed app.

Choose QR. Set a trigger that respects attention. When a real phone scan installs the PWA you meant, the install story finally matches how people move between screens.