How to I make the App Clip Card Show?

Question

I've watched every video and ready every piece of documentation available on App Clips.

I can't seem to figure out how to get the App Clip Card to show.

I've added the associated domains entitlement to my app and app clip.
I've updated my Webserver to have the proper apple-app-site-association file.
I've updated my bundle IDs to enable Associated Domains.

I can go direct to the App Clip "App" by debugging, but I can't see the Card that prompts the user.

What am I missing?

Thanks!
Mike

App Clips

5.2k

Posted by

bumbleparrot

Reply

Add a Comment

Answer 1

Hey Guys,

I figured this out. Here are some details.

Make sure you have the latest iOS 14 beta 5 installed on your phone.
Make sure you have the latest xcode 12 beta 5 installed.
Check your phone's developer mode setting. To do this you must plug your phone in via USB cable to a mac running xcode. You will see the developer settings if you scroll down slowly. It is normally under the section of apple apps that contain Music, TV, Photos, Camera, Books, Podcasts, and Game Center.
In the developer settings goto the section called "APP CLIPS TESTING".
In the Local Experiences menu, click "Register Local Experience..."
Enter the URL Prefix that you will be using. (Basically just the full URL of the domain you will be using)
Enter the BUNDLE ID for your App Clip "com.mycompany.myapp.Clip"
Enter a Title string, Subtitle string, and select an action.
Choose a photo.

10. Done!

Okay heres the catch. It seems like right now, you can only test the App Clip card via Safari and Smart Banner.
The smart banner is placed in the Head section of an HTML page and looks like this:
<meta name="apple-itunes-app" content="app-clip-bundle-id=com.yourcompany.yourapp.Clip, app-id=99999999">

IMPORTANT
If you have the App Clip Installed, you will not see the card when you click "Open" from the Safari Smart Banner. You have to uninstall the App Clip from your phone.

To remove the App Clip:

Goto your settings on the iPhone.
Above your apps there will be a new item called "App Clips".
You can remove your App Clip here.

Once you remove the installed App Clip, you can click on the Safari Smart Banner and the card will appear!

Thanks!
Mike

Posted by

bumbleparrot

Add a Comment

Answer 2

To preview how the app clip card will look, you should try out the developer settings added in beta 5. If you go to Settings → Developer → Local Experiences (under App Clip Testing), you'll be able to register an app clip experience just for that device. You'll need a URL prefix for this, like https://example.com/, and the bundle identifier of your clip. Once you've set it up: build and run your app clip target from Xcode to put the app clip on the device. You should then be able to use a QR Code or NFC tag with a matching URL, like https://example.com/?id=12, to trigger the card and then launch your clip.

If you don't see the developer settings, double check that you're running iOS 14 beta 5.

Posted by

Frameworks Engineer

Add a Comment

Answer 3

I have iOS 14 public beta 5, but I can't see App Clip Testing or Local Experiences in Developer Settings!

Posted by

NSApps

Add a Comment

Answer 4

Hi,

Thank you for replying!

I followed the instructions and was able to get the Safari browser to show the App Clip Banner from pages that have the matching META tag.

Clicking open on the smart banner takes me directly into the App Clip itself. It did not show the card.

What I did was use a generic QR code generator for my URL, but all that does is open safari and show the banner at the top. I even tried sending myself an iMessage that uses my URL. It does the same thing; it just opens safari and shows the smart banner.

How exactly do I get the App Clip Card to show?
How do I generate a QR code that will invoke the App Card?
Can you give additional instructions?

Posted by

bumbleparrot

Add a Comment

Answer 5

Same problem to me .
Web page can show meta banner. And can open App Clip

iOS14.beta5.iPhoneSE
XCode12.beta5

WebUrl:https://example.com/www/ios.htmlconfig a meta banner
Local Experience Url Prefix:https://example.com/

And at WebPage I can see Meta Banner And can open that installed App Clip
But still can not see local experience config card .

I hava change local expericen action to view or play , but same as open
How can I solove this ?

Best Wished

Posted by

l_o_o_l

Add a Comment

Answer 6

Like NSApps I can't see the App Clip Testing or Local Experiences in Developer Settings.
I can verify I have iOS14 beta 5 build 18A5351d.

Apple, is this verified?

Posted by

liazkam

Add a Comment

Answer 7

Hey Guys,

I figured this out. Here are some details.

