Skip to main content

⚡ Generate Dynamic Links in Capacitor

This guide covers how to create a Dynamic Link directly from your Capacitor app using TypeScript/JavaScript.

🛠 Prerequisites​

Before generating links, ensure:

🔗 Build a Dynamic Link​

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

// Create a basic dynamic link
const link = await ChottuLinkIonicSDK.createDynamicLink({
  link: 'https://yourapp.com/content',
  domain: 'yourapp.chottu.link'
});
import { ChottuLinkIonicSDK, CLDynamicLinkBehaviour } from 'capacitor-chottulink-sdk';

// Create an advanced dynamic link with all features
const link = await ChottuLinkIonicSDK.createDynamicLink({
  link: 'https://yourapp.com/content',
  domain: 'yourapp.chottu.link',
  iosBehaviour: CLDynamicLinkBehaviour.app,        // 'app' or 'browser'
  androidBehaviour: CLDynamicLinkBehaviour.app,    // 'app' or 'browser'
  linkName: 'summer-sale',
  selectedPath: 'promo-summer', // Optional: Customize the URL path
  socialTitle: 'Summer Sale',
  socialDescription: 'Check out our amazing deals!',
  socialImageUrl: 'https://yourapp.com/images/sale.jpg',
  utmSource: 'email',
  utmMedium: 'newsletter',
  utmCampaign: 'summer2025',
  utmContent: 'banner',
  utmTerm: 'summer'
});
import { ChottuLinkIonicSDK, CLDynamicLinkBehaviour } from 'capacitor-chottulink-sdk';

try {
  const result = await ChottuLinkIonicSDK.createDynamicLink({
    link: 'https://yourapp.com/content',
    domain: 'yourapp.chottu.link',
    iosBehaviour: CLDynamicLinkBehaviour.app,
    androidBehaviour: CLDynamicLinkBehaviour.app
  });
  
  console.log('✅ Created link:', result.shortURL);
  // Share the link with your users
} catch (error) {
  console.error('❌ Failed to create link:', error);
  // Handle the error appropriately
}

4. ⚠️ Error Handling​

Note:

The method can throw various errors. Always implement proper error handling.

Possible errors:

  • notInitialized – If SDK is not initialized
  • invalidAPIKey – If the API key is not available
  • missingKeys – If required configuration is missing
  • duplicatePath – If the path already exists
  • badRequest – If the request is invalid
  • Network errors if the request fails
info
  • Default behavior is set to 'app' for both platforms
  • selectedPath is optional - if not provided, a random path will be generated
  • socialTitle, socialDescription, and socialImageUrl are optional - enhances link previews when shared
  • utmSource, utmMedium, utmCampaign, utmContent, and utmTerm are optional - helps track campaign performance
  • Important: Make sure you have a valid internet connection when creating links

🔄 Link Behaviors​

The behavior parameter controls how your dynamic link behaves on different platforms.

Available Behaviors​

type CLDynamicLinkBehaviour = 'app' | 'browser';
  • 'app' - Opens the app if installed, falls back to browser/App Store/Play Store
  • 'browser' - Always opens in browser
tip

Each behavior can be set independently for iOS and Android platforms, allowing for platform-specific user experiences.

Open in App

'CLDynamicLinkBehaviour.app'

How it works

  • Opens your app if installed
  • Falls back to browser if app is not installed
  • Best for deep linking to specific content

When to Use 'app'

  • Deep linking to specific app content
  • Providing seamless user experience
  • App functionality is required

Example

iosBehaviour: 'CLDynamicLinkBehaviour.app'

Always Browser

'CLDynamicLinkBehaviour.browser'

How it works

  • Always opens in browser
  • Useful for marketing campaigns
  • Good for analytics tracking

When to Use 'browser'

  • Running marketing campaigns
  • Sharing content that works well in browser
  • Need consistent analytics tracking

Example

iosBehaviour: 'CLDynamicLinkBehaviour.browser'

💡 Complete Example​

import { Component } from '@angular/core';
import { ChottuLinkIonicSDK, CLDynamicLinkBehaviour } from 'capacitor-chottulink-sdk';
import { NgIf } from '@angular/common';

@Component({
    selector: 'app-share',
    standalone: true,
    template: `
    <div>
      <button (click)="createLink()" [disabled]="loading">
        {{ loading ? 'Creating...' : 'Create Dynamic Link' }}
      </button>

      <p *ngIf="link" style="margin-top: 10px;">Link: {{ link }}</p>
    </div>
  `,
    imports: [
        NgIf
    ],
    styles: [`
    div {
      text-align: center;
      margin-top: 20px;
    }

    button {
      padding: 10px 20px;
      background-color: #007aff;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    button:disabled {
      background-color: #888;
      cursor: not-allowed;
    }
  `]
})
export class ShareComponent {
    link: string | undefined = '';
    loading: boolean = false;

    async createLink() {
        this.loading = true;
        try {
            const link = await ChottuLinkIonicSDK.createDynamicLink({
                builder : {
                    destinationURL: 'https://example.com',
                    domain: 'your-domain.chottu.link',
                    iosBehaviour: CLDynamicLinkBehaviour.app,
                    androidBehaviour: CLDynamicLinkBehaviour.app,
                    linkName: 'product-123',
                    socialTitle: 'Check out this product!',
                    socialDescription: 'Amazing product at great price',
                    socialImageUrl: 'https://yourapp.com/images/product.jpg',
                    utmSource: 'app',
                    utmMedium: 'share',
                    utmCampaign: 'product-promotion'
                }
            });

            this.link = link.shortURL?.toString();
            console.log('✅ Created link:', link);
        } catch (error) {
            console.error('❌ Failed to create link:', error);
            alert('Failed to create link. Please try again.');
        } finally {
            this.loading = false;
        }
    }
}

✅ Next Steps​