Product Guide
APIsProductUpdatesPricingFAQs
  • Introduction to REVE Chat
  • Integrations
    • Website
    • Social Media Channels
      • WhatsApp
      • Instagram Messaging and Comment
      • Facebook Messenger and Comment
      • Viber
      • Telegram
    • Direct Chat Page
    • Mobile SDK
      • Native Android SDK
      • Native iOS SDK
      • Flutter Android SDK
      • Flutter iOS SDK
      • React Native iOS SDK
      • React Native Android SDK
    • Email Integration
      • Forward emails to your REVE Chat tickets
      • Integrate Your Business Email
        • Connecting Gmail with POP/IMAP Settings
    • All Integrations
      • CRM Integrations
        • Pipedrive
        • Salesforce
        • HubSpot
        • MS Dynamics
        • Amo CRM
        • Agile CRM
        • Vtiger
        • Capsule
        • Infusionsoft (by Keap)
      • CMS Integration
        • WordPress
        • DotNet Nuke
        • Blogger
        • Joomla
        • Drupal
        • ModX
      • E-commerce
        • Shopify
        • Bigcommerce
        • WooCommerce
        • Prestashop
        • 3dCart
        • Pinnacle Cart
        • Corecommerce
        • BigCartel
        • ECWID
        • LemonStand
        • Ebay
        • Volusion
        • Americommerce
        • osCommerce
        • Magento
          • By Manual Code Injection
        • Zencart
        • XCart
        • OpenCart (V4.0.x)
          • OpenCart (Old Version Integration)
        • CSCart
        • Abantecart
      • Website Builder
        • Wix
      • Hosting Platform
        • Plesk
        • WHMCS
      • Analytics
        • Google Tag Manager
        • Google Analytics
    • Google Integration
      • YouTube Integration
      • Google Play Store
      • Google Business Account
  • Appstore
  • Inbox
    • Breaking Down of Single Inbox
    • Folders of Single Inbox
    • How Conversation Works!
    • Chat Monitoring for All Ongoing Agents' Chat
    • Chat History for All Closed Conversations
    • Proactive Chat Management
    • Voice & Video Call
    • Co-Browsing
    • How to use Shortcuts
    • Inbox Appearance
  • Contacts
    • Manage Your Contacts
    • Segments
  • WhatsApp Campaign
    • What is WhatsApp Campaign?
      • Broadcast: Send Campaigns
      • Templates: Create Campaign
  • Tickets
    • Set up your Ticketing email
    • Create Ticket
      • Create a ticket manually
      • Ticket from Chat History
      • Automated & Bulk Ticket Creation
    • Knowing your Ticketing tables
      • Custom Ticketing Tables
    • Managing a Ticket
  • Chatbot
    • Bot Builder
      • Response Elements
        • Text Action
        • Quick Reply Action
        • Carousel Action
        • Button Action
        • Send Email
      • Data Collection
        • Ask Name
        • Ask Phone
        • Ask Email
        • Ask Question
        • Ask OTP
        • Ask File
        • Ask Date
        • Ask Time
        • Forms
        • Ask Number
      • Media
        • Image Action
        • Audio Action
        • Video Action
        • File Action
      • Workflow Action
        • Condition Action
        • Chat Transfer Action
        • Close Chat
        • Appointment Action
        • Attribute Action
        • Business Hour
        • System Attributes
      • Advanced Action
        • Salesforce Bot Action Manual
        • API Connector
        • Goal
        • Dynamic Data
    • Brain AI
      • ChatGPT Integration
    • Settings
      • Bot Profile
      • General Settings
      • Webhook
    • Training
      • Intent Sample
      • Sentiment
      • Synonyms
      • FAQ
      • Untrained
      • Trained
      • Bulk Training
    • Multilingual Bot
  • Reports
    • Summary
    • Chat Satisfaction
    • Chatbot Report
      • Bot Engagement
      • Flow Engagement
      • Goal Analysis
    • Agent Analytics
      • Agent Activity
      • Agent Performance
      • Metrics
      • SLA Breach Analysis
    • Ticket Analytics
      • Dashboard
      • Metrics
    • Visitor Analytics
    • Enterprise Report
      • Daily Agent Performance
      • Hourly Agent Performance
      • Daily Group Performance
      • Traffic Analysis Report
      • First Response Time
  • User Profile
    • Billing
    • Help & Feedback
  • Settings
    • General Settings
      • Auto Triggers
      • Forms
        • Pre Chat Form
        • Post Chat Form
        • Custom Forms
          • Advanced Forms
        • Ticket Forms
      • Canned Responses
      • Custom Attributes
      • Call Recording
      • Tags
      • Appointment
      • Departments
      • Chat Transcript Forwarding
      • Ban Visitor
      • Trusted IP & Domain
      • Business Hour
    • Chat Widgets
      • Appearance
      • Custom Message
      • Widget Features
      • Forms
      • Code Snippet & Quick Share
    • Ticketing
      • Email Templates
      • Status Management
    • Agent Management
      • Agents
      • Departments
      • Role Management
    • API Settings
      • Json Parse Format
    • Scripts
    • SLA Policy
    • Routing Policy in REVE Chat
      • Chat Routing
      • Advanced Routing
    • Other Settings