Make sure you have the latest iOS 14 beta 5 installed on your phone.
Make sure you have the latest xcode 12 beta 5 installed.
Check your phone's developer mode setting. To do this you must plug your phone in via USB cable to a mac running xcode. You will see the developer settings if you scroll down slowly. It is normally under the section of apple apps that contain Music, TV, Photos, Camera, Books, Podcasts, and Game Center.
In the developer settings goto the section called "APP CLIPS TESTING".
In the Local Experiences menu, click "Register Local Experience..."
Enter the URL Prefix that you will be using. (Basically just the full URL of the domain you will be using)
Enter the BUNDLE ID for your App Clip "com.mycompany.myapp.Clip"
Enter a Title string, Subtitle string, and select an action.
Choose a photo.

10. Done!

Okay heres the catch. It seems like right now, you can only test the App Clip card via Safari and Smart Banner.
The smart banner is placed in the Head section of an HTML page and looks like this:
<meta name="apple-itunes-app" content="app-clip-bundle-id=com.yourcompany.yourapp.Clip, app-id=99999999">

IMPORTANT
If you have the App Clip Installed, you will not see the card when you click "Open" from the Safari Smart Banner. You have to uninstall the App Clip from your phone.

To remove the App Clip:

Goto your settings on the iPhone.
Above your apps there will be a new item called "App Clips".
You can remove your App Clip here.

Once you remove the installed App Clip, you can click on the Safari Smart Banner and the card will appear!

Thanks!
Mike

Posted by

bumbleparrot

Add a Comment

Answer 8

Smart banner not showing even after tried meta tag.
<meta name="apple-itunes-app" content="app-clip-bundle-id=com.yourcompany.yourapp.Clip, app-id=99999999">

And also added apple-app-site-association to domain at root level. and checked by accessing https://example.com/apple-app-site-association, But still does not show smart banner when open link in browser.
{
"applinks": {
"apps": [],
"details": [{
"appID": "4RXKMMMMMM.com.example.example1",
"paths": [
"/log/*",
"/logdrink/*"
]
}
]
},
"appclips": {
"apps": ["4RXKMMMMMM.com.example.example1.Clip"]
},
"activitycontinuation": {
"apps": [
"4RXKMMMMMM.com.example.example1"
]
}
}

Anything still missing?

Posted by

Hiren Gujarati

Add a Comment

Answer 9

I can get the App Clip to open after either installing it through TestFlight or by building & running through Xcode and then tapping the "Open" button on the smartbanner. In this case, the card is skipped.

If I remove the App Clip, I can get the card to show by tapping the "open" button in the smartbanner. However, the "Open" button on the card itself is greyed out and disabled. It's not tappable. So I can't launch the App Clip from the card.

Any ideas as to how that could be achieved? Or is it simply not yet supported? (I'm running beta 5.)

Thanks!

Posted by

randomusername

Add a Comment

Answer 10

For those of you that don't see 'App Clip Testing' menu in 'Developer'.

Just reboot your phone.

That worked for me.

Posted by

GALATEA

Add a Comment

Answer 11

I have been able to see the Smart App Banner appear in the Safari Browser, and interact with it to open the App Clip Card (if the app clip isn't installed), or open the App Clip itself (if the app clip is installed), but the appearance only happens once. Subsequent attempts to the website do not show the Smart App Banner. Even after I try resetting my phone settings and deleting the Safari cache. Has anyone found a way to consistently show the Smart App Banner?

Posted by

asdfasdf sdfsdf

Add a Comment

Answer 12

I was only able to see the App Clip Card once too. So now I know that this is a common bug.
Also not able to see the App Clip Card for other websites too, no matter what I did.

Posted by

GALATEA

Add a Comment

Answer 13

I think I figured it out based on bumbleparrot flow:

Before you open the Safari with in the URL with the Smart App Banner, run the relevant App Clip from Xcode.
Now, open the URL. The Smart Banner with come up. The 'Open' button with take you directly to the App Clip without a card.

If you remove the App Clip, as bumbleparrot described, and relaunch the URL in Safari you'll get the Card.
As many of you already mentioned, the CTA button is grayed out.

Posted by

liazkam

Add a Comment

Answer 14

For the life of me, I still can't get an App Clip Safari Smart Banner to show with Xcode 12 and iOS 14 release builds.

I did all the setup required with adding the AASA file to the webserver, add meta tag to web page, and updated bundle IDs with associated domains...

Posted by

alexn_th

Add a Comment

How to I make the App Clip Card Show?

Accepted Reply

Replies