diff --git a/README.md b/README.md index 212e0174..2fa2d7f1 100644 --- a/README.md +++ b/README.md @@ -10,15 +10,22 @@ - [Installation](#installation) - [Android](#android) - - [General](#general) - - [Permissions](#permissions) - - [Automatic](#automatic-react-native-v060-and-above) - - [Manual](#manual-react-native-v059-and-below) - - [Push Notifications](#push-notifications) + - [Automatic](#android-automatic-react-native-v060-and-above) + - [Manual](#android-manual-react-native-v059-and-below) + - [General](#android-general) + - [Permissions](#permissions-android) + - [Push Notifications](#android-push-notifications) - [iOS](#ios) + - [Automatic](#ios-automatic-react-native-v060-and-above) + - [Manual](#ios-manual-react-native-v059-and-below) + - [General](#ios-general) + - [Permissions](#permissions-ios) + - [Push Notifications](#ios-push-notifications) +- [Deep Linking](#deep-linking) +- [Uploading token to Intercom](#upload-token-to-intercom) - [Common methods](#methods) - [Usage](#usage) -- [Example App](#methods) +- [Troubleshooting](#troubleshooting) - [Author](#author) - [License](#license) @@ -30,9 +37,40 @@ or yarn add intercom-react-native ``` +####Cocoapods: + +```sh +cd ios +pod install +cd .. +``` + ### Android -#### General +### Android Automatic React Native v0.60 and above + +As react-native@0.60 and above supports autolinking there is no need to run the linking. + +### Android Manual React Native v0.59 and below + +Make `react native link intercom-react-native` + +### Or + +- Add below code to `android/settings.gradle` + +``` +include ':intercomreactnative' +project(':intercomreactnative').projectDir = new File(rootProject.projectDir, '../../android') +``` + +- Then edit `android/app/build.gradle`, inside `dependencies` at very bottom add + +``` +implementation project(':intercomreactnative') +``` + +#### Android General - Add below lines to `MainApplication.java` inside `onCreate` method. @@ -69,7 +107,7 @@ buildscript { ... ``` -### Permissions +### Permissions Android Add those permissions to your `AndroidManifest.xml` @@ -79,26 +117,7 @@ Add those permissions to your `AndroidManifest.xml` ``` -### Automatic React Native v0.60 and above - -As react-native@0.60 and above supports autolinking there is no need to run the linking. - -### Manual React Native v0.59 and below - -- Add below code to `android/settings.gradle` - -``` -include ':intercomreactnative' -project(':intercomreactnative').projectDir = new File(rootProject.projectDir, '../../android') -``` - -- Then edit `android/app/build.gradle`, inside `dependencies` at very bottom add - -``` -implementation project(':intercomreactnative') -``` - -### Push Notifications +### Android Push Notifications For Push notification support add `GoogleServices` and `Firebase Cloud Messagng` to your app. @@ -175,7 +194,23 @@ public class MainNotificationService extends FirebaseMessagingService { +``` + +- Add belo code to your React Native app +```jsx + useEffect(() => { + /** + * Handle PushNotification + */ + AppState.addEventListener( + 'change', + (nextAppState) => + nextAppState === 'active' && Intercom.handlePushMessage() + ); + return () => AppState.removeEventListener('change', () => true); + } + , []) ``` - To handle Push Notification deep linking add below code to `` inside `AndroidManifest.xml` @@ -210,7 +245,155 @@ public class MainNotificationService extends FirebaseMessagingService { ### IOS -TODO +### IOS Automatic React Native v0.60 and above + +[Insall dependencies using cocoapods](#cocoapods) + +### IOS Manual React Native v0.59 and below + +[How to manual link IOS Intecom SDK ](docs/IOS-MANUAL-LINKING.md) + +#### IOS General + +- Open `ios/AppDelegate.m` then add below code: + + - At the top of file add: + + ``` + #import "AppDelegate.h" + #import + #import + #import + ... + #import <-- Add This + ``` + - Inside `didFinishLaunchingWithOptions` before `return YES` add: + ``` + ... + self.window.rootViewController = rootViewController; + + [IntercomModule initialize:@"APP KEY" withAppId:@"APP ID"]; <-- Add this (Remember to replace strings with your api keys) + + return YES; + } + ``` + +#### Permissions IOS + +Add this permission to your `Info.plist` + +```xml + +NSPhotoLibraryUsageDescription +Send photos to support center +``` + +### IOS Push Notifications + +Package handles Push Notification itself, you have to only +[Upload Token to intercom](#upload-token-to-intercom) +___ + +### Or Set up notification in native part + +- In `AppDelegate.m` at the top add + +``` +#import +``` + +- Inside `didFinishLaunchingWithOptions` before `return YES;` add below code: + +``` + ... + + //Code to add + UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter]; + [center requestAuthorizationWithOptions:(UNAuthorizationOptionAlert + UNAuthorizationOptionSound) + completionHandler:^(BOOL granted, NSError *_Nullable error) { + }]; + [[UIApplication sharedApplication] registerForRemoteNotifications]; + //Code to add + + return YES; +``` + +- In same file, above `@end` add: + +``` +- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { + [IntercomModule setDeviceToken:deviceToken]; +} + +@end +``` + +### Deep Links Support + +Setup of React Native deep links can be found [Here](https://reactnative.dev/docs/linking#enabling-deep-links) + +- Add import to `AppDelegate.m` + +```` +#import "AppDelegate.h" + +#import +#import +#import + +#import <--Add this +```` + +- Add below code to `AppDelegate.m` above `@end` + +``` +- (BOOL)application:(UIApplication *)application + openURL:(NSURL *)url + options:(NSDictionary *)options +{ + return [RCTLinkingManager application:application openURL:url options:options]; +} + + +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url + sourceApplication:(NSString *)sourceApplication annotation:(id)annotation +{ + return [RCTLinkingManager application:application openURL:url + sourceApplication:sourceApplication annotation:annotation]; +} + +@end +``` + +## Deep Linking + +Deep linking example [Here](https://github.com/intercom/intercom-react-native/blob/main/example/src/App.tsx) + +```jsx + /** + * Handle Push Notification deep links + */ +Linking.addEventListener('url', (event) => { + if (event) { + Alert.alert(event.url); + } +}); + +Linking.getInitialURL() + .then((url) => { + if (url) { + Alert.alert(url); + } + }) + .catch((e) => console.log(e)); +``` + +## Upload token to Intercom + +Token upload can be handled by [Intercom.sendTokenToIntercom(token)](#intercomsendtokentointercomtoken) +with token obtained +from [react-native-notifications](https://wix.github.io/react-native-notifications/api/general-events#registerremotenotificationsregistered) +___ ## Methods @@ -220,6 +403,23 @@ TODO ___ +### `Intercom.setUserHash(userHash) (Optional)` + +Sets the user hash necessary for validation when Identity Verification is enabled. +***This should be called before any registration calls.*** + +### Options + +| Type | Type | Required | +| ------- | -------- | -------- | +| userHash | string |yes | + +### Returns + +`Promise` + +___ + ### `Intercom.registerUnidentifiedUser()` Registers an unidentified user with Intercom @@ -249,22 +449,6 @@ One of below fields is required. ___ -### `Intercom.setUserHash(userHash)` - -Sets the user hash necessary for validation when Identity Verification is enabled. - -### Options - -| Type | Type | Required | -| ------- | -------- | -------- | -| userHash | string |yes | - -### Returns - -`Promise` - -___ - ### `Intercom.updateUser(userAttributes)` Updates a user in Intercom. @@ -561,158 +745,63 @@ Set the level of the native logger `Promise` ___ -## Usage +### `Intercom.addEventListener(event,callback)` -```jsx -export default function App() { - const [count, setCount] = useState < number > (0); - const [loggedUser, setLoggedUser] = useState < boolean > (false); - const [bottomPadding, setBottomPadding] = useState < number > (0); - const [inAppMessageVisibility, setInAppMessageVisibility] = - useState < boolean > (true); +Sets a listener for listed events: - useEffect(() => { - /** - * Handle PushNotification - */ - AppState.addEventListener( - 'change', - (nextAppState) => - nextAppState === 'active' && Intercom.handlePushMessage() - ); +| Event | Platform | +| ------- | -------- | +| IntercomUnreadConversationCountDidChangeNotification| IOS, Android | +| IntercomHelpCenterDidShowNotification| IOS | +| IntercomHelpCenterDidHideNotification| IOS | +| IntercomWindowDidShowNotification| IOS | | +| IntercomWindowDidHideNotification| IOS | - /** - * Handle Push Notification deep links - */ - Linking.addEventListener('url', (event) => { - if (event) { - Alert.alert(event.url); - } - }); +```javascript +useEffect(() => { + const listener = Intercom.addEventListener('IntercomUnreadConversationCountDidChangeNotification', ({count}) => alert(count); + return () => { + listener.remove(); + } +}, []) +``` - Linking.getInitialURL() - .then((url) => { - if (url) { - Alert.alert(url); - } - }) - .catch((e) => console.log(e)); +#### Options - /** - * Handle message count changed - */ - const event = Intercom.addOnMessageCountChangeListener(({count}) => { - setCount(count); - }); +| Type | Type | Required | +| ------- | -------- | -------- | +| event| string (`IntercomEvents`) |yes | +| callback| function `({count?: number, visible?: boolean}) => void` |yes | - return () => { - Linking.removeEventListener('url', () => { - }); - AppState.removeEventListener('change', () => { - }); - event(); - }; - }, []); - - return ( - - - - In App Message Visibility:{' '} - - {inAppMessageVisibility ? Visibility.GONE : Visibility.VISIBLE} - - - - Bottom padding: {bottomPadding} - - - Unread messages count: {count} - - - -