Mobile SDKs

The Contact Center AI Platform (CCAI Platform) mobile SDKs include the Android SDK and the iOS SDK. With these SDKs, you can provide voice and chat support for your customers directly inside your iOS or Android mobile app.

You can set up mobile apps to work with CCAI Platform in a number of ways, including integrating the mobile SDKs into your mobile apps as directed in the Android SDK guide or the iOS SDK guide. You can also integrate the mobile SDKs into your mobile apps using Flutter or React Native.

Integrate using Flutter

This section provides the initial steps for using Flutter to integrate the mobile SDKs into your mobile apps. The steps in this section are the same for both the Android SDK and the iOS SDK. After completing these steps, you can continue by using instructions specific to the Android SDK or the iOS SDK, depending on your mobile platform.

Flutter is not required for integrating the mobile SDKs into your mobile apps. You can also integrate as directed in the following:

Run the sample app locally

Running a sample app requires the following:

Flutter: A framework for building cross-platform apps.
Android Studio: An integrated development environment for Flutter and Android app development.
Xcode: An integrated development environment for iOS app development.
Cocoapods: A dependency manager for iOS projects.

To run the sample app locally, follow these steps:

Download and expand the Flutter example ZIP file.
In the terminal, go to the Flutter example directory.
Enter the following code in the terminal:
```
cd example
cp .env.example .env
```
Enter the environment variable values in the .env file—for example, API_KEY=your_api_key. Quotation marks are not required.
To install dependencies, enter flutter pub get in the terminal.
To update the company information, go to android/app/src/main/res/values/strings.xml and update ujet_company_key, ujet_subdomain, and ujet_company_url.
Depending on your platform, run either an Android emulator or an iOS simulator.
Enter flutter run in the terminal.

Import the CCAI Platform module into your project

Importing the CCAI Platform module into your project requires the following:

A JWT signing API endpoint. For more information, see SDK end user authentication.
For Android, your project's deployment target must be iOS 13.0 or later.
For iOS, your project's minSdkVersion must be 21 or later.

To import the CCAI Platform module into your project, follow these steps:

Copy the contents of the example/lib/ujet directory and paste it into your Flutter project in the lib directory.
Go to example/android/app/src/main/kotlin/co/ujet/flutter_example_app and copy the following files into your Flutter project where the MainActivity class is located:
- UJETModule.kt
- Application.kt
- firebase\MyFirebaseMessagingService.kt
- firebase\FirebaseTokenManager.kt
Important: Be sure to change the package declaration at the top of these files according to your project's package structure.
Open XCode, and then drag example/ios/Runner/UJETModule.swift into your project.

Open example/lib/ujet/ujet_module.dart and edit the _getUserData method so that it returns appropriate end-user information. See the following code sample:

static Future<Map<String, String?>> _getUserData() async {

String? name = "John Doe"; // end-user name
String? identifier = "id1234"; // end user identifier
String? email = "jdoe@example.com"; // end user email
String? phone = "+12223334444"; // end user phone

return {
  "name": name,
  "identifier": identifier,
  "email": email,
  "phone": phone
  };
}

Implement signPayload in server_api.dart to get the signed JWT token from your server API. For more information, see SDK end user authentication.

Initialize and start

To initialize and start, enter the following code in the terminal:

 await UJET.init(key: 'your_ujet_key', baseUrl: 'your_ujet_base_url');
 await UJET.start(UjetStartOptions(skipSplashScreen: true));

Known issues

Here known issues for using Flutter to integrate the mobile SDKs into your mobile apps:

Issue: Screenshots are not captured using the screenshot SmartActions.
- Action: Google is working to fix this issue.
Issue: The Co-browse screen is not projected from the agent side during a co-browse session (iOS only).
- Action: Google recommends disabling the impeller engine on iOS devices. To disable the impeller engine, follow these steps:
  1. Open the info.plist file.
  2. Set the FLTEnableImpeller key to false, as in the following code sample:
```
<key>FLTEnableImpeller</key>
<false/>
```

Continue your integration

To continue integrating using Flutter, see one of the following pages, depending on your mobile platform:

Integrate using React Native

This section provides the initial steps for using React Native to integrate the mobile SDKs into your mobile apps. The steps in this section are the same for both the Android SDK and the iOS SDK. After completing these steps, you can continue by using instructions specific to the Android SDK or the iOS SDK, depending on your mobile platform.

React Native is not required for integrating the mobile SDKs into your mobile apps. You can also integrate as directed in the following:

Run the sample app locally

It is possible to run the provided sample app locally. To do this, you need the following:

Homebrew
Node Version Manager: Run brew install nvm, then read the resulting message to add the required code snippets to your shell profile.
Node.js: In the project root, run nvm install and nvm use to ensure that you're working with the correct version.

Run the local server

The provided sample app can also be served from a local server. To implement this, follow these steps:

Download and expand the Flutter example ZIP file.
Access the directory where the server sample is deployed.

Enter the following commands:

cd server
cp .env.example .env
Edit .env
nvm use
npm install
npm start```

Run React Native

To run React Native, follow these steps:

Change the application directory.

Enter the following commands:

cd app
nvm use
npm install
bundle install
npx pod-install

Update the company information:
1. src/screens/Home.tsx: Update the parameters in UJET.initialize({})
2. android/app/src/main/res/values/strings.xml: Update ujet_company_key, ujet_subdomain, and ujet_company_url.
Enter the command npm start.
Run the iOS or Android mobile app using either the Meteor interactive CLI or an IDE of your choice.

Note: If the command fails, specify the simulator—for example, npm run ios -- --simulator="iPhone 15 Pro".

Import the CCAI Platform module to your project

This section shows you how to import the CCAI Platform module to your project.

Requirements

You need to use a JWT signing API endpoint. Refer to the server/app.js file in the sample app, or see End User Authentication for more details.

Procedure

To import the CCAI Platform module into your project, follow these steps:

Copy the following files from the sample app and paste them into your project where appropriate:
1. app/src/native_modules/UJETInterfaces.ts
2. app/src/native_modules/UJETNativeModule.ts
3. app/ios/UJETModule.h
4. app/ios/UJETModule.m
5. app/android/src/main/java/com/sampleapp/UJETModule.kt

Open UJETNativeModule.ts

Remove the following line:

import AsyncStorage from '@react-native-async-storage/async-storage';

Edit the getUserData function to return accurate end user information:

async function getUserData({ name: anonymousName }: SignPayloadData): Promise<Object> {
  // fetch the end user information from your application
  return {
    name: 'John Doe',
    identifier: 'id1234',
    email: 'jdoe@example.com',
    phone: '+12223334444'
  }
}

Update SIGNING_BASE_URL to point to your signing endpoint.

Initialize and start, using the following code sample:

import { UJET } from '../path/UJETNativeModule';

UJET.initialize({
  key: 'your-key',
  baseUrl: 'your-base-url'
});

const startUJET = () => {
  UJET.start({
    skipSplashScreen: true
  });
};

Continue your integration

To continue integrating using React Native, see one of the following pages, depending on your mobile platform: