App Download Card Widget
Show off your iPhone and Android app on your website: app icon, name, tagline, a rating line in your words, a few feature bullets and download buttons for the App Store, Google Play and one other store, with an optional QR code so desktop visitors can scan straight to their phone.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/app-download-card" title="App Download Card by A2Z Tools" width="100%" height="360" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="app-download-card" data-height="360"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Store buttons are matched to where they lead: the App Store button appears only for an apps.apple.com or itunes.apple.com address and the Google Play button only for play.google.com, so a look-alike such as apps.apple.com.evil.example is refused and no label can point somewhere else. A third button takes Label | https address for the Galaxy Store, AppGallery or a direct download page. Buttons are drawn in A2Z's own style with plain device icons rather than Apple's or Google's badge artwork, because both badge guidelines forbid recolouring or otherwise altering the official badges. The icon must be an https image; without one, or if it fails to load, the first letters of the app name are shown. The rating is the text you type, marked with an asterisk as stated by the publisher. The QR code encodes a smart link you supply - one address that sends iPhones and Android phones to the right store - and its engine loads only when the QR option is on.
Method
- App Store button: https URL whose host is apps.apple.com or itunes.apple.com
- Google Play button: https URL whose host is play.google.com
- Other: Label | https URL; QR (optional): your https smart link, error correction M
Worked examples
Default sample
Inputs: No settings
Result: Trailmate with App Store (https://apps.apple.com/app/id0000000000) and Google Play (https://play.google.com/store/apps/details?id=com.example.trailmate) buttons
The generic sample is shown until you set a name or store link; its App Store id 0000000000 belongs to no real app.
Mislabelled store link
Inputs: ios=https://evil.example/app; other=Galaxy Store | https://galaxystore.samsung.com/detail/com.acme
Result: One button: Galaxy Store; preview note: App Store button skipped
An App Store button must lead to apps.apple.com or itunes.apple.com.
Limitations
- Ratings, download counts and prices are your own text; nothing is read from the stores.
- One extra store button besides the App Store and Google Play.
- The QR needs a smart link of your own; the card does not create redirects.
Where publishers use it
- A restaurant or retailer's website promoting its ordering or loyalty app
- A SaaS product page offering the companion mobile app next to the web sign-up
- A local council, transit or event site pointing visitors to the official app
- A game studio's landing page with App Store, Google Play and Galaxy Store links
- A gym or club members' page with a QR code that desktop visitors scan with their phone
Questions
Why aren't these the official black App Store and Google Play badges?
Apple's marketing guidelines say to use only the badge artwork Apple provides and not to modify, angle or animate it; Google's badge guidelines say not to change the badge colour or adjust it in any way. A widget that follows your accent colour and dark mode would be altering them. If you want the official badges, download them from Apple's App Store Marketing Tools and Google's Partner Marketing Hub and place them on your own page, at least 40 px tall for Apple and 28 px for Google.
What is a smart link and do I need one for the QR?
A smart link is one address that checks the visitor's device and redirects to the App Store or Google Play. Many app-marketing and link services offer one, or your developer can add a small redirect page to your site. The QR needs it because a single code cannot point at two stores; without a smart link the QR stays off.
Where do I find my store links?
App Store: your app's page, of the form https://apps.apple.com/<country>/app/<name>/id<number>; the country part may be left out. Google Play: https://play.google.com/store/apps/details?id=<package name>, for example com.example.app.
Can I show my star rating?
Yes, as text you write, such as 4.7 average from 2,300 ratings. The card does not fetch store ratings, so it marks the line with an asterisk and the note Rating as stated by the app publisher. Update it when your rating changes.
Which app icon image works best?
A square https PNG or WebP of your store icon, at least 144 x 144 px so it is sharp on high-density screens; the card rounds the corners itself. If the image cannot load, the card falls back to the app's initials on your accent colour.
Sources
- App Store Marketing Guidelines - Apple Developer . Use only Apple-provided badge artwork; do not modify, angle or animate it; minimum 40 px onscreen; badges from App Store Marketing Tools. Checked 2026-10-01.
- Google Play lockups, icons and badges - Google Partner Marketing Hub . Do not change the badge colour or adjust it in any way; minimum 28 px digital height; localized badges. Checked 2026-10-01.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools App Download Card https://a2z.tools/embed/app-download-card
<a href="https://a2z.tools/embed/app-download-card">A2Z Tools App Download Card</a>
[A2Z Tools App Download Card](https://a2z.tools/embed/app-download-card)
App Download Card by A2Z Tools - https://a2z.tools/embed/app-download-card
Related widgets
-
Turn any link or text into a QR code, pick colours and error correction, download PNG or SVG.
-
Your average rating, review count and star breakdown bars, with a link to where the reviews live.
-
A mobile-first profile with avatar, bio, featured link buttons and social badges in soft, bold or outline style.
-
Up to 12 social profile links recognised by host name, as icons, labels or buttons.
-
Return on ad spend as a multiple and a percentage, with break-even ROAS from your margin.
-
Solve CPM, campaign cost or impressions from the other two.