Powered by GitBook
On this page
  • Getting Started with React Native iOS SDK
  • React Native iOS SDK integration process

Was this helpful?

  1. Integrations
  2. Mobile SDK

React Native iOS SDK

REVE Chat’s iOS SDK can be seamlessly integrated with your mobile apps and enable your team deliver in-app messaging to your app users for better engagement and customer support.

Getting Started with React Native iOS SDK

This documentation shows you how to embed REVE Chat iOS SDK in an React Native application and get started in a few minutes.

Necessary or minimum requirements:

  1. Xcode 7 or above

  2. iOS 8 or above

  3. React-native environment setup

React Native iOS SDK integration process

To integrate React Native iOS SDK with your iOS mobile app, please follow the below mentioned steps:

Update podfile

Go to your projects iOS folder. There you have to update podfile as bellow.

  1. Write use_frameworks! at the beginning of your podfile.

  2. Write pod 'ReveChatSDK' inside your projects target

  3. At the end of your target add the bellow code

dynamic_frameworks = ['ReveChatSDK','SocketRocket','AFNetworking','GoogleWebRTC']
pre_install do |installer|
  installer.pod_targets.each do |pod|
    if !dynamic_frameworks.include?(pod.name)
      puts "Overriding the static_framework? method for #{pod.name}"
      def pod.static_framework?;
        true
      end
      def pod.build_type;
        Pod::BuildType.static_library
      end
    end
  end
ending>
  1. Now run pod install in the iOS directory from command line.

So, an example of your Podfile would eventually look like bellow.

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, min_ios_version_supported
prepare_react_native_project!
use_frameworks!

flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

target 'AwesomeProject2' do
  config = use_native_modules!

  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    :flipper_configuration => flipper_config,
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
  
  pod 'ReveChatSDK'
end

dynamic_frameworks = ['ReveChatSDK','SocketRocket','AFNetworking','GoogleWebRTC']
pre_install do |installer|
  installer.pod_targets.each do |pod|
    if !dynamic_frameworks.include?(pod.name)
      puts "Overriding the static_framework? method for #{pod.name}"
      def pod.static_framework?;
        true
      end
      def pod.build_type;
        Pod::BuildType.static_library
      end
    end
  end
end

Update your plist

The iOS SDK uses the camera and photo library in iOS.

If your app does not already request permissions for these features, you should update your info.plist file with a usage description for NSPhotoLibraryUsageDescription and NSCameraUsageDescription.

/* You can do this by adding the following lines in your plist source code */
<key>NSPhotoLibraryUsageDescription</key>
<string><description to use photo library></string>
<key>NSCameraUsageDescription</key>
<string><description to use camera></string> 
<key>NSAppTransportSecurity</key>        <dict>
<key>NSAllowsArbitraryLoads</key>
<true/></dict>
<key>NSMicrophoneUsageDescription</key>
<string><Add your description here></string>

Update Appdelegate.h

