Capacitor - Receive Dynamic Links

Enable your Capacitor app to receive and handle ChottuLinks seamlessly. This allows users to open specific screens when they tap a dynamic link, whether the app is running, in the background, or launched from a cold start. Integrate link handling to ensure a smooth and context-aware user experience across platforms.

Prerequisites

Before implementing dynamic link reception, ensure you have:

Handle Incoming Links

To respond to dynamic links, your app should listen for incoming deep link events using the ChottuLink SDK listeners.

import { ChottuLinkIonicSDK } from 'capacitor-chottulink-sdk';

// Listen for successful deep link resolution
ChottuLinkIonicSDK.addListener('onDeepLinkResolved', (data) => {
    console.log('Deep link resolved:', data.url);
    // Navigate to the appropriate screen in your app
    console.log('Metadata:', data.metadata);
    // Metadata structure (available since v1.0.4+):
    // - isDeferred: boolean          Indicates if the link is deferred
    // - originalURL: string          The resolved destination URL (may be null if not found)
    // - resolvedAt: string           Timestamp when the link was resolved (ISO 8601 format)
    // - shortLinkRaw: string         The deeplink url which was clicked with all the parameters intact
});

// Listen for failed deep link resolution
ChottuLinkIonicSDK.addListener('onDeepLinkFailed', (data) => {
    console.error('Deep link failed:', data.error);
    console.log('Original URL:', data.originalURL);
});

Complete Implementation Examples

Angular
React
Vue

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ChottuLinkIonicSDK } from 'capacitor-chottulink-sdk';
import { Router, RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    imports: [
        RouterOutlet
    ],
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
    private resolvedListener: any;
    private failedListener: any;

    constructor(private router: Router) {}

    async ngOnInit() {

        await ChottuLinkIonicSDK.initialize({ apiKey: "YOUR_API_KEY" });

        // Listen for successful deep link resolution
        this.resolvedListener = await ChottuLinkIonicSDK.addListener('onDeepLinkResolved', (data) => {
            console.log('Deep link resolved:', data.url);
            console.log('Metadata:', data.metadata);
        });

        // Listen for failed deep link resolution
        this.failedListener = await ChottuLinkIonicSDK.addListener('onDeepLinkFailed', (data) => {
            console.error('Deep link failed:', data.error);
            console.log('Original URL:', data.originalURL);
        });
    }

    ngOnDestroy() {
        // Cleanup listeners
        if (this.resolvedListener) {
            this.resolvedListener.remove();
        }
        if (this.failedListener) {
            this.failedListener.remove();
        }
    }
}

import React, { useEffect } from 'react';
import { ChottuLinkIonicSDK } from 'capacitor-chottulink-sdk';

function App() {
    useEffect(() => {
        // Initialize the SDK
        ChottuLinkIonicSDK.initialize({
            apiKey: 'YOUR_API_KEY',
        })
            .then(() => {
                console.log('✅ ChottuLink initialized successfully');
            })
            .catch((error) => {
                console.error('❌ Error initializing ChottuLink:', error);
            });

        // Listen for successful deep link resolution
        const resolvedListener = ChottuLinkIonicSDK.addListener(
            'onDeepLinkResolved',
            (data) => {
                console.log('Deep link resolved:', data.url);
                console.log('Metadata:', data.metadata);
            }
        );

        // Listen for deep link errors
        const failedListener = ChottuLinkIonicSDK.addListener(
            'onDeepLinkFailed',
            (data) => {
                console.error('Deep link failed:', data.error);
                console.log('Original URL:', data.originalURL);
            }
        );

        // Cleanup listeners when component unmounts
        return () => {
            resolvedListener.remove();
            failedListener.remove();
        };
    }, []);

    return (
        <div>
            <p>ChottuLink Example</p>
        </div>
    );
}

export default App;

<template>
    <div id="app">
    <!-- Your app content -->
</div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { ChottuLinkIonicSDK } from 'capacitor-chottulink-sdk';

let resolvedListener: any;
let failedListener: any;

onMounted(() => {

    ChottuLinkIonicSDK.initialize({ apiKey: 'YOUR_API_KEY' })
        .then(() => {
            console.log('✅ ChottuLink initialized successfully');
        })
        .catch((error) => {
            console.error('❌ Error initializing ChottuLink:', error);
        });

    // Listen for successful deep link resolution
    resolvedListener = ChottuLinkIonicSDK.addListener('onDeepLinkResolved', (data) => {
        console.log('Deep link resolved:', data.url);
        console.log('Metadata:', data.metadata);
    });

    // Listen for failed deep link resolution
    failedListener = ChottuLinkIonicSDK.addListener('onDeepLinkFailed', (data) => {
        console.error('Deep link failed:', data.error);
        console.log('Original URL:', data.originalURL);
    });
});

onUnmounted(() => {
    // Cleanup listeners
    if (resolvedListener) {
        resolvedListener.remove();
    }
    if (failedListener) {
        failedListener.remove();
    }
});
</script>

(Optional) Get AppLink Data from the Deeplink URL directly

Process the shortened Deeplink using the getAppLinkDataFromUrl method.
This retrieves the associated app link data and returns a CLResolvedLink object containing the resolved destination URL and the original short link.

Method Signature

getAppLinkDataFromUrl(options: { shortURL: string }): Promise<CLResolvedLink>

Parameters

Parameter	Type	Required	Description
`options.shortURL`	`string`	Yes	The shortened URL string to be resolved

Return Value

A CLResolvedLink object containing:

interface CLResolvedLink {
  link?: string;      // The resolved destination URL (may be undefined if not found)
  shortLink?: string; // The original short or branded link that was provided
}

Error Handling

Note: This method can throw various errors. Always implement proper error handling.

notInitialized – If SDK is not initialized
invalidURL – If the URL is malformed
invalidAPIKey – If the API key is not available
invalidResponse – If the server response is invalid
Network errors if the request fails

Basic Implementation

import { ChottuLinkIonicSDK } from 'capacitor-chottulink-sdk';

try {
  const resolved = await ChottuLinkIonicSDK.getAppLinkDataFromUrl({
    shortURL: 'https://your-domain.com/abc123'
  });
  
  if (resolved) {
    console.log('Original link:', resolved.link);
    console.log('Short link:', resolved.shortLink);
    // Navigate to the destination
  }
} catch (error) {
  console.error('❌ Failed to get app link data:', error);
}

Next Steps

Troubleshooting

For more troubleshooting help, see the Troubleshooting Guide.

Prerequisites​

Handle Incoming Links​

Complete Implementation Examples​

(Optional) Get AppLink Data from the Deeplink URL directly​