How to Easily Add Smart App Banners in WordPress

To start, let’s look at the app’s settings. Here, you can add a banner to every page and post or add a smart app banner to your homepage only.

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.

Sometimes, you may want to only promote apps on specific pages and posts. For example, you typically won’t show a smart app banner on sales pages and landing pages as the banner might distract from the main call to action.

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

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 downloads and engagement.

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

In this case, we recommend using the Smart App Banner plugin. This plugin allows you to show different banners on different pages and include affiliate data in those banners. These features make it a great plugin for affiliate marketers.

You can get this information by following the same process described in Method 1.

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

The Google Chrome Inspect tool

What is a smart app banner?

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

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.



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

Testing the Apple smart app banner code

Method 2: Using Smart App Banner (Add Banners to Specific Pages and Posts)

Do you want to add a smart app banner to specific pages and posts instead? This allows you to control exactly where the banner appears on your website.

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

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.

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.

The App Marketing Tools website

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

For example, if you are an affiliate marketer, then you might promote different apps on different pages and then use Google Analytics to see which banners get the most conversions.

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.

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.

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

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.

An Apple App ID

When you are happy with the information you have entered, just click on ‘Update’ or ‘Publish’ to make your changes live.

An example of a smart app banner on a WordPress blog or website

To start, go to Settings » Smart App Banner and type the application’s value into the ‘App ID’ field.

Adding an app ID to a WordPress plugin

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

Adding an iOS smart app banner to WordPress

Since they are 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.

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.

Smart banners are an easy way to promote your mobile app and get visitors to download it. If an iOS user already has your app, then the banner will encourage them to open the app for a better user experience.

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

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.

In this article, we will show you how to add smart app banners to WordPress.

How to add smart app banners in WordPress (easy)

Why Add Smart App Banners in WordPress?

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.

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.

An example of a smart app banner on a WordPress website

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

After that, open the ‘Code Type’ dropdown and choose ‘HTML Snippet’.

Creating an Apple app banner using WPCode

After that, you can either check the ‘Show on all pages’ box or leave it unchecked. If you leave the box unchecked, then the app banner will only appear on your homepage.

Showing a smart app banner across your WordPress blog or website

Do you want to add smart app banners in WordPress?

Here, just add the app ID and optional affiliate information by following the same process described above.

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

Apple app code in the WordPress header

Upon activation, you can add an app banner to specific pages or posts, the WordPress homepage, or across your entire website.

You may even want to show different banners on different parts of your website. For instance, if you are an affiliate marketer, then you might have a list of apps you want to promote.

With that done, you must 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.

Adding custom code to the WordPress theme header

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

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

In this guide, we showed you how to promote your mobile app on specific posts and pages or across your entire WordPress website.

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

Publishing a smart app banner to WordPress

With that in mind, WPCode is the perfect choice if you want to promote a single iOS application. However, if you want to show different banners on different pages, then we recommend using method 2 instead.

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

When you are happy with how the banner is set up, simply click on the ‘Save Changes’ button to make it live.

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

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.

Then, you can simply repeat these steps to add a smart app banner to more WordPress posts and pages.

FAQs About Adding Smart App Banners in WordPress

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

If the visitor is using a non-Apple device or a different web browser, then WordPress will hide the banner from them automatically.

Now 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:

We hope that this article helped you learn how to add smart app banners in WordPress. You may also want to see our guide on how to add web push notifications to your WordPress site or our expert picks for the best WordPress popup plugins.

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

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)

For example, the following image shows the same website in the Chrome mobile browser.

A hidden smart app banner.

To do this, simply open the page or post where you want to add the banner. Now, find the new ‘Smart App Banner’ section in the WordPress content editor.

Adding a smart app banner to a WordPress page or post

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

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.

Why has the smart app banner disappeared in Safari?

If you don’t already have a mobile app, then you can see our complete guide on how to convert a WordPress website into a mobile app.

If you are using affiliate marketing to make money online blogging, then you can type your affiliate token into the ‘Affiliate data’ field. The information will vary, so you may need to log in to your affiliate portal or speak to your partners to get the right token.

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

Getting the app ID for an iPhone or iPad iOS app

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

How to Test the Smart App Banner Code in WordPress

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

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

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