urva-connect-sdk-flutter

A comprehensive Flutter SDK for integrating Urva's support chat functionality into your mobile applications. This SDK provides a complete solution for building feature-rich chat applications with support for text messaging, media sharing, notifications, and more.

Features

• Real-time Chat: Socket.io-based real-time messaging
• Media Support: Image, video, audio, and document sharing
• Rich UI Components: Reactions, mentions, link previews, and markdown support
• Notifications: Local and push notifications with customizable sounds
• Security: End-to-end encryption, certificate pinning, and secure storage
• Offline Support: Cached messages and offline file handling
• Multi-platform: iOS and Android support with platform-specific optimizations
• Theming: Dark/light theme support with customizable colors
• File Management: PDF viewer, image picker, and file compression
• Audio/Video: Voice messages, TTS, and video playback
• Connectivity: Network state monitoring and automatic reconnection

Getting Started

Prerequisites

• Flutter SDK ^3.9.2
• Dart SDK ^3.9.2
• iOS 11.0+ or Android API 21+

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  ...
  urva_connect_sdk_main: ^0.0.8

In your library add the following import:

import 'package:urva_connect_sdk_main/urva_connect_sdk_main.dart';

For help getting started with Flutter, view the online documentation.

Usage

First initialize the sdk

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await UrvaConnectSdk.initializeSdk(
    baseUrl: "BASE_URL",
  );
  runApp(MultiProvider(providers: [
    ...UrvaConnectProvider.allProvider
  ], child: MyApp(),));
}

Example for Urva connect sdk

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<bool> isLoading = ValueNotifier(false);

  @override
  void initState() {
    ///unique id is unique phone number, email id, or userId
    ///token is your api key generated from urva connect dashboard
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      await UrvaConnectSdk.loginUser(userToken: "USER_AUTH_TOKEN", companyToken: "COMPANY_TOKEN");
      await loadData();
    });

    UrvaConnectSdk.connectActionCallbacks(context, (context, shortcut) {
      log("shortcut data => ${shortcut.toJson()}");
      Navigator.of(context).push(
        MaterialPageRoute<dynamic>(
          builder: (context) => CustomModule(shortCut: shortcut),
        ),
      );
    });
  }

  Future<void> loadData({bool hardRefresh = false}) async {
    isLoading.value = true;
    await UrvaConnectSdk.fetchConnectData(hardRefresh: hardRefresh);
    if (mounted) {
      UrvaConnectSdk.setThemeColor(context, ThemeColor(
        tmColor1: OrgColor(lightColor: "#ab292e", darkColor: "#ee7e1e"),
        tmColor2: OrgColor(lightColor: "#ee7e1e", darkColor: "#ab292e"),
      ));
    }
    isLoading.value = false;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text(widget.title)),
        body: home,

      ),
    );
  }



  Widget get home {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [ValueListenableBuilder(
          valueListenable: isLoading,
          builder: (context, value, child) {
            if (value) {
              return CircularProgressIndicator();
            } else {
              return Column(
                spacing: 15,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      UrvaConnectSdk.setThemeMode(Brightness.light);
                      Navigator.of(context).push(
                        MaterialPageRoute<dynamic>(
                          builder: (context) =>
                          Home(),
                        ),
                      );
                    },
                    child: Text("Open Urva Connect"),
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      loadData(hardRefresh: true);
                    },
                    child: Text("Refresh"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      UrvaConnectSdk.logoutUrvaConnect();
                    },
                    child: Text("Logout"),
                  ),
                ],
              );
            }
          },
        )],
      ),
    );
  }
}

Login

Authenticate the user with Urva Connect using their unique token and your company token. This should be called after initialization and before fetching data or opening any screens.

await UrvaConnectSdk.loginUser(
  userToken: "USER_AUTH_TOKEN", // Unique ID (phone number, email, or userId)
  companyToken: "COMPANY_TOKEN" // API key generated from Urva Connect dashboard
);

Custom theme color pass

UrvaConnectSdk.setThemeColor(context, ThemeColor(
        tmColor1: OrgColor(lightColor: "#ab292e", darkColor: "#ee7e1e"),
        tmColor2: OrgColor(lightColor: "#ee7e1e", darkColor: "#ab292e"),
        ...
      ));
  

If show custom button show in thread profile screen and revert callback

await UrvaConnectSdk.initializeSdk(
    customActionButtons: [
      CustomActionButton(
        header: "Custom Button 1",
        shortCut: ShortCut(module: "custom_module", screen: "1"),
      ),
      CustomActionButton(
        header: "Custom Button 2",
        subline1: "sub line 2",
        shortCut: ShortCut(module: "custom_module", screen: "2"),
      ),
      CustomActionButton(
        header: "Custom Button 3",
        subline1: "sub line 3",
        icon: "home",
        shortCut: ShortCut(module: "custom_module", screen: "3"),
      ),
      CustomActionButton(
        header: "Custom Button 4",
        subline1: "sub line 4",
        icon: "check_circle",
      ),
    ],
  );

Change connect theme light/dark mode , please follow the code firstly set theme then open screen

 UrvaConnectSdk.setThemeMode(Brightness.dark);
 UrvaConnectSdk.openScreen(context,isSystemBack: true,);

All connect click callback and also custom action button callback use fo this. The connectActionCallbacks method is used to handle all redirection and custom button click events within the SDK. It provides a shortcut object containing navigation data.

Shortcut Object Details

• Customer Full View Redirection: When a user clicks to view customer details, the shortcut object will contain:

  • module: "customer_view_module"
  • screen: The customer ID.
  • canonical: The collection code.
  • name: The customer's first name.

• Custom Action Buttons: For other custom buttons defined during initialization, the same shortcut structure is used to pass relevant data.

• Contextual Data: The shortcut.data parameter contains contextual information such as threadId and colId (collection ID), which change according to the specific chat thread being interacted with.

UrvaConnectSdk.connectActionCallbacks(context, (context, shortcut) {
      log("shortcut data => ${shortcut.toJson()}");
      if (shortcut.module == "customer_view_module") {
        // Handle redirection to customer full view
        // Use shortcut.screen (id), shortcut.canonical (collection), shortcut.name
      } else {
        // Handle other custom modules
        // Contextual info: shortcut.data?.threadId, shortcut.data?.colId
        Navigator.of(context).push(
          MaterialPageRoute<dynamic>(
            builder: (context) => CustomModule(shortCut: shortcut),
          ),
        );
      }
    });

Push Notifications

To handle navigation when a user taps on an Urva Connect push notification, use the handleUrvaConnectNotification method. This method parses the notification data and automatically navigates to the correct chat or thread screen.

// Example using Firebase Cloud Messaging
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  UrvaConnectSdk.handleUrvaConnectNotification(context, message.data);
});

Clear connect data and logout user

 UrvaConnectSdk.logoutUrvaConnect();

for full example, please see this Demo.