The Highstreet smartbanner is a nicely designed pop-over showing 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 Highstreet 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 only shows when Universal Links have been implemented for your app. On Android, only the Highstreet 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="Store Name">

<meta property="al:ios:app_store_id" content="{appstore_id*}">

<meta property="al:ios:url" content="{storename}://categories/432/">


The al:ios:url meta tag contains the deeplink as described in the first section.


These tags should be installed on all pages. 


* To be able 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, 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:


  • On your production website:
https://{storename}.api.highstreetapp.com/smartbanner/{hash} 


  • On your test webite:
https://{storename}-staging.api-dev.highstreetapp.com/smartbanner/{hash}


The value of hash is a url encoded string of the following JSON: 

{

  "store": "<storename>",

  "host": "www.storewebsite.com",

  "locale": "en_NL",

}


  • store: the store name as provided by Highstreet
  • host: the host name of the website that wants to show the smartbanner
  • locale: the Demandware locale of the website. Formatted as {language}_{country}, for example: en_US


The JSON should then be base64-encoded. You should replace + by -, replace / by _, and = by ~ to make the hash URL safe.


Step 3: Construct Deeplink URL

Use the following article for a detailed description on how to construct a Deeplink URL: How to construct a Deeplink URL.


Advanced smartbanner configuration

For most use-cases our default settings will be sufficient, however if you'd like a little more customisability you can do so by reading the following article: Advanced smartbanner configuration