Add an App Download Banner to Your Web Page

Let’s learn how to add a slick app download banner to your website! Apple officially calls this a Smart App Banner, because it changes its wording based on if the user has the app installed. If the app isn’t installed, the banner will prompt the user to view it on the App Store. If the app is installed, an “open” button will appear that will take the user to your app. You can see an example of this banner on my Wordie app website (be sure to use an iOS device or you won’t see it 💡).

So how do we add this banner? Just drop in a specific meta tag into your website header on each page where you want the banner to appear. Here’s what the tag looks like:

<meta name="apple-itunes-app" content="app-id=[APP_ID]">

Of course you’ll replace [APP_ID] with the Apple Id associated with your app. To find this ID, you can go to App Store Connect then select My Apps, click your app, select App Information in the left sidebar & then copy the app’s Apple ID. With this meta tag now on the web page, users will see the smart banner. Sweet!

If you’d like to deep link users using the Smart App Banner, you can do that too! You just need to add another parameter to the meta tag named app-argument, which needs to be a valid URL. Here’s what the meta tag would look like with the additional URL data:

<meta name="apple-itunes-app" content="app-id=[APP_ID], app-argument=[SOME_URL]">

This URL value is passed to your app delegate in the application(_:open:options:) method so you can handle deep linking. Here’s an example of what the code looks like:

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    print(url)
    // do deep link stuff
    
    return true
}

From this method you can read the URL and decide where the user should land in your app. Typically this means storing a value representing some destination to a deep link manager that will handle the deep linking navigation once your UI appears.

If you’re looking for a little more info, here’s a link to Apple’s documentation on Smart App Banners.

I hope you enjoyed the article! See you next time ✌🏼