How to Easily Add Smart App Banners to Your WordPress Website (2024 Guide)
Are you looking for an effective way to promote your mobile app to visitors on your WordPress site? Smart app banners are an excellent tool that can drive more installs and engagement for your app. In this comprehensive guide, we‘ll walk you through exactly what smart app banners are, their key benefits, and how you can easily implement them on your WordPress site today. Let‘s dive in!
What Are Smart App Banners?
Smart app banners are special banners that appear at the top of supported mobile browsers (primarily Safari on iOS devices) when someone visits your website. They are designed to promote your mobile app by giving users a quick and easy way to open your app if they have it installed or download it from the app store if they don‘t.
Here‘s an example of what a smart app banner looks like:
Smart app banners have a clean, consistent design that is optimized for driving conversions. They prominently display your app icon, name, company/developer name, average star rating, and a call-to-action button, making it crystal clear to users what action you want them to take.
When a user already has your app installed and taps the "OPEN" button, they‘ll be seamlessly deep linked right into your app. If they don‘t have it installed, tapping "VIEW" will take them to your app‘s listing on the App Store where they can learn more and download it. It‘s an incredibly smooth user experience.
Why Use Smart App Banners on Your WordPress Site?
So why should you add smart app banners to your WordPress site? Here are some of the top benefits:
Boost App Installs
Smart app banners put your app front and center to your website visitors and make it exceptionally easy for them to install it with a single tap. This can help drive a significant amount of highly qualified new users to your app. One case study found smart app banners drove 10x higher conversions compared to regular app install links!Increase App Engagement
For users that already have your app installed, smart app banners give them a reminder and quick way to re-engage. Instead of getting distracted browsing your site, they can jump right back into your app. This can help increase your daily and monthly active users.Deliver a Better User Experience
Mobile apps often provide a faster, smoother, more feature-rich experience compared to websites. Smart app banners allow you to route more users to this optimal experience, increasing their satisfaction and likelihood of continuing to engage with your brand.Easy to Implement
As we‘ll show you in this guide, smart app banners are simple to add to your WordPress site, even if you don‘t have technical expertise. With the right tools, you can get one up and running in a matter of minutes.Customizable
While smart app banners have a standard design, you have control over key elements like the icon, app name, button text, and where it links to. This allows you to optimize it for your unique brand and goals.
Now that you know the what and why of smart app banners, let‘s look at how to actually add them to your WordPress site. We‘ll cover two easy methods.
Method 1: Add Smart App Banner Code Using WPCode Plugin
The simplest way to add a smart app banner across your entire WordPress site is using the free WPCode plugin.
Here are the step-by-step instructions:
Step 1: Install and activate the WPCode plugin. You can do this by going to "Plugins > Add New" in your WordPress dashboard, searching for "WPCode", and clicking "Install Now" and then "Activate".
Step 2: In your WordPress dashboard, go to "Code Snippets > Add Snippet"
Step 3: Give your code snippet a name (e.g. "Smart App Banner") and select "Header" for the insertion location. This will ensure the smart app banner code is loaded in the section of your site.
Step 4: Paste the following code into the code editor, replacing "APP-ID" with your app‘s ID from the App Store:
To find your app‘s ID, go to the App Store listing and look at the URL. It will be the number after "id":
Step 5: Click the "Inactive" toggle to make it "Active" and then click "Save Snippet" to make your smart app banner live.
[Insert screenshot of saving WPCode snippet]That‘s it! Your smart app banner should now appear when someone visits your WordPress site on an iOS device using Safari. We recommend testing it out to make sure it‘s working properly.
Method 2: Use the Smart App Banner Plugin
If you want more control over where your smart app banner appears and the ability to promote different apps on different pages, using a dedicated plugin like Smart App Banner is a good option.
Here‘s how to set it up:
Step 1: Install and activate the free Smart App Banner plugin from the WordPress plugin directory.
Step 2: Go to "Settings > Smart App Banner" in your WordPress dashboard.
Step 3: Enter your app‘s ID in the "App ID" field. You can find this the same way as described in the previous method.
[Insert screenshot of Smart App Banner settings]Step 4: If you want the banner to appear on every page of your site, check the "Show on all pages" box. Otherwise, leave it unchecked and the banner will only appear on pages and posts where you specifically add it.
Step 5: If you‘re an affiliate promoting someone else‘s app, paste your affiliate code or token in the "Affiliate data" box. Contact the app developer if you‘re unsure what to put here.
Step 6: Click "Save Changes"
You‘ve now enabled smart app banners on your site! If you left "Show on all pages" unchecked, you‘ll need to manually insert the banner on specific posts and pages by following these steps:
Step 7: Edit the post or page where you want the smart app banner to appear.
Step 8: Scroll down to the "Smart App Banner" box below the content editor.
Step 9: Enter the App ID of the app you want to promote on this specific page. You can also add a different affiliate token if you‘re promoting multiple apps.
[Insert screenshot of Smart App Banner post settings]Step 10: Update or publish the post or page as normal.
You can repeat steps 7-10 to add banners for different apps on different posts/pages across your site.
Smart App Banner Frequently Asked Questions
How do I test if my smart app banner is working?
The most reliable way to test your smart app banner is to visit your website on an iOS device using the Safari browser. If the banner doesn‘t appear, try clearing your browser cache and cookies and reloading the page.
You can also use browser developer tools to check that the banner code is present. In Chrome, right-click the page and select "Inspect". Then click the "Elements" tab and search for "apple-itunes-app" in the code. If you see the meta tag with your app ID, the banner should work when viewed in Safari on iOS.
Why isn‘t my smart app banner appearing?
First, make sure you are testing on a supported device (iPhone, iPad, iPod Touch) using the Safari browser. Smart app banners do not appear in other browsers or the Safari desktop browser.
Other reasons your banner might not be showing:
- Your app ID is incorrect
- The code is not inserted properly in your site‘s section
- Your app is not actually available in the App Store or not compatible with the user‘s device
- The user has dismissed the banner and it is suppressed (they can re-enable in Settings > Safari on their device)
Can I change the look and text of the smart app banner?
No, the overall design of smart app banners is set by Apple and cannot be modified. However, you can control the app icon and name that is shown by making sure your App Store listing is up to date.
You can also customize the button text that appears on the right side of the banner. By default it shows "VIEW" which links to your App Store listing, but you can override this to say something else like "BOOK NOW" or "ORDER FOOD" and deep link to a specific screen in your app.
To customize the button text and link, use this modified version of the code snippet:
Replace "APP-ID","SCHEME/URL", and "AFFILIATE_TOKEN" with your specific values.
Are smart app banners only for iOS? What about Android?
Standard smart app banners as described in this guide are designed for iOS and Safari only. However, you can achieve similar functionality on Android by using "web app install banners". These are available in modern Android browsers like Chrome.
To implement a web app install banner, you‘ll need to meet certain criteria and add a web app manifest file to your site. Check out Google‘s documentation to learn more.
You can also look into other solutions like cross-platform smart banners or Google Play install referrer tracking.
I‘m seeing a "Cannot Open Page" error when I click the smart banner button. How do I fix this?
This error indicates that your SCHEME/URL (often called a "deep link") is not configured properly to open your app.
To fix this, make sure your app is set up to handle the custom URL scheme you‘ve specified in the smart banner code. Consult your app developer or the official Apple documentation on setting up deep links for more help.
Can I use smart app banners with WordPress page builders?
Yes, in most cases you can use smart app banners with popular page builders like Elementor, Divi, Beaver Builder, etc.
Depending on the plugin/method you use to implement the banner and the page builder settings, you may need to manually insert the code snippet into the section of specific pages using a "Custom HTML" block or similar feature.
Some page builder plugins may also have settings related to code snippets or integrations where you can paste the banner code.
Best Practices for Using Smart App Banners
Here are some tips to get the most out of smart app banners on your WordPress site:
- Make sure your App Store listing is optimized and up-to-date. Your banner pulls info directly from here.
- Use a clear, compelling CTA in your button text. "VIEW" is generic – consider something specific like "SHOP NOW", "BOOK A RIDE", "ORDER FOOD", etc.
- Set up deep links so users are taken to the most relevant screen when they open the app from the banner.
- Consider adding an app install prompt or promo on your app‘s post-install/first launch to "close the loop" and track installs generated by the banner.
- Monitor your banner‘s performance using tools like Google Analytics, App Store Connect, and/or attribution platforms and optimize based on data.
- Be mindful of banner placement, especially if using on specific pages. Avoid disrupting key conversion points.
- Test thoroughly on multiple iOS devices and versions to ensure a smooth experience.
We hope this guide has helped you understand how to harness the power of smart app banners on your WordPress site. Implementing them is an easy but impactful way to drive more installs and engagement for your mobile app.
By giving your website visitors a direct, frictionless path to your app, you can deliver a better user experience, boost key conversion metrics, and ultimately grow your business.
Follow the steps outlined here to start using smart app banners today, and feel free to reach out if you have any other questions!
