Skip to main content

React Native - Create Dynamic Links

Learn how to create dynamic links programmatically in your React Native app using the ChottuLink SDK.

🔧 Prerequisites​

Before implementing dynamic link creation, ensure you have:

📱 Basic Link Creation​

Create a basic dynamic link with minimal configuration:

Deprecated

The createLink function has been deprecated. Please use createDynamicLink instead.

import { createDynamicLink } from 'react-native-chottulink-sdk';

const createBasicLink = async () => {
  const linkConfig = {
    destinationURL: 'https://your-app.com/screen/123',
    domain: 'your-domain.chottu.link',
  };

  try {
    const result = await createDynamicLink(linkConfig);
    console.log(`Link created Successfully: ${result.shortURL}`);
  } catch (error) {
    console.log(`❌ Failed to create link: ${error}`);
  }
};
import { createLink } from 'react-native-chottulink-sdk';

const createBasicLink = async () => {
  const linkConfig = {
    destinationURL: 'https://your-app.com/screen/123',
    domain: 'your-domain.chottu.link',
  };

  try {
    const result = await createLink(linkConfig);
    console.log(`Link created Successfully: ${result.link}`);
  } catch (error) {
    console.log(`❌ Failed to create link: ${error}`);
  }
};

Create a comprehensive dynamic link with all available options:

import { createDynamicLink } from 'react-native-chottulink-sdk';

    const createAdvancedLink = async () => {
      
        const linkConfig = {
          destinationURL: 'https://your-app.com/screen/123',
          domain: 'your-domain.chottu.link',
          linkName: 'custom-link-name', // Optional: Custom name for the link
          selectedPath: 'custom-path', // Optional: Custom path for the link
          iosBehaviour: 2, // 1 = browser, 2 = app
          androidBehaviour: 1, // 1 = browser, 2 = app
          socialTitle: 'Check out this amazing content!',
          socialDescription: 'Discover what\'s new in our app',
          socialImageUrl: 'https://your-domain.com/image.jpg',
          utmSource: 'email',
          utmMedium: 'newsletter',
          utmCampaign: 'welcome',
          utmContent: 'header',
          utmTerm: 'new-user'
        };
        
        try {
          const result = await createDynamicLink(linkConfig);
          console.log('Generated link:', result.shortURL);
        } catch (error) {
          console.error('Failed to create link:', error);
        }
    };

⚙️ Platform-Specific Behavior​

You can specify different behaviors for iOS and Android:

import { createDynamicLink } from 'react-native-chottulink-sdk';

const createPlatformSpecificLink = async () => {
    const linkConfig = {
        destinationURL: 'https://your-app.com/screen',
        domain: 'your-domain.chottu.link',
        linkName: 'platform-specific',
        // Android: Open in app (1 = browser, 2 = app)
        androidBehaviour: 2,
        // iOS: Open in browser (1 = browser, 2 = app)
        iosBehaviour: 1,
    };

    try {
        const result = await createDynamicLink(linkConfig);
        return result.shortURL;
    } catch (error) {
        console.error('Failed to create platform-specific link:', error);
        throw error;
    }
};

Behavior Options​

// Legacy SDK behavior values
const BEHAVIOR = {
  browser: 1,  // Open in browser
  app: 2,      // Open in app
};

📊 UTM Tracking​

Marketing Campaign Tracking​

Implement comprehensive UTM tracking for your marketing campaigns:

const createUTMTrackedLink = async (campaignData) => {
    const linkConfig = {
        destinationURL: 'https://your-app.com/campaign',
        domain: 'your-domain.chottu.link',
        linkName: `utm-${campaignData.campaign}`,
        utmSource: campaignData.source,
        utmMedium: campaignData.medium,
        utmCampaign: campaignData.campaign,
        utmContent: campaignData.content,
        utmTerm: campaignData.term,
    };

    try {
        const result = await createDynamicLink(linkConfig);
        return result.shortURL;
    } catch (error) {
        console.error('Failed to create UTM tracked link:', error);
        throw error;
    }
};

// Usage examples
const emailCampaignLink = await createUTMTrackedLink({
    source: 'email',
    medium: 'newsletter',
    campaign: 'summer-sale-2024',
    content: 'banner-1',
});

const socialMediaLink = await createUTMTrackedLink({
    source: 'instagram',
    medium: 'social',
    campaign: 'product-launch',
    content: 'story-post',
});

🎨 Social Media Optimization​

Customize Social Sharing Appearance​

Make your links look great when shared on social media:

const createSocialOptimizedLink = async (socialData) => {
    const linkConfig = {
        destinationURL: 'https://your-app.com/social-content',
        domain: 'your-domain.chottu.link',
        linkName: 'social-optimized',
        socialTitle: socialData.title,
        socialDescription: socialData.description,
        socialImageUrl: socialData.imageUrl,
    };

    try {
        const result = await createDynamicLink(linkConfig);
        return result.shortURL;
    } catch (error) {
        console.error('Failed to create social optimized link:', error);
        throw error;
    }
};

// Usage examples
const socialLink = await createSocialOptimizedLink({
    title: 'Amazing App Features',
    description: 'Discover what makes our app special and unique',
    imageUrl: 'https://your-domain.com/social-preview.jpg',
});

🏁 Complete Example​

Here's a complete example of dynamic link creation in a React Native app:

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Alert } from 'react-native';
import { createDynamicLink } from 'react-native-chottulink-sdk';

const LinkCreator = () => {
    const [isCreating, setIsCreating] = useState(false);

    const createProductLink = async () => {
        setIsCreating(true);

        try {
            const linkConfig = {
                destinationURL: 'https://your-app.com/product/123',
                domain: 'your-domain.chottu.link',
                linkName: 'product-123',
                socialTitle: 'Amazing Product!',
                socialDescription: 'Check out this incredible product',
                socialImageUrl: 'https://your-domain.com/product-image.jpg',
                utmSource: 'app',
                utmMedium: 'share',
                utmCampaign: 'product-showcase',
            };

            const result = await createDynamicLink(linkConfig);
            Alert.alert('Success!', `Link created: ${result.shortURL}`);

            // Copy to clipboard or share
            // Clipboard.setString(result.shortURL);

        } catch (error) {
            Alert.alert('Error', 'Failed to create link. Please try again.');
            console.error('Link creation error:', error);
        } finally {
            setIsCreating(false);
        }
    };

    return (
        <View style={{ padding: 20 }}>
            <TouchableOpacity
                onPress={createProductLink}
                disabled={isCreating}
                style={{
                    backgroundColor: '#007AFF',
                    padding: 15,
                    borderRadius: 8,
                    alignItems: 'center',
                }}
            >
                <Text style={{ color: 'white', fontSize: 16, fontWeight: '600' }}>
                    {isCreating ? 'Creating Link...' : 'Create Product Link'}
                </Text>
            </TouchableOpacity>
        </View>
    );
};

export default LinkCreator;

✅ Next Steps​

  1. Receive Dynamic Links
  2. Explore REST API
  3. View Analytics

🔗 Additional Resources​