The smart banner (popover) prompts mobile website visitors to open or download your app. Below are screenshots showing the iOS and Android variants:
iOS smart banner example:
Android smart banner example:
Insert the code snippet below into the <head> tag of pages where you want the popover to appear. Note: you can add it to the homepage and/or just your app info page on the website.
You'll need to update the parameters in the code as needed, e.g. title, author, etc.
We recommend setting the position to "top" and leaving price / price-suffix empty.
Utilize the following deep links and insert at "button-url-apple" or "button-url-google":
iOS: https://bsomusic.app.link/rKPuT3nRc1b
Android: https://bsomusic.app.link/rKPuT3nRc1b
<!-- Start SmartBanner configuration -->
<meta name="smartbanner:title" content="Smart Application">
<meta name="smartbanner:author" content="SmartBanner Contributors">
<meta name="smartbanner:price" content="">
<meta name="smartbanner:price-suffix-apple" content="">
<meta name="smartbanner:price-suffix-google" content="">
<meta name="smartbanner:icon-apple" content="https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/44/ec/65/44ec6545-f2f3-af27-bf38-849c7f6a4a9f/AppIcon-0-0-1x_U007emarketing-0-8-0-85-220.png/460x0w.webp">
<meta name="smartbanner:icon-google" content="https://play-lh.googleusercontent.com/H0FnHIcDgM7O6wVlrIe5RZQdykJflz6qqnLmBN_oew7nO4dwhqU_cvpR06eeaXESEpE=w480-h960-rw">
<meta name="smartbanner:button" content="VIEW">
<meta name="smartbanner:button-url-apple" content="https://....app.link/app-store">
<meta name="smartbanner:button-url-google" content="https://...app.link/play-store">
<meta name="smartbanner:enabled-platforms" content="android,ios">
<meta name="smartbanner:close-label" content="Close">
<meta name="smartbanner:position" content="top">
<!-- End SmartBanner configuration -->
<link rel="stylesheet" href="https://code.easy-connect.io/smartbanner/smartbanner.min.css" />
<script async src="https://code.easy-connect.io/smartbanner/smartbanner.min.js"></script>Here is an example from Schaubuehne Berlin:
<meta name="smartbanner:title" content="Die offizielle Schaubühnen-App!">
<meta name="smartbanner:author" content="Noch einfacher Tickets buchen und bei ausverkauften Vorstellungen benachrichtigt werden!">
<meta name="smartbanner:price" content="">
<meta name="smartbanner:price-suffix-apple" content="">
<meta name="smartbanner:price-suffix-google" content="">
<meta name="smartbanner:icon-apple" content="https://s3.eu-west-1.amazonaws.com/images.easy-connect.io/sbb/icon.jpeg">
<meta name="smartbanner:icon-google" content="https://s3.eu-west-1.amazonaws.com/images.easy-connect.io/sbb/icon.jpeg">
<meta name="smartbanner:button" content="Öffnen">
<meta name="smartbanner:button-url-apple" content="https://schaubuehne.app.link/appstore">
<meta name="smartbanner:button-url-google" content="https://schaubuehne.app.link/playstore">
<meta name="smartbanner:enabled-platforms" content="android,ios">
<meta name="smartbanner:close-label" content="Schließen">
<meta name="smartbanner:position" content="top">Once closed, smartbanner will reappear if site path changes. It is default behaviour. The following example would keep smartbanner closed site-wide (but only when user has actually closed it):
<meta name="smartbanner:hide-path" content="/">By default, smartbanner would not reappear if closed. This can be prevented with the hide-ttl option. The following example would keep smartbanner closed for 10 seconds (10000 ms):
<meta name="smartbanner:hide-ttl" content="10000">If you want to have a different button label for each platform, you can use the following meta tags:
<meta name="smartbanner:button-apple" content="Download on the App Store">
<meta name="smartbanner:button-google" content="Get it on Google Play">Smartbanner uses built-in platform-specific styles (e.g. smartbanner--ios or smartbanner--android), but this behavior can be altered by adding a custom design modifier that allows use of:
Externally defined styles, e.g.:
<meta name="smartbanner:custom-design-modifier" content="mysite.com">This would add smartbanner--mysite.com class on the wrapper.
Forced platform-specific styles on all platforms, e.g.:
<meta name="smartbanner:custom-design-modifier" content="ios">This would add smartbanner--ios class on the wrapper regardless of actual platform.