Configure smart app banners

Configure smart app banners

1. Introduction to smart app banners

A smart app banner is a banner at the top or bottom of the screen on a mobile website to inform and encourage users to download or open the related app. 

Key characteristics of smart app banners:
  1. Creates a direct link between the mobile website and its dedicated app.
  2. Users can easily interact with the banner by tapping on it, initiating actions such as viewing the app on the App Stores or opening if the app is already installed.
  3. It’s possible to customize the content of smart app banners using the script JMango360 provides for you. 
You can change the UI of your banner, but it requires your time and effort. You can do this by either adjusting the script we provide or by adding a different script, although we currently don't offer an alternative script for this purpose.

2. Smart app banner setup

2.1. Default smart app banner on Safari

Apple has provided an approach to setting up smart app banners on Safari. To add a smart app banner to your website, include the given meta tag in the head element of the page where you’d like the banner to appear. For further information on how to implement a smart app banner on Safari, please read Promoting Apps with Smart App Banners.

2.2.  Smart app banner setup with a custom script

To set up a smart app banner on iOS and Android devices using a custom script, configure JMango360’s smart app banner script and provide the script in your BigCommerce backend. 
If you activate a smart app banner using both Apple’s meta tag and our script, the banner on Safari defined by Apple's meta tag will override the one set by our custom script. 
Step 1: Configure the first part of the script.
You are required to provide the information in the first part of the script.

  1. appleAppId: Enter your Apple app ID. 
  2. googleAppId: Enter your Google app ID. 
  3. dayHidden: The number of days to hide the banner after users dismiss it. We recommend setting this parameter between 7-21 days.
  4. dayRemember: The number of days to hide the banner after the VIEW button is clicked.  We recommendsettingt this parameter between 7-21 days.
  5. bannerTitle: The title you want to display on the smart app banner. 
  6. bannerAuthor: Enter your company name
  7. bannerButtonContent: The button label to be displayed on the banner.
  8. appStoreApple: The name of the store where your iOS app is available.
  9. appStoreGoogle: The name of the store where your Android app is available.
  10. priceApple: The price of your iOS app. 
  11. priceGoogle: The price of your Android app. 
  12. icLauncherUrl:  Provide the URL leading to your app icon. If you don’t know how to get the URL, please contact us for help. 
  1. Below is a URL example that links to an app icon:  https://d2dglb1590sxlb.cloudfront.net/resources/633bf6c246e0fb0001ccb22e/656d5cdd46e0fb00074b2915?size=200&time=1701666016691 
  1. storeLanguage: Enter the language code for the App Stores.
Step 2: Provide the script in the BigCommerce backend.
  1. In your BigCommerce backend, navigate to Storefront  > Script Manager. 
  2. Scroll down to the Script type section, and select Script.
  3. Copy and paste the whole script (including the part you configured) into the Script contents section. Finally, click Save.


All done!

If you have any further questions, please reach out to us at customer.success@jmango360.com!

    • Related Articles

    • Getting started with Alphonso

      Welcome to Alphonso - the advanced app builder designed to empower you to create exceptional mobile apps. This article will take you on a guided tour of Alphonso and the core pages. By the end, you'll have a general understanding of leveraging ...

    • Configure the product detail page

      In this article, we'll walk you through the introduction of product detail blocks how to leverage them to create an impactful product detail page. Note: This user guide is applicable to BigCommerce. 1. About product detail blocks When you open the ...

    • Build custom pages

      In this article, we'll elaborate on the possibilities of custom pages. You can use this feature to provide information about, for example, the company, FAQs, shipping information, and more. Note: This user guide is applicable to BigCommerce. 1. About ...

    • Build the categories page

      In this article, we'll take you through the step-by-step process of creating your categories page. Note: This user guide is applicable to BigCommerce. 1. About the category structure Here are some important notes on the category structure in ...

    • Configure the My Account page

      In this article, we'll explore the elements and configuration options that allow you to create a tailored and engaging experience for your app users. 1. About the My Account page The My Account page in your app is a crucial hub of information and ...