{"id":19055761,"url":"https://github.com/taskrabbit/react-native-zendesk-chat","last_synced_at":"2025-04-04T20:11:03.321Z","repository":{"id":4870311,"uuid":"50972475","full_name":"taskrabbit/react-native-zendesk-chat","owner":"taskrabbit","description":"React Native Wrapper around Zendesk Chat v2","archived":false,"fork":false,"pushed_at":"2023-10-27T04:27:42.000Z","size":242,"stargazers_count":129,"open_issues_count":56,"forks_count":128,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-03-28T19:07:47.359Z","etag":null,"topics":["chat","react-native","support","zendesk"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taskrabbit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-03T03:55:11.000Z","updated_at":"2025-03-07T06:36:18.000Z","dependencies_parsed_at":"2022-08-06T18:00:39.301Z","dependency_job_id":"fdd35622-d35c-44d6-88b2-bbb2d4dadc70","html_url":"https://github.com/taskrabbit/react-native-zendesk-chat","commit_stats":{"total_commits":107,"total_committers":24,"mean_commits":4.458333333333333,"dds":0.5420560747663552,"last_synced_commit":"87c1148ac519abc04e63dc8eb57449c1e1264d57"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-zendesk-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-zendesk-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-zendesk-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taskrabbit%2Freact-native-zendesk-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taskrabbit","download_url":"https://codeload.github.com/taskrabbit/react-native-zendesk-chat/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242678,"owners_count":20907134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","react-native","support","zendesk"],"created_at":"2024-11-08T23:46:54.857Z","updated_at":"2025-04-04T20:11:03.292Z","avatar_url":"https://github.com/taskrabbit.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-zendesk-chat\n\nSimple module that supports displaying Zendesk Chat within a React Native Application.\n\nThis library assumes you're familiar with Zendesk's Official Documentation: [iOS](https://developer.zendesk.com/embeddables/docs/chat-sdk-v-2-for-ios/introduction) and [Android](https://developer.zendesk.com/embeddables/docs/chat-sdk-v-2-for-android/introduction).\n\n## VERSIONS\n\n- For **Zendesk Chat v2** use version \u003e= 0.4.0 (this requires RN 0.59 or later!)\n- For RN version \u003e= 0.59 use version \u003e= 0.3.0 (Zendesk Chat v1)\n- For RN version \u003c 0.59 use version \u003c= 0.2.2 (Zendesk Chat v1)\n\n## Known Issues\n\n## Getting Started\n\nWith npm:\n\n`npm install react-native-zendesk-chat --save`\n\nor with yarn:\n\n`yarn add react-native-zendesk-chat`\n\n### QuickStart \u0026 Usage\n\n1. Setup Native Dependencies\u003cbr/\u003e **iOS** If you're on react-native \u003e= 0.60 and you have Cocoapods setup, then you just need to:\n\n```bash\n$ yarn install # and see if there are any errors\n$ (cd ios; pod install) # and see if there are any errors\n # -- you may need to do `pod install --repo-update`\n```\n\nIf you're on older react-native versions, please see the [Advanced Setup](#advanced-setup) section below\n\n**Android** If you're on react-native \u003e= 0.60, Android should autodetect this dependency. If you're on 0.59, you may need to call `react-native link`\n\n2. Call the JS Initializer:\n\n```javascript\nimport ZendeskChat from \"react-native-zendesk-chat\";\n\n// Once in your application:\nZendeskChat.init(\"YOUR_ZENDESK_ACCOUNT_KEY\");\n\n// Optionally specify the appId provided by Zendesk\nZendeskChat.init(\"YOUR_ZENDESK_ACCOUNT_KEY\", \"APP_ID_PROVIDED_BY_ZENDESK\");\n```\n\n3. Show the Chat UI\n\n```javascript\n// On button press, when you want to show chat:\nZendeskChat.startChat({\n\tname: user.full_name,\n\temail: user.email,\n\tphone: user.mobile_phone,\n\ttags: [\"tag1\", \"tag2\"],\n\tdepartment: \"Your department\",\n\t// The behaviorFlags are optional, and each default to 'true' if omitted\n\tbehaviorFlags: {\n\t\tshowAgentAvailability: true,\n\t\tshowChatTranscriptPrompt: true,\n\t\tshowPreChatForm: true,\n\t\tshowOfflineForm: true,\n\t},\n\t// The preChatFormOptions are optional \u0026 each defaults to \"optional\" if omitted\n\tpreChatFormOptions: {\n\t\tname: !user.full_name ? \"required\" : \"optional\",\n\t\temail: \"optional\",\n\t\tphone: \"optional\",\n\t\tdepartment: \"required\",\n\t},\n\tlocalizedDismissButtonTitle: \"Dismiss\",\n});\n```\n\n\n### Obtaining the `YOUR_ZENDESK_ACCOUNT_KEY`\nTo optain your zendesk account key see the instructions in [Initializing the SDK](https://api.zopim.com/web-sdk/#initializing-the-sdk) in the Zendesk SDK.\n\nTo get your account key, follow these steps:\n\n1. In the Zendesk Chat Dashboard, click on your profile in the upper right corner and click on the 'Check Connection' option:\n![status_dropdown](https://api.zopim.com/web-sdk/images/status_dropdown.png)\n1. In the dialog, copy the account key value\n![account_key](https://api.zopim.com/web-sdk/images/account_key.png)\n\n\n### Styling\n\nChanging the UI Styling is mostly achieved through native techniques.\n\nOn Android, this is the [official documentation](https://developer.zendesk.com/embeddables/docs/android-unified-sdk/customize_the_look#how-theming-works) -- and an example might be adding these [3 lines to your app theme](https://github.com/zendesk/sdk_demo_app_android/blob/ae4c551f78911e983b0aac06967628f46be15e54/app/src/main/res/values/styles.xml#L5-L7)\n\nWhile on iOS, the options are more minimal -- check the [official doc page](https://developer.zendesk.com/embeddables/docs/chat-sdk-v-2-for-ios/customize_the_look#styling-the-chat-screen)\n\n### Migrating\n\n_From react-native-zendesk-chat \u003c= 0.3.0_\n\nTo migrate from previous versions of the library, you should probably remove all integration steps you applied, and start over from the [Quick Start](#quickstart--usage).\n\nThe JS API calls are very similar, with mostly additive changes.\n\n### Advanced Setup\n\nAdvanced users, or users running on older versions of react-native may want to initialize things in native.\n\n#### iOS: Manually Setting up with Cocoapods\n\nIf you're on iOS \u003c 0.60, you may need to manually install the cocoapod:\n\nAdd a reference to your Podfile:\n\n```Podfile\npod 'RNZendeskChat', :git =\u003e 'https://github.com/taskrabbit/react-native-zendesk-chat.git'\n```\n\nthen run pod install: `(cd ios; pod install)`\n\nor manually:\n\nIn Xcode, drag and drop `node_modules/react-native-zendesk-chat/RNZendeskChat.m` and `node_modules/react-native-zendesk-chat/RNZendeskChat.h` into your project.\n\n#### iOS: Configure `ZDCChat` in `AppDelegate.m`:\n\n```objective-c\n#import \u003cZDCChat/ZDCChat.h\u003e\n\n// ...\n\n// Inside the appropriate appDidFinishLaunching method\n[ZDCChat initializeWithAccountKey:@\"YOUR_ZENDESK_ACCOUNT_KEY\" appId:\"YOUR_ZENDESK_APP_ID\"];\n\n// And access other interesting APIs\n```\n\n#### Android: Manual Setup \u0026 Configuration\n\nIf you're on react-native \u003c 0.60, you should be able to call `react-native link`.\n\nIf this doesn't work, then you may need to do a complete manual install as follows:\n\n1. Open up `android/app/main/java/[...]/MainApplication.java`\n\n- Add `import com.taskrabbit.zendesk.*;` to the imports at the top of the file\n- Add `new RNZendeskChatPackage(this)` to the list returned by the `getPackages()` method\n\n2. Append the following lines to `android/settings.gradle`:\n\n```gradle\ninclude ':react-native-zendesk-chat'\nproject(':react-native-zendesk-chat').projectDir = new File(rootProject.projectDir,\t'../node_modules/react-native-zendesk-chat/android')\n```\n\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n\nFor RN \u003e= 0.60:\n\n```gradle\ndependencies {\n\t//\n  api group: 'com.zendesk', name: 'chat', version: '2.2.0'\n  api group: 'com.zendesk', name: 'messaging', version: '4.3.1'\n```\nalso in project build.gradle \n\n Add ```gradle\n  maven { url 'https://zendesk.jfrog.io/zendesk/repo' }```\n     \nFor RN \u003c 0.60:\n\n```gradle\ncompile project(':react-native-zendesk-chat')\n```\n\n4. Configure `Chat` in `android/app/main/java/[...]/MainActivity.java`\n\n```java\n// Note: there is a JS method to do this -- prefer doing that! -- This is for advanced users only.\n\n// Call this once in your Activity's bootup lifecycle\nChat.INSTANCE.init(mReactContext, key, appId);\n```\n\n## Contributing\n\n- Pull Requests are encouraged!\n- Be respectful!\n- The trunk branch of this repo is called `main`\n\n## License\n\nReact Native Zendesk Chat is MIT licensed, as found in the [LICENSE](https://github.com/taskrabbit/react-native-zendesk-chat/LICENSE) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaskrabbit%2Freact-native-zendesk-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaskrabbit%2Freact-native-zendesk-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaskrabbit%2Freact-native-zendesk-chat/lists"}