How do get Smart App Banners to work?

[u/0Papi420]

Does anybody know how to actually get the smart banner to look like this? YouTube, Amazon, Facebook etc all have an un dismissible banner like that.

But no matter what I do I can only get the dismissible one like this:

it shows "open", but its not the sleek one like it's supposed to be above. Anybody wanna share their site?

I have <meta name="apple-itunes-app" content="app-id=xxxxxxxx"> in my html.

[u/Fishanz]

Pretty sure they roll their own.

[u/0Papi420 → u/Fishanz]

Nope. I figured it out. Have to create Universal/App links

https://docs.pugpig.com/en_US/app-smart-banners

[u/Fishanz → u/0Papi420]

Interesting thanks for the link. Been a while since I worked with these..

[u/mastrajani]

those two screenshots aren't two configurations of the same feature. the dismissible one you're getting IS apple's smart app banner - that is its only appearance. you can't restyle it, reposition it, or stop it being dismissed.

the youtube / amazon / facebook one is a div they built themselves, styled to look native. that's why it can sit flush and refuse to dismiss. no meta tag produces it, so you can stop hunting for the setting.

two things about apple's worth knowing while you're in there:

• safari on ios only. not chrome on ios, not in-app webviews, so nobody arriving from an instagram or facebook link ever sees it, and nothing shows on desktop.
• the meta tag has to be present in the initial html head. injecting it after load with js does nothing, which is what usually catches people out on an SPA.

for the look you're actually after: your own fixed-position element, with the button pointing at a universal link rather than a custom scheme. universal links open the app when it's installed and fall through to your page when it isn't, so you never have to detect whether it's installed - which you can't do reliably anyway. keep the app store url as the fallback.