SmartBanner

Add a lightweight iOS and Android app banner to any website.

SmartBanner is a free, static app banner for websites. It loads from https://clickyourapp.com/js/smartbanner.js, so no backend request is needed after the script file is served.

Use the generator at /smartbanner/ to search your app, fill the App Store and Google Play metadata, and copy a ready-to-use snippet.

Quick Start

Paste the generated script before the closing </body> tag:

<script
  async
  src="https://clickyourapp.com/js/smartbanner.js"
  data-title="Example App"
  data-tagline="Your app tagline"
  data-icon="https://wsrv.nl/?url=https%3A%2F%2Fexample.com%2Ficon.png&n=-1"
  data-apple-id="123456789"
  data-apple-bundle-id="com.example.app"
  data-google-id="com.example.app"
  data-position="bottom"
  data-theme="light"
  data-button="Download"
  data-open-button="Open"
></script>

The banner only renders on mobile by default. Add data-show-on-desktop="true" when you want to preview it on desktop.

Store Routing

SmartBanner routes visitors to the right store based on their device:

When only an app ID is provided, SmartBanner builds the store URL automatically:

data-apple-id="123456789"
data-google-id="com.example.app"

If an ID is unavailable, pass explicit store URLs:

data-apple-url="https://apps.apple.com/app/id123456789"
data-google-url="https://play.google.com/store/apps/details?id=com.example.app"

Open Installed Apps

The default button should point to the store and use a download-style label:

data-button="Download"
data-open-button="Open"

When the browser confirms that the app is installed, SmartBanner changes the button label to Open.

Android can use a generated intent URL from the Google Play package ID. The intent opens the app when installed and falls back to Google Play through S.browser_fallback_url when it is not installed.

iOS requires an app-specific open URL, usually a Universal Link or custom URL scheme:

data-apple-open-url="example://"

You can also set a shared open URL for both platforms:

data-open-url="example://"

For LLMBase, for example:

data-open-url="llmbase://"
data-apple-open-url="llmbase://"
data-google-open-url="llmbase://"

Browsers do not provide universal installed-app detection for every native app. If the installed state cannot be confirmed, SmartBanner keeps the Download label and the store fallback.

Images

Always use a proxied icon URL. The generator does this automatically through wsrv.nl:

data-icon="https://wsrv.nl/?url=https%3A%2F%2Fexample.com%2Ficon.png&n=-1"

If the App Store and Google Play icons differ, use platform-specific icons:

data-apple-icon="https://wsrv.nl/?url=https%3A%2F%2Fexample.com%2Fios.png&n=-1"
data-google-icon="https://wsrv.nl/?url=https%3A%2F%2Fexample.com%2Fandroid.png&n=-1"

Ratings

SmartBanner can show ratings instead of developer text:

data-rating="4.8"
data-rating-count="1204"
data-apple-rating="4.7"
data-apple-rating-count="900"
data-google-rating="4.9"
data-google-rating-count="300"

Platform-specific ratings are used first. If no rating is available, SmartBanner shows data-tagline, then data-author.

Positions and Themes

Two positions are supported:

data-position="top"
data-position="bottom"

top is a fixed bar above the page content. bottom is a floating card near the bottom of the viewport.

Themes:

data-theme="auto"
data-theme="light"
data-theme="dark"

Visibility Controls

Limit platforms:

data-enabled-platforms="ios,android"

Preview on desktop:

data-show-on-desktop="true"

Filter user agents:

data-include-user-agent-regex="Android|iPhone"
data-exclude-user-agent-regex="Googlebot|Bingbot"

Dismissal

Closed banners are hidden in localStorage.

data-hide-days="30"
data-hide-scope="path"

Use data-hide-scope="site" when closing the banner should hide it across the whole website.

Set a custom key when you need to reset dismissal state after changing the campaign:

data-storage-key="example-smartbanner:v2"

Events

SmartBanner dispatches namespaced events:

document.addEventListener("cya.smartbanner.view", (event) => {
  console.log(event.detail.platform, event.detail.url);
});

document.addEventListener("cya.smartbanner.clickout", (event) => {
  console.log(event.detail.url);
});

document.addEventListener("cya.smartbanner.exit", () => {
  console.log("closed");
});

It also dispatches compatibility events:

smartbanner.view
smartbanner.clickout
smartbanner.exit

Manual API

Set data-api="true" to load the runtime without rendering immediately:

<script
  async
  src="https://clickyourapp.com/js/smartbanner.js"
  data-api="true"
  data-title="Example App"
  data-google-id="com.example.app"
></script>

Then control it from JavaScript:

window.ClickYourAppSmartBanner.show();
window.ClickYourAppSmartBanner.hide();

Attribute Reference