Split Panel Phone QR Code CTA Block for React

The code is generated in the browser from APP_URL at the top of the file; change it to your download page, or to a smart link that sends iPhones and Android phones to their own store. The same address goes into the body of the email link, so the two always agree. Use a short, stable URL: shorter addresses give a simpler code that scans faster at small sizes.

Yes. The code's frame is always black on white, whatever the preset or the page's theme, and it sits on the phone's screen with a margin around it, so scanners get the contrast and the quiet zone they need. Don't recolour it to match a theme: a low-contrast code is the most common reason one fails to scan.

The phone is a few elements of CSS: a bezel, a notch, a home bar and a screen with a fixed 1:2 shape and a width of min(12.5rem, 55vw), so it never overflows a narrow screen. It sits in a frame drawn with Guides on a tinted box, with + marks on its corners. Replace the screen's content with an image and keep the bezel; keep the QR code too if you want visitors on a desktop to be able to scan it.

The code is an image with the name "QR code that opens the app download page", and the text around it, "Scan to get the app" and "Point your camera at the code", is real text. Since a screen reader user can't scan, the "Email me the link" action is the equivalent path, and the paragraph says so.

It is a mailto: link: it opens the visitor's mail program with a subject and the app address in the body, so they can send it to themselves and open it on their phone. It sends nothing from your server. If you would rather collect the address, swap it for the "text me the link" form in the dark store-buttons block.

Below the large breakpoint the two parts stack, text first, so the Shine Button is on the first screen, and the framed phone follows under a solid rule. On a phone the code is only a picture of what a desktop visitor would scan, so consider hiding the phone there and keeping the two actions.