AppClips

Overview

Despia now supports Apple App Clips, extending your application's functionality beyond the traditional app experience. App Clips allow users to access specific features of your application without downloading the full app, aligning with Despia's mission of making app functionality accessible through various channels like widgets and shortcuts.

What are App Clips?

App Clips are lightweight versions of your app that users can access instantly by:

• Scanning QR codes

• Tapping NFC tags

• Clicking specific links with smart banners

They provide native functionality including:

• Apple Pay integration

• Sign in with Apple

• Other native iOS features

Use Cases

App Clips are perfect for businesses that want to provide quick, seamless experiences:

• Coffee Shops: Skip-the-line ordering by scanning a QR code

• Scooter Rentals: Quick rental and payment processing

• Yacht Rentals: Automated booking and payment

• Any Service Business: Streamlined customer interactions without app downloads

Prerequisites

Before creating an App Clip, you must:

1. Have an existing Despia project set up

2. Have your main application registered with Apple

3. Ensure your app source is connected to your live branch under your custom domain

Note: The App Clip will be attached to your core application. While users don't need the main app to use the App Clip, the main app must be registered first.

Setup Process

Step 1: Enable Web App Synchronization

1. Navigate to Add-ons in your Despia project

2. Go to Hardcoded Add-ons

3. Select Web App Synchronization

4. Enable the feature

This step:

• Enables app links within your application

• Assigns an associated domain for launching the App Clip

• Registers the domain from your app source URL

Important: Ensure your app source comes from your live application, not a development branch.

Benefits of Associated Domains

Associated domains provide additional functionality:

• Links shared between users open directly in the app (if installed)

• Prevents redirection to Safari for app-installed users

• Falls back to Safari if the app isn't installed

• Creates a seamless hybrid ecosystem

Step 2: Enable the App Clip Target

1. Go to Targets in your Despia project

2. Locate the App Clip target

3. Enable the App Clip target

Step 3: Configure the App Clip

1. Open the App Clip Editor

2. Link your App Clip with the desired page or domain

3. In the App Start URL field, paste the URL where your App Clip will be hosted

Hosting Requirements

Your App Clip page can be built with any web technology:

• React, Vue.js, or any JavaScript framework

• WeWeb, Nordcraft, Webflow, or any no-code website builder

• Bubble.io or other visual development platforms

• Any hosting service with a public domain

Requirements:

• Must run JavaScript

• Must be hosted on your public domain

• Must be on your main branch

Testing Tip: You can use example.com for initial testing if you don't have a page ready yet.

Step 4: Build and Publish

1. Save your App Clip configuration

2. Click Publish App

3. Wait for the application to build with the App Clip included

Testing Your App Clip

TestFlight Testing

1. Open TestFlight on your iOS device

2. Navigate to your app

3. Scroll down to find the App Clip section

4. Update/install the App Clip

5. Open and test functionality

You can test:

• Apple Pay integration

• Sign in with Apple

• Other native features available to App Clips

Technical Considerations

App Clips as PWAs

App Clips are essentially Progressive Web Apps (PWAs) launched through Apple's native mechanism:

• Apple maintains control over App Clip functionality

• More restricted than full native apps

• Limited access to native SDKs compared to full Despia apps

Available Features

App Clips support:

• Apple Pay (no 30% Apple fee for services/physical goods)

• Sign in with Apple

• Basic web functionality

• Prompt to download full app

Limitations

App Clips don't have access to:

• Most native SDKs

• Full Despia native functionalities

• Features requiring deep system integration

Best Practice: Use App Clips for specific, lightweight interactions while maintaining your full Despia app for comprehensive functionality.

Next Steps

Creating App Clip Experiences

To make your App Clip discoverable:

1. Generate an App Clip experience

2. Create QR codes for scanning

3. Set up NFC tags (optional)

4. Configure site association files

Framework-Specific Setup

Site association file configuration varies by framework. Detailed guides will be available for:

• React/Next.js

• Vue.js

• WeWeb

• Nordcraft

• Webflow

• Bubble.io

• Other popular frameworks and no-code platforms

Preview Limitations

The App Clip editor preview may not work correctly if:

• You're using WeWeb with localization enabled

• You have redirects or gated pages

• Complex authentication flows are involved

Don't worry if the preview doesn't work - the App Clip will still function correctly in production.

Summary

App Clips in Despia provide a powerful way to extend your app's reach without requiring full app downloads. They're perfect for quick interactions, payments, and introducing users to your app's functionality. Combined with Despia's full native app capabilities, you can offer both lightweight and comprehensive experiences to your users.

With Despia's simple setup process, you can have an App Clip running in minutes, bringing your application one step closer to offering the complete native Apple ecosystem experience.