You have to add this two function definitions in Appdelegate.h

- (void) setInitialViewController;
- (void) goToReveChatSDK:(NSString *)accountId userName:(NSString *)userName userEmail:(NSString*)userEmail phone:(NSString*)phone;

Update Appdelegate.m

  1. Add #import <ReveChatSDK/ReveChatSDK.h> at the beginning of your file.

  2. Add implementation of setInitialViewController function

- (void) setInitialViewController {

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.rootViewController = [[UIViewController alloc] init];

  [self.window makeKeyAndVisible];
}
  1. Add implementation of goToReveChatSDK function

- (void) goToReveChatSDK:(NSString *)accountId userName:(NSString *)userName userEmail:(NSString*)userEmail phone:(NSString*)phone {
  UIViewController* uvc = [[UIViewController alloc]init];
  uvc.view.backgroundColor = [UIColor whiteColor];
  
  UINavigationController* navVC = [[UINavigationController alloc]initWithRootViewController:uvc];
  [self.window.rootViewController presentViewController:navVC animated:false completion:NULL];
  [[ReveChatManager sharedManager] setupAccountWith:accountId];

   [[ReveChatManager sharedManager]
    initiateReveChatWith:userName
    visitorEmail:userEmail
    visitorMobile:phone
    onNavigationViewController:navVC];
}
  1. Call setInitialViewController from didFinishLaunchingWithOptions function

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  [self setInitialViewController];
  
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

Create REVEChatSDKModule.h

Create REVEChatSDKModule.h file and write bellow code:

#import <React/RCTBridgeModule.h>
@interface REVEChatSDKModule : NSObject <RCTBridgeModule>


@end

Create REVEChatSDKModule.m

Create REVEChatSDKModule.m and write bellow code:

#import "REVEChatSDKModule.h"
#import <React/RCTLog.h>
#import "AppDelegate.h"

@implementation REVEChatSDKModule

RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(startChat:(NSString *)accountId :(NSString *)userName :(NSString*)userEmail :(NSString*)phone)
{
 RCTLogInfo(@"accountId %@, userName %@, userEmail %@, phone %@",accountId, userName, userEmail,phone);
  
  AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
  
  dispatch_async(dispatch_get_main_queue(), ^{
    [appDelegate goToReveChatSDK:accountId userName:userName userEmail:userEmail phone:phone];
  });
}

@end

Code for JavaScript

Add following lines from where you want to start the chat (App.tsx file). In this line REVEChatSDKModule.startChat('account_id', 'user_name', 'user@email', 'user_phone_number'); change account_id, user_name, user@email and 'user_phone_number' to your preferred one.

import React from 'react';

import {
  NativeModules
} from 'react-native';

const {REVEChatSDKModule} = NativeModules;

<Button
title="Chat With Us"
onPress={() => {
   REVEChatSDKModule.startChat('account_id', 'user_name', 'user@email', 'user_phone_number'); 
}
} />


export default App;

Import ReveChat headers

* Objective c
#import < ReveChatSDK/ReveChatSDK.h>
* swift
import ReveChatSDK

Setup Account ID

* Objective c
[[ReveChatManager sharedManager]
setupAccountWith:<your account id>];
* swift
/* declare object for reve chat manager class*/
let reveChatManager = ReveChatManager()
reveChatManager.setupAccount(with: <your account id   as string> )

Initiate ReveChat

* Obj c
[[ReveChatManager sharedManager]
 initiateReveChatWith:<visitor name>
 visitorEmail:<visitor email>
 visitorMobile:<visitor mobile>
 onNavigationViewController:<your navigation
 controller>];
* Swift
/* initiate the class with name, email , mobile and parent controller of the sdk as parameters*/
reveChatManager.initiateReveChat(with: <visitor name>,
visitorEmail: <visitor email>,
visitorMobile: <visitor mobile>,
onNavigationViewController: <UINavigationController on which you want it to load>)
*To initiate video call.The audio parameter should be false

Enable Notification

You can enable the notification when the app is in background mode. Use the below code:

* Objective-c
// In Scenedelegate.h add the following property:
@property (nonatomic,assign) UIBackgroundTaskIdentifier backgroundUpdateTask;

// In Scenedelegate.m add the following function:
-(void) endBackgroundUpdateTask {
    [UIApplication.sharedApplication endBackgroundTask:self.backgroundUpdateTask];
    self.backgroundUpdateTask = UIBackgroundTaskInvalid;
}

// In Scenedelegate.m’s willConnectToSession function add the bellow line:
self.backgroundUpdateTask = UIBackgroundTaskInvalid;

// In Scenedelegate.m’s sceneDidBecomeActive function add the bellow line:
[self endBackgroundUpdateTask];

// In Scenedelegate.m’s sceneWillResignActive function add the bellow line:
self.backgroundUpdateTask = [UIApplication.sharedApplication beginBackgroundTaskWithExpirationHandler:^{
        [self endBackgroundUpdateTask];
}];

// In Scenedelegate.m’s sceneWillEnterForeground function add the bellow line: 
[UIApplication sharedApplication].applicationIconBadgeNumber = 0;

* Swift 

var backgroundUpdateTask: UIBackgroundTaskIdentifier = UIBackgroundTaskIdentifier(rawValue: 0)

Method name : “sceneDidBecomeActive” or “applicationDidBecomeActive”
self.endBackgroundUpdateTask()

Method name “sceneWillResignActive” or “applicationWillResignActive”
self.backgroundUpdateTask = UIApplication.shared.beginBackgroundTask(expirationHandler: {
                self.endBackgroundUpdateTask()
            })

func endBackgroundUpdateTask() {
        UIApplication.shared.endBackgroundTask(self.backgroundUpdateTask)
        self.backgroundUpdateTask = UIBackgroundTaskIdentifier.invalid
    }

// In applicationDidBecomeActive function
application.applicationIconBadgeNumber = 0

Additional changes(optional)

* Objective c
/* for title while chatting */
[ReveChatManager sharedManager].title = @"me talking";
/* for theme color while chatting */
[ReveChatManager sharedManager].themeColor = [UIColor blueColor];
/* for background color */
[ReveChatManager sharedManager].backgroundColor = [UIColor yellowColor];
/* for navigation bar color */
[ReveChatManager sharedManager].navBarColor = [UIColor orangeColor];
/* for tint color of navigation bar while chatting */
[ReveChatManager sharedManager].headerTintColor = [UIColor whiteColor];
/* for title color while chatting */
[ReveChatManager sharedManager].headerTextColor = [UIColor whiteColor];
/* for incoming chat bubble color */
[ReveChatManager sharedManager].incomingBubbleColor = [UIColor blueColor];
/* for outgoing chat bubble color */
[ReveChatManager sharedManager].outgoingBubbleColor = [UIColor blueColor];
* Swift
/* for title while chatting */
reveChatManager.setChatTitle("Lets chat")
/* for theme color while chatting*/
reveChatManager.themeColor = UIColor.blue
/* for background color*/
reveChatManager.backgroundColor = UIColor.yellow
/* for navigation bar color*/
reveChatManager.navBarColor = UIColor.gray
/* for tint color of header */
reveChatManager.headerTintColor = UIColor.red
/* for title color while chatting*/
reveChatManager.headerTextColor = UIColor.black
/* for incoming chat bubble color*/
reveChatManager.incomingBubbleColor = UIColor.blue
/* for outgoing chat bubble color*/
reveChatManager.outgoingBubbleColor = UIColor.yellow

FAQs (General issues faced while integrating)

  1. I am facing the following error in console ld: library not found for -lAFNetworking Reason: in your pod file use_frameworks! line is commented. Solution: Uncomment use_frameworks! line and build again

  2. Getting Crash when initiating revechat sdk reason: the pod has been updated on the cocoa pods solution: run ‘pod update‘ in the terminal on your project path

Add primary an

To change chat window’s content as per your need:

PreviousFlutter iOS SDKNextReact Native Android SDK

Last updated 1 year ago

Was this helpful?

Any questions? Please email us at or .

issue.support@revechat.com
scan to chat with us