-
-
Save hetmann/bda29c335da8bb51f8e2e2d520edf3b6 to your computer and use it in GitHub Desktop.
| import React, { Component } from "react"; | |
| import { WebView } from "react-native-webview"; | |
| import { Button, Modal, View } from "react-native"; | |
| // Author: Hetmann Wilhelm Iohan | |
| // Email: [email protected] | |
| // Web: https://react-ui-kit.com | |
| // YouTube: https://www.youtube.com/react-ui-kit | |
| // This is a basic example showing how to use Zendesk Chat Widget using a webview inside a modal and a html code | |
| // Currently Zendesk Chat SDK doesn't support React-Native so | |
| // this is a standalone example using just a HTML code and JS widget | |
| // How to use | |
| // 1. copy/paste the zendesk_chat_key from resource #3 link | |
| // 2. originWhitelist is set to "about:blank" to open any links outside the WebView Modal | |
| // 3. customize the widget using resource #2 link | |
| // 4. from a web browser and as an agent open resource #1 link to chat with clients from the app | |
| // Resources | |
| // 1. Zendesk Chat Agent url: https://splendchat.zendesk.com/chat/agent | |
| // 2. Zendesk Chat API Key: https://splendchat.zendesk.com/chat/agent?#widget/getting_started | |
| // 3. Zendesk Web Widget: https://developer.zendesk.com/embeddables/docs/widget/core | |
| class ZendeskChat extends Component { | |
| state = { | |
| showChat: false | |
| }; | |
| chatHTML() { | |
| const { title, user, zendesk_chat_key } = this.props; | |
| return ` | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Chat | ${title}</title> | |
| <!-- Start of Zendesk Widget script --> | |
| <script id="ze-snippet" | |
| src="https://static.zdassets.com/ekr/snippet.js?key=${zendesk_chat_key}"> </script> | |
| <!-- End of Zendesk Widget script --> | |
| <style type="text/css">html { background: #000; }</style> | |
| </head> | |
| <body> | |
| <script> | |
| document.addEventListener( 'DOMContentLoaded', function( event ) { | |
| // zE('webWidget', 'prefill', { | |
| // name: { value: "${user.name}", readOnly: true }, | |
| // email: { value: "${user.email}", readOnly: true }, | |
| // phone: { value: "${user.phone}", readOnly: true } | |
| // }); | |
| // zE('webWidget', 'identify', { name: "${user.name}", email: "${user.email}" }); | |
| zE('webWidget', 'open'); | |
| zE('webWidget:on', 'close', () => window.ReactNativeWebView.postMessage("close")); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| `; | |
| } | |
| renderChat() { | |
| const { showChat } = this.state; | |
| const userAgent = "YourApp"; | |
| return ( | |
| <Modal {...this.props} visible={showChat}> | |
| <WebView | |
| useWebKit | |
| style={{ flex: 1 }} | |
| hideKeyboardAccessoryView | |
| source={{ html: this.chatHTML() }} | |
| showsVerticalScrollIndicator={false} | |
| applicationNameForUserAgent={userAgent} | |
| onMessage={({ nativeEvent }) => { | |
| nativeEvent.data === "close" && this.setState({ showChat: false }); | |
| }} | |
| originWhitelist={["about:blank"]} | |
| // shouldStartLoadWithRequestHandler={({ url }) => url.startsWith("about:blank")} | |
| /> | |
| </Modal> | |
| ); | |
| } | |
| render() { | |
| return ( | |
| <View style={{ flex: 1, justifyContent: "center" }}> | |
| <Button title="Chat with us" color="black" onPress={() => this.setState({ showChat: true })} /> | |
| {this.renderChat()} | |
| </View> | |
| ); | |
| } | |
| } | |
| ZendeskChat.defaultProps = { | |
| title: "Test", | |
| user: { | |
| name: "React UI Kit", | |
| email: "[email protected]", | |
| phone: "12345678" | |
| }, | |
| zendesk_chat_key: "" | |
| // get the key from the code snippet found at: | |
| // https://splendchat.zendesk.com/chat/agent?#widget/getting_started | |
| }; | |
| export default ZendeskChat; |
Any way to send a RNmessage when chat opens? Basically to show a loading animation while it appears on the screen.
For those trying to use the webview with static html (as the original example), add baseurl: "https://static.zdassets.com" prop to the WebView and change originWhitelist to [*], so it would be something like this:
<WebView useWebKit style={{ flex: 1 }} hideKeyboardAccessoryView source={{ html: this.chatHTML(), baseUrl: 'https://static.zdassets.com' }} showsVerticalScrollIndicator={false} applicationNameForUserAgent={userAgent} onMessage={({ nativeEvent }) => { nativeEvent.data === 'close' && this.setState({ showChat: false }); }} originWhitelist={['*']} />
Thanks. The baseurl was required to get it to work on an Expo managed app.
The solution worked well for zenDesk messaging, however the event is not fired after the widget is changed to Answer Bot.
Any solutions?
Does anyone know hot to remove the zendesk logo from the chat room? It's a link, and if you tap on it on mobile, you are then stuck on zendesk's marketing site.
@mmckinley8 Can you try this package: https://github.com/leegeunhyeok/react-native-zendesk-messaging ?
@mmckinley8 Can you try this package: https://github.com/leegeunhyeok/react-native-zendesk-messaging ?
Thanks for sending this over - as it turns out my firewall was blocking the zendesk widget.
anyone getting this error when trying to open the chat on the ui?
React Native WebView does not support this platform.
anyone getting this error when trying to open the chat on the ui?
React Native WebView does not support this platform.
Have you tried this package: https://github.com/leegeunhyeok/react-native-zendesk-messaging ?
@BuhorDenysDEV 🥳