How to Easily Add Smart App Banners in WordPress

We’ve had a lot of app developers ask us: is there a way to promote mobile apps directly from your WordPress site? The answer is yes, and it’s easier than you might think.

One of the simplest ways to do this is with smart app banners. These banners appear at the top of your website when viewed on iPhones and iPads, encouraging visitors to download or open your app. You can even show banners to Android users using the right plugin.

Smart app banners aren’t annoying like popups. Instead, they blend naturally with your site and give visitors a gentle nudge to download or open your app. The result? More downloads, better user engagement, and a more professional mobile experience.

We’ve tested various methods for adding these banners to WordPress, and found two approaches that work perfectly for any skill level.

The first uses a simple code snippet to add Apple’s native iOS banner, while the second uses a plugin that supports both iOS and Android devices with full design customization. We’ll walk you through both options step-by-step.

TLDR Quick Summary: Smart app banners are native iOS banners that appear in Safari, encouraging visitors to download or open your app. The easiest way to add them in WordPress is with a free plugin called WPCode.

If you also want to show banners to Android users, you can use the Mobile Smart App Banner plugin, which supports both platforms and lets you fully customize the banner’s design.

Why Add Smart App Banners in WordPress?

Using a smart app banner on your WordPress website can help you get more downloads and purchases of your mobile app.

Many website owners create a companion mobile app where visitors can browse their content in a way that’s optimized for mobile.

Since these apps are designed for mobile devices, they often provide a better user experience. You can also show reminders, personalized content, offers, updates, and more using mobile push notifications. All of this means more engagement, conversions, and sales.

You can encourage iPhone and iPad users to download your mobile app using a smart app banner.

This is a banner that appears at the top of the screen when an iOS user visits your site using the Safari browser.

Visitors can click the banner to download your app from the App Store. If the visitor already has your app, then the banner will ask them to open the app instead. In this way, you can get more app downloads and engagement.

If the visitor is using a non-Apple device or a different web browser, then Apple’s native smart app banner will not appear.

However, as we’ll show you in Method 2, you can use a plugin to display app download banners to Android users and visitors using other browsers too.

With that being said, let’s see how you can add smart app banners in WordPress. Simply use the quick links below to jump straight to the method you want to use:

Method 1: Using WPCode (Show a Smart App Banner Across WordPress)

The easiest way to add smart app banners to your WordPress website is by using WPCode. This free plugin lets you show the same banner on every page and post using one line of code.

When adding custom code to WordPress, some guides will ask you to edit your site’s functions.php file. We don’t recommend this, as even a small typo or mistake could cause common WordPress errors or even make your site inaccessible.

By using WPCode, you can add custom code to your WordPress theme files without any risks. You can also enable and disable code snippets with the click of a button.

First, you need to install and activate the free WPCode plugin. For more instructions, please see our beginners’ guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet. Next, click the ‘+ Add Custom Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

Next, you need to select ‘HTML Snippet’ as the code type from the list of options that appear on the screen.

This will take you to the ‘Create Custom Snippet’ page, where you can type in a name for the code snippet.

This is just for your reference, so you can use anything you want.

For the next step, you will need to know your application’s ID.

To get this information, open a new browser tab and head to the Apple Services Marketing Tools page. Here, type in the name of the application you want to promote and click on the ‘Search’ icon.

To see all the iOS apps that match your search term, simply scroll to the ‘Apps’ section.

Here, find the app you want to promote and give it a click.

At the bottom of the screen, you will see a ‘Content Link’.

The app ID is the value between id and ?. You will need this information in the next step, so either leave this tab open or make a note of the app ID.

Now that you have the app ID, switch back to the WordPress dashboard.

You can now add the following snippet into the code editor, replacing the app ID with the information you got in the previous step:

<meta name="apple-itunes-app" content="app-id=12345678">

With that done, scroll to the ‘Insertion’ box.

If it isn’t already selected, click on ‘Auto Insert’ and then select ‘Site Wide Header’ from the dropdown menu.

When you are ready, scroll to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Finally, just click the ‘Save Snippet’ button to store your changes.

Now, the smart app banner will appear on your WordPress website.

How to Show Different Banners on Specific Pages and Posts

As you’ve seen, it’s easy to add a smart banner to WordPress using WPCode.

But what if you want to promote different apps on different pages?

For example, perhaps you run a lifestyle blog, and have a recipe app that you want to promote on your food-related posts. At the same time, you might have a fitness app that you want to promote on your workout pages.

In that case, we recommend upgrading to WPCode Premium (starting at $49/year). This plugin has smart conditional logic that lets you control exactly where each code snippets run. This means you can create multiple smart app banners and then display them on any page or post. 

First, head over to the WPCode website and purchase a subscription. You can then go ahead and install it, just like any other WordPress plugin.

After that, go to WPCode » Settings in your WordPress dashboard and enter your license key.

You can find this information by logging into your account on the WPCode website, or by checking the purchase confirmation email you received when you bought WPCode. 

With that done, go to Code Snippets » Add Snippet in your WordPress dashboard. Here, hover over the ‘Add Your Custom Code’ section.

When it appears, select ‘Add Custom Snippet.’

In the subsequent panel, click ‘HTML Snippet.’

Next, give your snippet a descriptive name so you can easily identify which app it promotes.

For example, you might name it ‘Smart App Banner – Recipe App.’

In the Code Editor, add the meta tag for your first app.

Make sure you replace the app ID with the correct one for your application:

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

Then, scroll to the ‘Insertion’ section and select ‘Auto Insert,’ if it isn’t already selected.

