Smart App Banner ─ smartbanner-tsx

Installation


          npm install smartbanner-tsx
          
          yarn add smartbanner-tsx
          
          pnpm add smartbanner-tsx

Usage

Remember to add following meta tags in your HTML page: (Use YouTube app as example)


          <head>
            <meta name="apple-itunes-app" content="app-id=544007664" />
            <meta name="google-play-app" content="app-id=com.google.android.youtube" />
            <link rel="apple-touch-icon" href="icon.webp" />
            <link rel="android-touch-icon" href="icon.webp" />
          </head>

And SmartBanner component usage:


          // ...
          import { SmartBanner } from "smartbanner-tsx";
          import "smartbanner-tsx/dist/style.css";
          
          // ...
          
          return (
            <SmartBanner />
          );

Props

Prop	Default	Description
`title`	─	`string` App title displayed in the banner.
`author`	─	`string` Name of the app author or publisher.
`translations`	`{ button: "View", price_ios: "Free", price_android: "Free", store_ios: "On the App Store", store_android: "In Google Play", }`	`Record<string, string>` Custom UI text translations.
`url`	`{ ios: "", android: "" }`	`Record<'ios' \| 'android', string>` Custom app store URLs for each platform.
`meta`	`{ ios: "apple-itunes-app", android: "google-play-app" }`	`Record<'ios' \| 'android', string>` The custom meta tag name. It provide an option to enforce using custom meta tag to show smart banner.
`placement`	`'top'`	`'top' \| 'bottom'` Banner position on the screen: either at the top or bottom.
`force`	─	`'ios' \| 'android'` Force banner to show for a specific platform (useful for testing).
`ignoreIosVersion`	`false`	`boolean` If `true`, the banner will show even on iOS versions that support native Smart Banners.
`daysHidden`	`15`	`number` Number of days to hide the banner after the close button is clicked.
`daysReminder`	`90`	`number` Number of days to hide the banner after the install/view button is clicked.
`storeLang`	`navigator.language` or `'us'`	`string` Language code used to generate App Store or Play Store URLs.
`withPortal`	`true`	`boolean` Whether to render the banner using a React Portal.
`portalTargetId`	─	`string` Optional target element ID for the portal. Defaults to document.body if not provided.
`onClose`	─	`() => void` Optional callback triggered when the close button is clicked.
`onInstall`	─	`() => void` Optional callback triggered when the install/view button is clicked.