How to implement our Smartbanner
The NewStore Shopping app Smartbanner is a nicely designed pop-over that can be displayed on your mobile site. The Smartbanner plays an important part in letting your customers know about your app and getting them to install it.
How does our smartbanner work?
Download or open direct
The smartbanner shows a "download" and an "open directly" button. The download button leads to the App Store or Google Play Store so web customers can install your app right away. Customers who already have your app installed, can open the app by clicking the "open directly" button. A deeplink guides them to your app.
App Store rating
Besides the buttons, we also show the real-time rating from the App Store and Google Play Store on our Smartbanner. This way, we let your web customers know that your app has been reviewed and rated. The better your rating, the more web customers will download your app.
Dismiss the Smartbanner
When customers prefer to browse your mobile site instead of downloading your app, they can close the Smartbanner using the cross icon in the right corner. In that case, the Smartbanner won't show for 30 days for that specific device.
App Store banner
Besides the Newstore Shopping App Smartbanner, the default App Store Smartbanner will show on the top of your mobile site. This banner shows an "open" button when you already have the app installed on your device. The iOS App Store Smartbanner only shows when Universal links have been implemented for your app. On Android, only the Newstore banner shows.
How to implement our Smartbanner?
For each webpage where you want to show the Smartbanner, you should:
Add HTML tags
Add smartbanner script tag
Construct the associated deeplink url
Step 1: Add HTML tags
The following HTML tags must be added to the HEAD section. Both the app and the Smartbanner use these tags to be able to show the product/category that is being displayed when opening the app. Despite the iOS naming this is for both iOS and Android.
<meta property="al:ios:app_name" content="App Name">
<meta property="al:ios:app_store_id" content="{appstore_id*}">
<meta property="al:ios:url" content="{correct app deeplink}">The al:ios:url meta tag contains the deeplink as described in the first section.
These tags should be installed on all pages where you want the smartbanner to be displayed.
* To find the App Store ID, the app needs to be live in the App Store. When that is live, you can extract the ID from the app URL. When the URL is https://itunes.apple.com/nl/app/scotch-soda/id1062215070?mt=8 (https://itunes.apple.com/nl/app/scotch-soda/id1062215070?mt=8), the app ID can be found at the end of the URL. In this case: 1062215070.
Step 2: Add Smartbanner script tag
Add the following HTML script tag to the body of your webpage:
<script src="{{request_url}}" defer="true" ></script>The request_url can be defined as follows:
https://{storename}.api.highstreetapp.com/smartbanner/{hash}
The value of hash is a base64 url encoded string of the following JSON:
{ "store": "<storename>", "host": "www.storewebsite.com", "locale": "en_NL" }store: the store name as provided by Newstore
host: the host name of the website that wants to show the smartbanner
locale: the locale of the website. Formatted as {language}_{country}, for example: en_US
The JSON should then be base64 URL encoded.
Step 3: Construct Deeplink URL
Use the following article for a detailed description on how to construct a Deeplink URL: Setting up universal links
Advanced Configuration
After implementing the Smartbanner on your website after following the steps above. it will work right out of the box using a set of default configuration options. However if you would like to change some of these options we provide a simple method to do so.
The configuration object
When the page is loaded the Smartbanner will read it's configuration from the Javascript object window.highstreetBanner.config. Therefore creating an object with the exact same name will result in your configuration values being used instead of the default values.
Note: please make sure that you have initialised this configuration object before our Javascript is loaded, by placing it higher in the DOM for instance.
Example:
<body>
<script type="text/javascript">
window.highstreetBanner = {
config: {
// Your custom configuration values here
}
};
</script>
.. webpage contents
<script type="text/javascript" src="...Newstore smartbanner url here"></script> </body>Below you will find an example configuration object with most of the configuration options set.
window.highstreetBanner = {
config: {
// Give the banner a custom HTML id
elementId: 'my-smart-banner',
// Insert the banner html at the top of the page
insert: (html, done) => {
$('body').prepend(html)
done()
},
// Set a custom name for the banner's cookie
cookieName: 'my-smart-banner-cookie'
// Let the cookie expire after 1 day
cookieExpiration: 1,
}
};
Hiding and showing the Smartbanner programatically
Sometimes you might want to show the Smartbanner in the first place, but hide it later when some other UI element becomes more important (a modal for instance). In that case you can simply call a method on the window.highstreetBanner object to hide the Smartbanner and show it again later.
window.highstreetBanner.show(); // Showing the banner
window.highstreetBanner.hide(); // Hiding the banner Customising the Smartbanner copy
To update your Smartbanner copy, create a new ticket with expert services and provide details of the changes you would like to make.