iOS

Table of Content

• React Native
• Flutter

React Native

If you are using a React Native app and you want to implement the Dixa Messenger into it, it might be useful to have a look at our Demo Repository for React Native. This might help get kickstarted into the basic of how to get the Dixa Messenger to function within your app.

See the demo repo for React Native at https://github.com/dixahq/dixa-messenger-react-native-demo

Out of the box, the Dixa Messenger should look something like this. Please note that most customizations should be changed in the Dixa Agent Interface by an Admin. This can be found in Settings > Messenger > Edit appearance & setup. These changes will automatically be reflected when initializing the Messenger in your App and do not have to be editted programatically.

Description

At the time of writing, React Native 0.70 was utilised, in case if using a later version, make sure to align with React Native documentation.

And make sure to install native dependency before proceeding. Please see Dixa's iOS installation documentation for more details.

Native Module example

In the example below, an example of how to integrate the Dixa Messenger Mobile SDK for iOS into your React Native app. Code below is provided to be used as one of the potential examples when implementing Native Modules. Please note that this isn't the only way to get started, but a recommended examples. It should not be seen as the only solution.

Make sure to see React Native official guide for any potential updates or suggestions for React Native.

In this example the following is created to expose Dixa Messenger iOS functionalities.

RCTDixaMessengerModule.h RCTDixaMessengerModule.m

You expose additional functionality by modyfing RCTDixaMessengerModule.

Example modules

Below you can see the content of each of these created modules.

RCTDixaMessengerModule.h

// RCTDixaMessengerModule.h

#import <React/RCTBridgeModule.h>

@interface RCTDixaMessengerModule : NSObject <RCTBridgeModule>
@end

RCTDixaMessengerModule.m

// RCTDixaMessengerModule.m

#import <DixaMessenger/DixaMessenger.h>
#import "RCTDixaMessengerModule.h"
#import <React/RCTUtils.h>
#import <React/RCTLog.h>

@implementation RCTDixaMessengerModule

RCT_EXPORT_MODULE(DixaMessengerModuleIos);

// Overriden to run from main queue
- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

RCT_EXPORT_METHOD(openMessenger)
{
  UIViewController *controller = RCTPresentedViewController();
  if (controller == nil) {
    RCTLogError(@"Tried to display Dixa Messenger but there is no application window.");
    return;
  }

  [Messenger openMessengerFrom:controller completion:nil];
}

@end

Updating AppDelegate in your iOS app

In order to run the Messenger Configuration and register SDK for push notifications you need to update AppDelegate.m.

An example of this is shown below with some omitted code, for clarity. Please node that YOUR_DIXA_MESSENGER_TOKEN should be exchanged with your actual Dixa Messenger token. An Admin of your Dixa Agent Interface will be able to find that in Settings > Messenger > Edit Appearance & Setup > Setup. There the messenger token should be visible.

// AppDelegate.m

@implementation AppDelegate

// Part of the code omitted for clarity

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Part of the code omitted for clarity

  [Messenger configureWithMessengerToken: @"<YOUR_DIXA_MESSENGER_TOKEN>" logLevel:3 pushEnvironment:1];

  return YES;
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
  [Messenger registerForPushNotificationWithDeviceToken:deviceToken];
}

@end

Expose modules in Javascript (or Typescript).

Lastly exposing the module in JavaScript (or TypeScript) is needed. The example below shows this. Please node that the Android module can be omitted if you are only planning to use the Dixa Messenger Mobile SDK for iOS.

import { NativeModules, Platform } from 'react-native';

// Omit Android module and case if not planning to use.
const { DixaMessengerModuleAndroid, DixaMessengerModuleIos } = NativeModules;

export function openDixaMessenger() {
  switch (Platform.OS) {
    case 'android': {
      DixaMessengerModuleAndroid.openMessenger();
      break;
    }
    case 'ios': {
      DixaMessengerModuleIos.openMessenger();
      break;
    }
    default: {
      console.error(`Unsupported platform ${Platform.OS}`);
      break;
    }
  }
}

Flutter

Description

Please follow the official guide on how to create a native module (platform channel). Make sure to reference native platform iOS usage where appropriate.