After that, open the ‘Location’ dropdown and select ‘Site Wide Header.’

Next, scroll down a little further to the ‘Smart Conditional Logic’ section. 

Here, click to activate the ‘Enable Logic’ setting.

Now it’s time to create your smart conditional logic rule.

To start, open the ‘Conditions’ dropdown and select ‘Show.’ Then, click ‘Add new group.’

After that, click the first dropdown (which shows ‘Logged-in’ by default).

This adds an entirely new section.

In the left-hand menu, select ‘Where.’

Then, choose ‘Post/Page.’

With that done, click the second dropdown and choose ‘Is one of,’ if it isn’t already selected.

Finally, click the third field and search for the specific page or post where you want to display this app banner.

Do you want to show this banner on multiple pages or posts? Then simply click ‘Add new group.’

You can now repeat these steps to select additional posts or pages.

When you’re happy with how this snippet is set up, scroll to the top of the page and toggle the ‘Inactive’ switch to ‘Active’. Finally, click the ‘Save Snippet’ button to store your changes.

Now, repeat this process for each additional app you want to promote. 

WPCode will now show the correct smart app banner based on the page or post the visitor is currently viewing.

How to Test the Smart App Banner Code in WordPress

The best way to test the smart app banner is by visiting your website on an iOS device using the Safari mobile app. In fact, the smart app banner won’t even appear if you try to view the mobile version of your WordPress site from desktop.

If you need to quickly check whether the code snippet is working, then one workaround is to use your browser’s Inspect tool. It allows you to see whether the <meta name> code has been inserted into your site’s <head>section, which suggests it’s working as expected.

To do this, go to any page or post on your WordPress blog. Then, right-click anywhere on the page and select ‘Inspect’.

A new panel will open, showing all the site’s code.

Simply find the <head> section and click on its arrow to expand.

Now, look for the <meta name="apple-itunes-app"> code you added in the previous step.

If you see this code, then the smart app banner should appear on iOS devices.

Method 2: Using Mobile Smart App Banner (Add Banners for iOS and Android)

If you want a plugin that supports both iOS and Android users, then we recommend using the Mobile Smart App Banner plugin.

It’s a free plugin that automatically detects the visitor’s device and shows the appropriate app store link. 

The banner includes a built-in ‘Close’ button so visitors can dismiss the button, and it uses cookies to remember this decision.

Keep in mind that the banner won’t appear for 7 days after being dismissed.

First, you’ll need to install and activate the Mobile Smart App Banner plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Settings » Mobile Smart App Banner in your WordPress dashboard.

Here, check the box next to the ‘Enable App Banner’ option in order to activate the banner on your site. 

With that done, click the ‘Upload’ button.

Then, select the image you want to use as your app icon (we recommend using an image that’s 512x512px).

You can also choose where the banner appears onscreen by opening the ‘Banner Position’ dropdown and choosing an option from the list.

We’ve found that placing the banner at the bottom of the screen is less intrusive, and can often lead to higher engagement.

After that, you can then type your app name into the ‘App Name’ field, and enter a short description into the ‘App Subtitle’ box. 

Next, add your App Store Link and Play Store Link into the correct fields.

If you want to change how the banner looks, then simply scroll to the ‘Color Settings’ section. 

Here, you can change the background color, button color, button text color, and more, using the various settings.

There’s also a real-time preview, so you can easily try lots of settings to see what looks the best. 

Alternatively, you can use Apple’s native smart app banner in Safari, by unchecking the box next to ‘Enable iOS Smart App Banner.’

You’ll then need to enter your App Store ID, which you can find using the same process described in Method 1. 

When this is enabled, Safari users will see the native Apple banner, while users on Chrome, Firefox, and other iOS browsers will see your custom banner instead.

With that done, scroll to the bottom of the screen and click ‘Save Changes’ to make your banner live.

FAQs About Adding Smart App Banners in WordPress

If you still have questions, then here are our top FAQs about how to add smart banners to your WordPress website.

What is a smart app banner?

Smart app banners appear at the top of the Safari web browser and give app users the option to open an app or download it from the Apple App Store.

Since they were created by Apple, smart app banners have a consistent design that many iOS users recognize. They only appear to people who are using iPhones and iPads running iOS 6 or higher.

Why can’t I see my smart app banner on desktop?

The smart app banner won’t appear on desktop computers, even if you view the mobile version of your site.

To see the banner in action, you will need to visit your site on an iPhone or iPad using the Safari mobile app.

Why can’t I see the smart app banner on my iPhone or iPad?

Smart app banners only appear on devices running iOS 6 or higher when you are using the Safari mobile app. If you don’t see the smart app banner, then you should start by checking you have the latest versions of both iOS and the Safari mobile app.

The smart app banner also detects whether the device can support the app and if the app is available in your location. If you don’t see the smart app banner, then it’s possible that your device has failed one of these checks.

Why has the smart app banner disappeared in Safari?

If you dismiss the banner by clicking the ‘x’ button, then it won’t appear again by default.

Depending on your mobile device, you may need to open a private browser tab, clear your cache or cookies, or perform some other action to reset your settings.

Do smart app banners work on Android devices?

No, Apple’s native smart app banners are exclusive to iOS devices using the Safari browser. Android does not have a built-in equivalent.

However, you can use a WordPress plugin like Mobile Smart App Banner to display custom app download banners to Android visitors.

We hope this tutorial helped you learn how to add smart app banners in WordPress. You may also want to see our guide on call-to-action best practices or our expert picks for the best WordPress lead magnet tools to skyrocket conversions.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.