@synapsestudios/react-native-zendesk-support
Advanced tools
React Native Wrapper around Zendesk Support
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
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.
Libraries and click Add Files to "Your Project Name". Look under node_modules/react-native-zendesk-supportand addRNZenDeskSupport.xcodeproj`libRNZenDeskSupport.a from Libraries/RNZenDeskSupport.xcodeproj/Products to Build Phases -> Link Binary With Libraries$(SRCROOT)/../../react-native/React is included in Header Search Paths under Build Settings for the Libraries/RNZenDeskSupport.xcodeproj library you just added. Mark it as recursivedependencies {
...
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)
componentWillMount// passing an identity to setupIdentity() is optional, pass null instead
const identity = {
customerEmail: 'foo@bar.com',
customerName: 'Foo Bar'
}
ZendeskSupport.setupIdentity(identity)
componentWillMount or componentWillReceiveProps if your identity details aren't immediately availableconst 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 })
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.
FAQs
React Native Wrapper around Zendesk Support
We found that @synapsestudios/react-native-zendesk-support demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.