- Launching Your App Via URL
- Passing Data to the App
- Displaying an App Banner with Smart App Banner
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Displaying an App Banner with Smart App Banner
When you visit web pages, you’ll often come across situations where the browser displays a banner at the top of the browser, as in Figure 6. You can display banners like this by using a new Safari feature called Smart App Banner, available in iOS 6 and later.
)
Figure 6 The Smart App Banner displays a link to the Apple Store application.
The Smart App Banner feature displays a link at the top of the web page, suggesting that the user download the app from the Apple Store. If the application is not already installed on the user’s device, tapping the banner will redirect the user to the Apple Store. If the application is already installed, tapping the banner launches the app instead.
To display a Smart App Banner on your web page, simply add the following <meta> element to the <head> of your HTML page:
<!DOCTYPE html>
<html>
<head>
<meta name="apple-itunes-app"
content="app-id=your_app_id,
affiliate-data=your_affiliate_data,
app-argument=http://learn2develop.net/mypath?arg1=value1">
</head>
<body>
<a href="smartappbanner://">Launch SmartAppBanner app</a><br/>
<a href="smartappbanner://domain/mypath?arg1=value1&arg2=value2">
Launch SmartAppBanner app with parameters</a>
</body>
</html>
The name attribute must be set to “apple-itunes-app” and the content attribute has the following components:
- app-id must be set to the app ID of the application that you want to display. To find the app’s ID, use the Link Maker tool.
- affiliate-data (optional) is your iTunes affiliate string. If you don’t have one, find out more at the iTunes Affiliate Program site.
- app-argument is the data that you want to pass into the app.
When the user taps the Smart App Banner to launch the app, the application:openURL:sourceApplication:annotation: method of the app is fired. This is similar to the scenario discussed earlier.
The following code displays a Smart App Banner that prompts the user to display the Instagram application (see Figure 7):
<!DOCTYPE html>
<html>
<head>
<meta name="apple-itunes-app" content="app-id=389801252">
</head>
<body>
<a href="smartappbanner://">Launch SmartAppBanner app</a><br/>
<a href="smartappbanner://domain/mypath?arg1=value1&arg2=value2">
Launch SmartAppBanner app with parameters</a>
</body>
</html>
)
Figure 7 The Smart App Banner offers installation options.
Tapping the banner redirects the user to the Apple Store (see Figure 8).
){kind=link}
)
Figure 8 Installing the app through the Apple Store.
If your Smart App Banner displays an app that’s already installed on your device, the OPEN link will be displayed instead, so the user can launch the app (see Figure 9).
)
Figure 9 If the app is already installed on the device, the Smart App Banner displays the OPEN link.