{"_id":"@elyalvarado/react-native-zendesk-support","_rev":"1-e468d008fb9b0bb6716eccf87504f12e","name":"@elyalvarado/react-native-zendesk-support","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@elyalvarado/react-native-zendesk-support","version":"1.0.0","description":"React Native Wrapper around Zendesk Support","main":"index.js","repository":{"type":"git","url":"git+https://github.com/elyalvarado/react-native-zendesk-support.git"},"keywords":["zendesk","support","react-native","react","ios","android","react-component"],"author":{"name":"Ely Alvarado","url":"elyalvarado@gmail.com"},"license":"MIT","gitHead":"ccf757b5a1aa0967b6d4469f074e918fca60c1fa","bugs":{"url":"https://github.com/elyalvarado/react-native-zendesk-support/issues"},"homepage":"https://github.com/elyalvarado/react-native-zendesk-support#readme","_id":"@elyalvarado/react-native-zendesk-support@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.15.0","_npmUser":{"name":"elyalvarado","email":"elyalvarado@gmail.com"},"dist":{"integrity":"sha512-3m3kQerhDIr2e4l4bNRQX8RAFp3MDyBobI7k/26C+CNYbI2+uefWsT9TS9xaLrs1MahxNh0ffTDG4oHjhKPGFg==","shasum":"1749b89a6ad9e628f00b4b79b8162bb7398b560a","tarball":"https://registry.npmjs.org/@elyalvarado/react-native-zendesk-support/-/react-native-zendesk-support-1.0.0.tgz","fileCount":230,"unpackedSize":59016059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj822CRA9TVsSAnZWagAABPAP/2CYOXvw7yzyNbhDi7EQ\nt3XRXzH6xHEi+uH7mh4X/2SoAogOsgQ6tZFZkvvSPsE9Nww8lsi5zhW+BsF4\nuBuFIgBXNr9YYG7spS14LbMvUO8wCRqbHAtvOQYnX9v23UbhLtxZyKiW8YoN\n0woe3wpZpzNxt6WkFEfYj1K5np+VYOvvqjfNhRFnqOlRxb7bzyKGfXeP6JFu\nAYRL229PFXkH7ZHdXm35NdOLRj+eRqqum4HFhGSTztSffj9Aag8FXzKCDl3r\nZ1XpvgdCxh12AcLUQuUZjJyqHmeWLYYA7+WHpkYhJBr5oApr39Gz25MsCRIA\nviKNwdlPCiYyJdKuyOvMd5RT0qDALwQcgqQ9YCbsG2s2qzjAOER0RUzGzlZ+\nUkPwU9bm7COCd24fWGTWioNcwfBk+FWEyAz5zRF0hEF1SZe4WLHzvAdl4RGb\nyNKlKRFMqI2VPJkKGEh5x/PJNb7uuTABptJJLHvLabj3MW/dUThteX/fm+sF\nu6wH03fxCC3NrIPgOvX73hB7jQXciWkmXwCk8gbLE3VNhxKs2N2nicouLj07\n51LytcXuFbNP9YPzY5RgLB8Y6v/xRqV5vYvIRWGKvhQ08sjo9FVMz8uNX99C\naK+pQwEJtW+iwoSx75rtuqMrc9ArzMV5LtFIoJQxqCDZBn5EFAC38S7bJ8Ru\n25jC\r\n=aAWg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOEi8SIAp/cplYWTWqKecdPxNH74+tUk7sa6YzpFJbcAiEA/8MDKa7IiOrZZ8lw9O8rm37+VIbzqHq+l6FU/rUOxII="}]},"maintainers":[{"name":"elyalvarado","email":"elyalvarado@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-zendesk-support_1.0.0_1552928181075_0.3673173338693636"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-18T16:56:20.895Z","1.0.0":"2019-03-18T16:56:21.751Z","modified":"2022-04-05T07:24:35.115Z"},"maintainers":[{"name":"elyalvarado","email":"elyalvarado@gmail.com"}],"description":"React Native Wrapper around Zendesk Support","homepage":"https://github.com/elyalvarado/react-native-zendesk-support#readme","keywords":["zendesk","support","react-native","react","ios","android","react-component"],"repository":{"type":"git","url":"git+https://github.com/elyalvarado/react-native-zendesk-support.git"},"author":{"name":"Ely Alvarado","url":"elyalvarado@gmail.com"},"bugs":{"url":"https://github.com/elyalvarado/react-native-zendesk-support/issues"},"license":"MIT","readme":"Disclaimer: This package was originally forked by @synapsestudios from a repo 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.  \n\n# react-native-zendesk-support\nReact 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.\n\n## React Native Version Support\n\nThis has only been tested to work with React Native 0.47, probably works in earlier versions.\n\n## Getting started\n\n### Installing via RNPM (Common)\n```\nreact-native link @elyalvarado/react-native-zendesk-support\n```\n\n### Installing via Cocoapods (Not Common)\n\nAdd the following line to your Podfile:\n\n###### ios/Podfile\n```\npod 'react-native-zendesk-support', :path => '../node_modules/react-native-zendesk-support'\n\npost_install do |installer|\n  installer.pods_project.targets.each do |target|\n    target.build_configurations.each do |config|\n      target.build_settings(config.name)['CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES'] = 'YES'\n    end\n  end\nend\n```\n\n### Manually Linking (iOS)\n\nIf 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.\n\n1. Open your project in XCode, right click on `Libraries` and click `Add Files to \"Your Project Name\"`. Look under node_modules/react-native-zendesk-support` and add `RNZenDeskSupport.xcodeproj`\n2. Add `libRNZenDeskSupport.a` from `Libraries/RNZenDeskSupport.xcodeproj/Products` to `Build Phases -> Link Binary With Libraries`\n3. Verify `$(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 `recursive`\n\n\n### Manually Linking (Android)\n\n###### android/app/build.gradle\n```diff\ndependencies {\n    ...\n    compile \"com.facebook.react:react-native:+\"  // From node_modules\n+   compile project(':react-native-zendesk-support')\n}\n```\n\n###### android/settings.gradle\n```diff\n...\ninclude ':app'\n+ include ':react-native-zendesk-support'\n+ project(':react-native-zendesk-support').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-zendesk-support/android')\n```\n\n### Configure Android (Must Do)\nYou 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.\n\n###### android/app/build.gradle\n```\nrepositories {\n    maven { url 'https://zendesk.jfrog.io/zendesk/repo' }\n}\n```\n\n###### MainApplication.java\n```diff\n+ import com.robertsheao.RNZenDeskSupport.RNZenDeskSupport;\n\n  public class MainApplication extends Application implements ReactApplication {\n    //......\n\n    @Override\n    protected List<ReactPackage> getPackages() {\n      return Arrays.<ReactPackage>asList(\n+         new RNZenDeskSupport(),\n          new MainReactPackage()\n      );\n    }\n\n    ......\n  }\n```\n\n### Configure iOS (Must Do)\nYou need to follow the instructions to integrate the Zendesk Support SDK for [iOS](https://developer.zendesk.com/embeddables/docs/ios/integrate_sdk).\n\nPersonally, I use the CocoaPods implementation described in their documentation.\n\n## Usage\n\n#### Import the module\n```js\nimport ZendeskSupport from '@elyalvarado/react-native-zendesk-support';\n```\n\n#### Initialize Zendesk\n```js\nconst config = {\n  appId: 'your_app_id',\n  zendeskUrl: 'your_zendesk_url',\n  clientId: 'your_client_id'\n}\nZendeskSupport.initialize(config)\n```\n###### Note: You must initialize Zendesk prior to calling setupIdentity. Best place for it would be inside `componentWillMount`\n\n#### Define an identity\n```js\n// passing an identity to setupIdentity() is optional, pass null instead\nconst identity = {\n  customerEmail: 'foo@bar.com',\n  customerName: 'Foo Bar'\n}\nZendeskSupport.setupIdentity(identity)\n```\n###### 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\n\n### Support Tickets\n\n#### File a ticket\n```js\nconst customFields = {\n  customFieldId: 'Custom Field Value'\n}\nZendeskSupport.callSupport(customFields)\n```\n\n#### Bring up ticket history\n```js\nZendeskSupport.supportHistory()\n```\n\n### Help Center\n\n#### Show help center\n```js\nZendeskSupport.showHelpCenter()\n```\n\n#### Show categories, e.g., FAQ\n```js\nZendeskSupport.showCategories(['categoryId'])\n```\n\n#### Show sections, e.g., Account Questions\n```js\nZendeskSupport.showSections(['sectionId'])\n```\n\n#### Show labels, e.g., tacocat\n```js\nZendeskSupport.showLabels(['tacocat'])\n```\n\n#### Options\nThe Help Center functions above support a second parameter, an object of options.\n```js\nconst options = {\n  articleVotingEnabled: false,\n  hideContactSupport: false,\n  showConversationsMenuButton: false,\n  withContactUsButtonVisibility: 'OFF'\n}\nZendeskSupport.showHelpCenterWithOptions({ options })\nZendeskSupport.showCategoriesWithOptions(['categoryId'], { options })\nZendeskSupport.showSectionsWithOptions(['sectionId'], { options })\nZendeskSupport.showLabelsWithOptions(['tacocat'], { options })\n```\n\n##### articleVotingEnabled _boolean_\n* **true** _(default)_ – Show voting buttons on articles\n* **false** – Hide voting buttons on articles\n\n##### hideContactSupport _boolean_\n* **true** _(default)_ – Shows contact support option in empty results and navigation bar on iOS\n* **false** – Hides contact support option in empty results and navigation bar on iOS\n\n##### showConversationsMenuButton _boolean_\n* **true** _(default)_ – Shows the right menu on Android which shows tickets\n* **false** – Hides the right menu on Android which shows tickets\n\n##### withContactUsButtonVisibility _string (case sensitive)_\n* **ARTICLE_LIST_AND_ARTICLE** _(default)_ – Show floating action button in list and article view\n* **ARTICLE_LIST_ONLY** – Show floating action button only in list views\n* **OFF** – Hide floating action button on articles and list views\n\n### Styling Category Headers (Android Only)\nThere 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.\n\nYou'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.\n\n###### android/app/src/main/res/values/styles.xml\n```xml\n<resources>\n    <style name=\"AppTheme\" parent=\"ZendeskSdkTheme.Light\">\n      <item name=\"colorPrimary\">#FF6240</item>\n    </style>\n</resources>\n```\n\nIf 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](https://developer.zendesk.com/embeddables/docs/android/customize_the_look).\n\n## Troubleshooting\n#### Help Center has no content\nFirst 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](https://support.zendesk.com/hc/en-us/articles/203664346-Getting-started-with-Guide-Setting-up#ariaid-title5) in the official Zendesk Support documentation.\n\n#### Help Center says \"Failed to get categories\"\nYou need to call `ZendeskSupport.setupIdentity` before calling help center.\n\n#### Zendesk doesn't open for filing/viewing tickets or showing Help Center\nYou need to call `ZendeskSupport.initialize` before calling any other methods.\n\n#### Custom Fields data doesn't appear in Zendesk agent dashboard\nCustom fields need to be set to both \"Visible\" and \"Editable\" inside the Zendesk admin console.\n\n## Upcoming Features\n* Authenticate using JWT endpoint\n* Theme support (iOS only)\n* Show article by id\n* Hiding \"Contact us\" on iOS from article and list view\n","readmeFilename":"README.md"}