Smart App Banner React component
An app install bar for mobile visitors: icon, rating and an Open button that links to the right store for their device, and it stays away once closed.
About the Smart App Banner component
Smart App Banner invites mobile visitors to your app without getting in their way. It shows your icon, name and rating in one slim bar, and the button goes to the right store for their device.
Close it once and it stays away for as long as you choose, so people are never asked twice in a visit.
When to use it
Use it on mobile web when your app does the same job better, like shopping, banking or media.
Keep it to pages where the app helps. A full-screen install prompt would drive people away.
Installation
Add the Smart App Banner component to your project with the shadcn CLI. It lands in components/smart-app-banner.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/smart-app-bannerProps
<SmartAppBanner /> accepts 14 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| name | string | "Tempo" |
| publisher Second line, usually the maker. | string | "Tempo Labs" |
| rating Out of five. Pass null to hide the stars. | number | null | 4.8 |
| reviews Number of ratings beside the stars. | string | "12k" |
| icon App icon. Leave it out for a simple drawn one. | string | — |
| iosUrl | string | "#" |
| androidUrl | string | "#" |
| fallbackUrl Used when the platform isn't iOS or Android. | string | "#" |
| platform Force a platform instead of reading the browser. | "ios" | "android" | "other" | — |
| actionLabel | string | "Open" |
| rememberDays Days to stay away after being closed. 0 never remembers. | number | 14 |
- theme"dark" | "light"Default: "dark"
- namestringDefault: "Tempo"
- publisher
Second line, usually the maker.
stringDefault: "Tempo Labs" - rating
Out of five. Pass null to hide the stars.
number | nullDefault: 4.8 - reviews
Number of ratings beside the stars.
stringDefault: "12k" - icon
App icon. Leave it out for a simple drawn one.
string - iosUrlstringDefault: "#"
- androidUrlstringDefault: "#"
- fallbackUrl
Used when the platform isn't iOS or Android.
stringDefault: "#" - platform
Force a platform instead of reading the browser.
"ios" | "android" | "other" - actionLabelstringDefault: "Open"
- rememberDays
Days to stay away after being closed. 0 never remembers.
numberDefault: 14
Show all 14 propsShow fewer
| storageKey Key used to remember that it was closed. | string | "smart-app-banner" |
| onDismiss | () => void | — |
- storageKey
Key used to remember that it was closed.
stringDefault: "smart-app-banner" - onDismiss() => void
Smart App Banner FAQ
- How does it pick the store?
- It reads the browser's user agent after it loads. Pass platform to force one.
- How long does it stay closed?
- rememberDays sets it. Use 0 to show it on every visit.
- Can I use my real app icon?
- Yes, with icon. Without it, a simple tile shows the first letter of the name.
- Does it work if storage is blocked?
- Yes. It simply shows again next time.
