-
Notifications
You must be signed in to change notification settings - Fork 3
ISS-160270: Restructure mobile SDK documentation for React Native SDK #223
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,14 +1,15 @@ | ||||||
This section describes the process of integrating the DevRev SDK with your React Native app. | ||||||
|
||||||
## Installation | ||||||
## Quickstart Guide | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🚫 [EkLine] |
||||||
### Installation | ||||||
|
||||||
To install the DevRev SDK, run the following command: | ||||||
|
||||||
```sh | ||||||
npm install @devrev/sdk-react-native | ||||||
``` | ||||||
|
||||||
## Set up the DevRev SDK | ||||||
### Set up the DevRev SDK | ||||||
|
||||||
In DevRev, go to **Settings** > **PLuG Chat** copy the value under **Your unique App ID**. After obtaining the credentials, you can configure the DevRev SDK in your app. | ||||||
|
||||||
|
@@ -22,7 +23,8 @@ The SDK will be ready for use once you execute the following configuration metho | |||||
DevRev.configure(appID: string) | ||||||
``` | ||||||
|
||||||
## Identification | ||||||
## Features | ||||||
### Identification | ||||||
|
||||||
To access certain features of the DevRev SDK, user identification is required. | ||||||
|
||||||
|
@@ -38,23 +40,30 @@ The `Identity` structure allows for custom fields in the user, organization, and | |||||
|
||||||
You can select from the following methods to identify users within your application: | ||||||
|
||||||
### Anonymous identification | ||||||
#### Anonymous identification | ||||||
|
||||||
The anonymous identification method allows you to create an anonymous user with an optional user identifier, ensuring that no other data is stored or associated with the user. | ||||||
|
||||||
```typescript | ||||||
DevRev.identifyAnonymousUser(userID: string) | ||||||
``` | ||||||
|
||||||
### Unverified identification | ||||||
#### Unverified identification | ||||||
|
||||||
The unverified identification method identifies users with a unique identifier, but it does not verify their identity with the DevRev backend. | ||||||
|
||||||
```typescript | ||||||
DevRev.identifyUnverifiedUser(userID: string, organizationID?: string) | ||||||
``` | ||||||
|
||||||
### Update the user | ||||||
#### Verified identification | ||||||
The verified identification method identifies users with a unique identifier and verifies their identity with the DevRev backend. | ||||||
|
||||||
```typescript | ||||||
DevRev.identifyVerifiedUser(userID: string, sessionToken: string) | ||||||
``` | ||||||
|
||||||
#### Update the user | ||||||
|
||||||
You can update the user's information using the following method: | ||||||
|
||||||
|
@@ -66,7 +75,7 @@ DevRev.updateUser(identity: Identity) | |||||
The `userID` property cannot be updated. | ||||||
</Callout> | ||||||
|
||||||
## PLuG support chat | ||||||
### PLuG support chat | ||||||
|
||||||
Once user identification is complete, you can start using the chat (conversations) dialog supported by our DevRev SDK. The support chat feature can be shown as a modal screen from the top-most screen. | ||||||
|
||||||
|
@@ -80,15 +89,15 @@ To show the support chat screen in your app, you can use the following method: | |||||
DevRev.showSupport() | ||||||
``` | ||||||
|
||||||
### Creating a new support conversation | ||||||
#### Creating a new support conversation | ||||||
|
||||||
You can initiate a new support conversation directly from your app. This method displays the support chat screen and simultaneously creates a new conversation. | ||||||
|
||||||
```typescript | ||||||
DevRev.createSupportConversation() | ||||||
``` | ||||||
|
||||||
### In-app link handling | ||||||
#### In-app link handling | ||||||
|
||||||
In certain cases, tapping links in the support chat opens them in the app instead of a browser. You can control whether the chat modal screen is dismissed after the link is opened by calling the following method: | ||||||
|
||||||
|
@@ -98,7 +107,7 @@ DevRev.setShouldDismissModalsOnOpenLink(value: boolean) | |||||
|
||||||
Setting this flag to `true` applies the system's default behavior for opening links, which includes dismissing any DevRev modal screens to facilitate handling your own deep links. | ||||||
|
||||||
### In-app link callback | ||||||
#### In-app link callback | ||||||
|
||||||
<Callout intent="note"> | ||||||
This feature is for Android only. | ||||||
|
@@ -114,7 +123,7 @@ DevRevSDK.setInAppLinkHandler((url) => { | |||||
|
||||||
If a custom handler is not defined, all external and in-app links from the support chat will open using the system's default browser, such as Chrome. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
## Analytics | ||||||
### Analytics | ||||||
|
||||||
<Callout intent="note"> | ||||||
This feature requires the SDK to be configured and the user to be identified, whether they are unverified or anonymous. | ||||||
|
@@ -126,11 +135,11 @@ The DevRev SDK allows you to send custom analytic events by using a properties m | |||||
DevRev.trackEvent(name: string, properties?: Map<string, string>) | ||||||
``` | ||||||
|
||||||
## Session analytics | ||||||
### Session analytics | ||||||
|
||||||
The DevRev SDK offers session analytics features to help you understand how users interact with your app. | ||||||
|
||||||
### Opting-in or out | ||||||
#### Opting-in or out | ||||||
|
||||||
Session analytics features are opted-in by default, enabling them from the start. However, you can opt-out using the following method: | ||||||
|
||||||
|
@@ -144,7 +153,7 @@ To opt back in, use the following method: | |||||
DevRev.resumeAllMonitoring() | ||||||
``` | ||||||
|
||||||
### Session recording | ||||||
#### Session recording | ||||||
|
||||||
You can enable session recording to record user interactions with your app. | ||||||
|
||||||
|
@@ -162,7 +171,7 @@ The session recording feature includes the following methods to control the reco | |||||
|`DevRev.resumeRecording()` | Resume a paused session recording. | | ||||||
|`DevRev.processAllOnDemandSessions()` | Stop the ongoing session recording and upload all offline sessions on demand, including the current one.| | ||||||
|
||||||
### Session properties | ||||||
#### Session properties | ||||||
|
||||||
You can add custom properties to the session recording to help you understand the context of the session. The properties are defined as a map of string values. | ||||||
|
||||||
|
@@ -176,7 +185,7 @@ To clear the session properties in scenarios such as user logout or when the ses | |||||
DevRev.clearSessionProperties() | ||||||
``` | ||||||
|
||||||
### Masking sensitive data | ||||||
#### Masking sensitive data | ||||||
|
||||||
To protect sensitive data, the DevRev SDK provides an auto-masking feature that masks data before sending to the server. Input views such as text fields, text views, and web views are automatically masked. | ||||||
|
||||||
|
@@ -192,7 +201,7 @@ If any previously masked views need to be unmasked, you can use the following me | |||||
DevRev.unmarkSensitiveViews(tags: any[]) | ||||||
``` | ||||||
|
||||||
### Timers | ||||||
#### Timers | ||||||
|
||||||
The DevRev SDK offers a timer mechanism to measure the time spent on specific tasks, allowing you to track events such as response time, loading time, or any other duration-based metrics. | ||||||
|
||||||
|
@@ -210,25 +219,25 @@ To stop a timer, use the following method: | |||||
DevRev.stopTimer(name: string, properties: Map<string, string>) | ||||||
``` | ||||||
|
||||||
### Screen tracking | ||||||
#### Screen tracking | ||||||
|
||||||
The DevRev SDK offers automatic screen tracking to help you understand how users navigate through your app. Although view controllers are automatically tracked, you can manually track screens using the following method: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
```typescript | ||||||
DevRev.trackScreen(name: string) | ||||||
``` | ||||||
|
||||||
## Push notifications | ||||||
### Push notifications | ||||||
|
||||||
You can configure your app to receive push notifications from the DevRev SDK. The SDK is able to handle push notifications and execute actions based on the notification's content. | ||||||
|
||||||
The DevRev backend sends push notifications to your app to notify users about new messages in the PLuG support chat. | ||||||
|
||||||
### Configuration | ||||||
#### Configuration | ||||||
|
||||||
To receive push notifications, you need to configure your DevRev organization by following the instructions in the [push notifications](./push-notification) section. | ||||||
|
||||||
### Register for push notifications | ||||||
#### Register for push notifications | ||||||
|
||||||
<Callout intent="note"> | ||||||
To ensure delivery to the correct user, push notifications require that the SDK has been configured and the user has been identified. | ||||||
|
@@ -255,9 +264,9 @@ DevRevSDK.unregisterDevice(deviceID: string) | |||||
The method requires the device identifier, which should be the same as the one used when registering the device. | ||||||
|
||||||
|
||||||
### Processing push notifications | ||||||
#### Processing push notifications | ||||||
|
||||||
#### Android | ||||||
##### Android | ||||||
|
||||||
On Android, notifications are implemented as data messages to offer flexibility. However, this means that automatic click processing isn't available. To handle notification clicks, developers need to intercept the click event, extract the payload, and pass it to a designated method for processing. This custom approach enables tailored notification handling in Android applications. | ||||||
|
||||||
|
@@ -281,7 +290,7 @@ const notificationPayload = { | |||||
const messageJson = notificationPayload["message"]; | ||||||
DevRevSDK.processPushNotification(JSON.stringify(messageJson)); | ||||||
``` | ||||||
#### iOS | ||||||
##### iOS | ||||||
|
||||||
On iOS devices, you must pass the received push notification payload to the DevRev SDK for processing. The SDK will then handle the notification and execute the necessary actions. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
|
@@ -295,6 +304,47 @@ For example: | |||||
DevRevSDK.processPushNotification(JSON.stringify(payload)); | ||||||
``` | ||||||
|
||||||
## License | ||||||
#### Screen transition tracking (Android only) | ||||||
On Android, the DevRev SDK provides methods to manually track the screen transitions. | ||||||
|
||||||
When a screen transition begins, you must call the following method: | ||||||
|
||||||
```typescript | ||||||
DevRev.startScreenTransition() | ||||||
``` | ||||||
|
||||||
When a screen transition ends, you must call the following method: | ||||||
|
||||||
```typescript | ||||||
DevRev.endScreenTransition() | ||||||
``` | ||||||
|
||||||
## Troubleshooting | ||||||
- **Issue**: Support chat won't show. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
**Solution**: Ensure you have correctly called one of the identification methods: `DevRev.identifyUnverifiedUser(...)`, `DevRev.identifyVerifiedUser(...)`, or `DevRev.identifyAnonymousUser(...)`. | ||||||
|
||||||
- **Issue**: Not receiving push notifications. | ||||||
**Solution**: The DevRev SDK reports all errors in the console using Apple's Unified Logging System. Look for error messages in the subsystem `ai.devrev.sdk`. | ||||||
|
||||||
|
||||||
## Migration Guide | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🚫 [EkLine] |
||||||
This guide and chart should help facilitate the transition from the legacy UserExperior SDK to the new DevRev SDK in your React Native application, providing insights into feature equivalents and method changes. | ||||||
|
||||||
### Feature Equivalence Chart | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🚫 [EkLine] |
||||||
| Feature | UserExperior SDK | DevRev SDK | | ||||||
|-|-|-| | ||||||
| Installation | `npm install react-native-userexperior` | `npm install @devrev/sdk-react-native` | | ||||||
| Initialization | `UserExperior.startRecording(string)` | `DevRev.configure(appID: string)` | | ||||||
| User Identification | `UserExperior.setUserIdentifier(string)` | `DevRev.identifyAnonymousUser(userID: string)`<br> `DevRev.identifyUnverifiedUser(identity: Identity)`<br> `DevRev.updateUser(identity: Identity)`<br> `DevRev.identifyVerifiedUser(userID: string, sessionToken: string)`<br> `DevRev.logout(deviceID: string)` | | ||||||
| Event Tracking | `UserExperior.logEvent(string, Map<string, string>)` | `DevRev.trackEvent(name: string, properties?: Map<string, string>)` | | ||||||
| Session Recording | `UserExperior.stopRecording()`<br />`UserExperior.pauseRecording()`<br />`UserExperior.resumeRecording()` | `DevRev.startRecording()`<br />`DevRev.stopRecording()`<br />`DevRev.pauseRecording()`<br />`DevRev.resumeRecording()`<br />`DevRev.processAllOnDemandSessions()` | | ||||||
| Opting in/out | Not supported. | `DevRev.stopAllMonitoring()`<br> `DevRev.resumeAllMonitoring()` | | ||||||
| Session Properties | `UserExperior.setUserProperties(Map<string, string>)` | `DevRev.addSessionProperties(properties: Map<string, string>)`<br> `DevRev.clearSessionProperties()` | | ||||||
| Masking Sensitive Data | `UserExperior.addInSecureViewBucket(any[])`<br />`UserExperior.removeFromSecureViewBucket(any[])` | `DevRev.markSensitiveViews(tags: any[])`<br />`DevRev.unmarkSensitiveViews(tags: any[])` | | ||||||
| Timers | Not supported. | `DevRev.startTimer()`<br> `DevRev.stopTimer()` | | ||||||
| PLuG support chat | Not supported. | `DevRev.showSupport()`<br> `DevRev.createSupportConversation()`<br> `DevRev.setShouldDismissModalsOnOpenLink()`<br> `DevRev.setInAppLinkHandler()` | | ||||||
| Push Notifications | Not supported. | `DevRev.registerDeviceToken()`<br> `DevRev.unregisterDevice(deviceID: string)`<br> `DevRev.processPushNotification()` | | ||||||
|
||||||
### License | ||||||
|
||||||
Apache 2.0 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Where possible, do not structure sentences in future tense. Use present tense instead. (EK00005)
fern-api-docs/fern/docs/pages/plug-sdk/react-native.mdx
Line 20 in 60e0cb1