How to Generate a QR Code or NFC Tag for your App Clip Experience

Oscar de la Hera Gomez
An Apple App Clip QR Code that allows you to try out the Sans Hands experience without downloading it from the Apple Store.

Scan the Code to Discover Sans Hand's Gestural Technology

We are proud to announce that we have launched our first App Clip as part of our Sans Hands™ experience and wanted to share our findings with you on what it takes to make the App Clip available via a QR Code or NFC Tag. To find out more about what it takes to create one in XCode, click the button linking to the relevant article below.

What is an App Clip?

App Store Connect's first screen for App Clip generation

You can have many App Clips for a single app.

What an App Clip can do.

App Clip's can be activated in many ways.

App Clips are a great way for users to quickly access and experience what your app has to offer. An App Clip is a small part of your app that’s discoverable at the moment it’s needed. App Clips are fast and lightweight so a user can open them quickly. Whether they’re ordering take-out from a restaurant, renting a scooter, or setting up a new connected appliance for the first time, users will be able to start and finish an experience from your app in seconds. And when they’re done, you can offer the opportunity to download your full app from the App Store.
- Apple Inc, 2021.

Ultimately, we believe that App Clips create a new paradigm of opportunities for Marketers and Creators by allowing them to offer customers functionality without having to go through the App Store. For example:

  • You're at a Starbucks and you want to order a coffee. Don't want to download the app for just one coffee? No problem. Scan the QR Code or Tap the NFC on the coffee that you want and press pay.
  • You're at a Train Station and you need to buy a train ticket ? Tap the NFC of the station you want to go to and press pay.
  • You're Nike and you're about to drop the latest Sneaker and want an exclusive, never done before way to sell your shoes? Create a map location where people can access an Sneakers App Clip to just that sneaker and turn the drop into a scavenger hunt.
  • You're a restaurant and want to offer a seamless, contactless delivery of your food to your customer. You package your restaurant App as an App Clip and replace your menu QR Code with the App Clip.
  • You're a retailer and want to offer Virtual Try On of your products to customers. You create an app clip which based on the QR Code on the product opens up a different product to try on. i.e. here's this lipstick or there's that shoe.

Finally, it's worth noting that an App can offer multiple app clips, which can be activated in different ways!

How do you generate a QR Code or NFC Tag?

App Clips are created via Xcode, which create a target for the project and do the rest of your magic for you. When you archive the app, XCode will package your iOS app with your App Clip, and will upload the experiences as a united package. Once you have added the associated domains, created the Apple App Site Association file and your package is up on the app store, you can press Edit Advanced Experience to begin to create an advanced QR Code. Let's walk through what the steps to create the advanced experience looks like.

Step One: Add the Associated Domain to your App

Go to your Project Target and add the Associated Domains Cabilities to your App & App Clip.

A screenshot showing how to add an associated domain to an XCode project.

Add the Associated Domains to your App Clip and App.

Step Two: Add the App Clip Associated Domain to your App & App Clip

According to Apple's documentation, you must add appclips:example.com to both your App and App Clips associated domains.

A screenshot showing how to add an associated domain to your App Clip target.

Add the associated app clip domain to both your app and app clip target

If you do not do this, you will find an error similar to the one below when trying to create an advanced app clip.

This error will arise if you haven't associated the domain to both your app and app clip target.

This error will arise if you haven't associated the domain to both your app and app clip target.

Step Three: Upload the Archive to App Store Connect

Upgrade your build number and push the package to App Store Connect.

Step Four: Create your AASA file on your associated domain

Next you must create a file named 'apple-app-site-association' without an extension and place it in a new .well-known directory.

This error will arise if you haven't associated the domain to both your app and app clip target.

This error will arise if you haven't associated the domain to both your app and app clip target.

In the file you must place in the code below, replacing ABCDE12345 with your Apple Developer / Business team Id and com.example.MyApp.Clip with your App Clip bundleId.

{ "webcredentials": { "apps": [ "ABCDE12345.com.example.MyApp" ] }, "appclips": { "apps": [ "ABCDE12345.com.example.MyApp.Clip" ] }}<br /><br />

A valid site association will be found in your build.
Valid Status

Step Five: Click on Edit Advanced Experiences

Edit Advanced Experiences can be found under your App Clip target in App Store Connect.

Edit Advanced Experiences can be found under your App Clip target in App Store Connect.

Step Six: Press Next

App Clip QR code

Step Seven: Pick a URL for your App Clip

Enter the desired URL for the App Clip and tie the associated App Clip BundleId that you would like to create an experience for.

A valid url visualized on App Store Connect.

Step Eight: Fill in the details

Please note that these can be localized

The options available for App Clip Card generation on App Store Connect.

Step Nine: Request your QR Code or NFC Sticker

App Store Connect is window where you can request NFC Codes.

Select 'Get App Clip Codes...' on the top left

Step 10: Select the App Clip you want to generate codes for

App Store Connect is window where you can request NFC Codes.

Step Eleven: Complete the Sequence

Complete the sequence to create and customize your App Clip Code into a QR Code or an NFC Tag.

The visual that appears when you have completed the sequence - where you can download the App Clip stickers.
Step One in Creating an App Clip Sticker.
Step Two in Creating an App Clip Sticker.
Step Three in Creating an App Clip Sticker.
Step Four in Creating an App Clip Sticker.
Step Five in Creating an App Clip Sticker.
Final Step in Creating an App Clip Sticker.

Any Questions?

We are actively looking for feedback on how to improve this resource to help developers make App Clips better, faster. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details