Disclaimer: This package was originally created by Github user robertSheaO and is an unofficial fork. The original repository has been deleted as has the RobertSheaO's profile. The original repository was located at https://github.com/robertsheao/react-native-zendesk-support, this is a maintainted fork under active development.
React Native bridge to Zendesk Support SDK on iOS and Android. This currently only supports using the out of the box views the Zendesk Support SDK provides. At the moment, only anonymous authentication is supported.
This has only been tested to work with React Native 0.47, probably works in earlier versions.
react-native link @synapsestudios/react-native-zendesk-support
Add the following line to your Podfile:
pod 'react-native-zendesk-support', :path => '../node_modules/react-native-zendesk-support'
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
target.build_settings(config.name)['CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES'] = 'YES'
end
end
end
If using react-native link
doesn't work, you can try manually linking. Sometimes apps created with create-react-native-app
that haven't been ejected can have problems linking properly.
- Open your project in XCode, right click on
Libraries
and clickAdd Files to "Your Project Name"
. Look under node_modules/react-native-zendesk-supportand add
RNZenDeskSupport.xcodeproj` - Add
libRNZenDeskSupport.a
fromLibraries/RNZenDeskSupport.xcodeproj/Products
toBuild Phases -> Link Binary With Libraries
- Verify
$(SRCROOT)/../../react-native/React
is included inHeader Search Paths
underBuild Settings
for theLibraries/RNZenDeskSupport.xcodeproj
library you just added. Mark it asrecursive
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules
+ compile project(':react-native-zendesk-support')
}
...
include ':app'
+ include ':react-native-zendesk-support'
+ project(':react-native-zendesk-support').projectDir = new File(rootProject.projectDir, '../node_modules/@synapsestudios/react-native-zendesk-support/android')
You need to add the following repository to your android/app/build.gradle
file. If you do not already have a repositories
section, add it at the root level of the file right before the dependencies
section.
repositories {
maven { url 'https://zendesk.jfrog.io/zendesk/repo' }
}
+ import com.robertsheao.RNZenDeskSupport.RNZenDeskSupport;
public class MainApplication extends Application implements ReactApplication {
//......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
+ new RNZenDeskSupport(),
new MainReactPackage()
);
}
......
}
You need to follow the instructions to integrate the Zendesk Support SDK for iOS.
Personally, I use the CocoaPods implementation described in their documentation.
import ZendeskSupport from '@synapsestudios/react-native-zendesk-support';
const config = {
appId: 'your_app_id',
zendeskUrl: 'your_zendesk_url',
clientId: 'your_client_id'
}
ZendeskSupport.initialize(config)
Note: You must initialize Zendesk prior to calling setupIdentity. Best place for it would be inside componentWillMount
// passing an identity to setupIdentity() is optional, pass null instead
const identity = {
customerEmail: 'foo@bar.com',
customerName: 'Foo Bar'
}
ZendeskSupport.setupIdentity(identity)
Note: You must define an identity prior to calling any support ticket or help center methods. Suggested places are inside componentWillMount
or componentWillReceiveProps
if your identity details aren't immediately available
const customFields = {
customFieldId: 'Custom Field Value'
}
ZendeskSupport.callSupport(customFields)
ZendeskSupport.supportHistory()
ZendeskSupport.showHelpCenter()
ZendeskSupport.showCategories(['categoryId'])
ZendeskSupport.showSections(['sectionId'])
ZendeskSupport.showLabels(['tacocat'])
The Help Center functions above support a second parameter, an object of options.
const options = {
articleVotingEnabled: false,
hideContactSupport: false,
showConversationsMenuButton: false,
withContactUsButtonVisibility: 'OFF'
}
ZendeskSupport.showHelpCenterWithOptions({ options })
ZendeskSupport.showCategoriesWithOptions(['categoryId'], { options })
ZendeskSupport.showSectionsWithOptions(['sectionId'], { options })
ZendeskSupport.showLabelsWithOptions(['tacocat'], { options })
- true (default) – Show voting buttons on articles
- false – Hide voting buttons on articles
- true (default) – Shows contact support option in empty results and navigation bar on iOS
- false – Hides contact support option in empty results and navigation bar on iOS
- true (default) – Shows the right menu on Android which shows tickets
- false – Hides the right menu on Android which shows tickets
- ARTICLE_LIST_AND_ARTICLE (default) – Show floating action button in list and article view
- ARTICLE_LIST_ONLY – Show floating action button only in list views
- OFF – Hide floating action button on articles and list views
There is an out of the box issue with Zendesk SDK, as reported by Zendesk support staff themselves, where the expanded category headers use the same color as the top header. Unfortunately, the default top header color and the background color are very close and you can barely tell the text is even there when the category is expanded.
You're gonna need to update your android/app/src/main/res/values/styles.xml
to extend from the ZendeskSdkTheme to define your own colors. Below is my own, you can change it to whatever you want your primary color to be.
<resources>
<style name="AppTheme" parent="ZendeskSdkTheme.Light">
<item name="colorPrimary">#FF6240</item>
</style>
</resources>
If you're interested in other things you can theme, or if you want to implement themes differently in Android, you can check out the Zendesk SDK documention.
First off, make sure your content is published. Secondly, you need to make sure to "Enable Guide" in your Zendesk settings so the content will appear. It is described under Enabling Help Center in setup mode in the official Zendesk Support documentation.
You need to call ZendeskSupport.setupIdentity
before calling help center.
You need to call ZendeskSupport.initialize
before calling any other methods.
Custom fields need to be set to both "Visible" and "Editable" inside the Zendesk admin console.
- Authenticate using JWT endpoint
- Theme support (iOS only)
- Show article by id
- Hiding "Contact us" on iOS from article and list view