Quick Start

This guide will help you create your first deep link and integrate Clippr into your mobile app.

Prerequisites

A Clippr account (sign up here)
A mobile app (Flutter, iOS, or Android)

Step 1: Create Your App in the Dashboard

No steps defined

Step 2: Install the SDK

Choose your platform:

Add to your pubspec.yaml:

yaml

dependencies:
clippr: ^0.0.4

Then run:

bash

flutter pub get

Swift Package Manager (Recommended)

In Xcode: File → Add Packages → Enter:

https://github.com/nexlabstudio/clippr-ios.git

CocoaPods

ruby

pod 'ClipprSDK', '~> 0.0.4'

Add to your build.gradle.kts:

kotlin

dependencies {
implementation("xyz.useclippr:clippr:0.0.4")
}

Step 3: Initialize the SDK

dart

import 'package:clippr/clippr.dart';

void main() async {
WidgetsFlutterBinding.ensureInitialized();

await Clippr.initialize(apiKey: 'YOUR_API_KEY');

runApp(MyApp());
}

swift

import ClipprSDK

@main
struct MyApp: App {
init() {
    Clippr.initialize(apiKey: "YOUR_API_KEY")
}

var body: some Scene {
    WindowGroup {
        ContentView()
    }
}
}

kotlin

import xyz.useclippr.sdk.Clippr

class MyApplication : Application() {
override fun onCreate() {
    super.onCreate()
    Clippr.initialize(context = this, apiKey = "YOUR_API_KEY")
}
}

Step 4: Handle Deep Links

dart

class _MyAppState extends State<MyApp> {
@override
void initState() {
  super.initState();
  _initDeepLinks();
}

Future<void> _initDeepLinks() async {
  // Get link that opened the app (works for deferred links too!)
  final link = await Clippr.getInitialLink();
  if (link != null) {
    _handleDeepLink(link);
  }

  // Listen for links while app is running
  Clippr.onLink = (link) {
    _handleDeepLink(link);
  };
}

void _handleDeepLink(ClipprLink link) {
  print('Deep link path: ${link.path}');
  // Navigate based on path
}
}

swift

struct ContentView: View {
var body: some View {
    NavigationStack {
        // Your content
    }
    .task {
        // Get the link that opened the app
        if let link = await Clippr.getInitialLink() {
            handleDeepLink(link)
        }

        // Listen for links while app is running
        Clippr.onLink = { link in
            handleDeepLink(link)
        }
    }
}

func handleDeepLink(_ link: ClipprLink) {
    print("Deep link path: \(link.path)")
    // Navigate based on path
}
}

kotlin

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // Handle App Link that opened this activity
    Clippr.handle(intent)

    lifecycleScope.launch {
        // Get the link that opened the app
        Clippr.getInitialLink()?.let { link ->
            handleDeepLink(link)
        }
    }

    // Listen for links while app is running
    Clippr.onLink = { link ->
        handleDeepLink(link)
    }
}

private fun handleDeepLink(link: ClipprLink) {
    Log.d("Clippr", "Deep link path: ${link.path}")
    // Navigate based on path
}
}

Step 5: Configure Platform Deep Linking

Add Associated Domains in Xcode:

Select your target → Signing & Capabilities
Click "+ Capability" and add "Associated Domains"
Add: applinks:yourapp.clppr.xyz

That's it! Clippr automatically hosts your AASA file.

Add intent filter to AndroidManifest.xml:

xml

<activity android:name=".MainActivity">
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
        android:scheme="https"
        android:host="yourapp.clppr.xyz" />
</intent-filter>
</activity>

Clippr automatically hosts your Asset Links file.

Step 6: Create Your First Link

Go back to the Clippr Dashboard:

Navigate to Links → Create Link
Enter a Deep Link Path (e.g., /product/123)
Optionally add:
- Custom alias (e.g., summer-sale)
- Campaign, source, medium for attribution
- Social preview metadata
Click Create

Your link is ready: https://yourapp.clppr.xyz/summer-sale

Step 7: Test It!

Send the link to yourself
Click it on your test device:
- With app installed: App opens to your deep link path
- Without app installed: Redirected to app store, then app opens to the path after install

Info

Enable debug mode during development to see detailed logs:

dart

await Clippr.initialize(apiKey: 'YOUR_API_KEY', debug: true);

Next Steps

Concepts - Understand how deep linking and attribution work
Flutter SDK - Detailed Flutter integration guide
iOS SDK - Detailed iOS integration guide
Android SDK - Detailed Android integration guide
Dashboard Guide - Learn to use all dashboard features