chatwoot/chatwoot-react-native-widget

React Native widget for Chatwoot

---

Chatwoot

Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.

Chatwoot is an open-source, self-hosted customer engagement suite. Chatwoot lets you view and manage your customer data, communicate with them irrespective of which medium they use, and re-engage them based on their profile.

Features

Chatwoot supports the following conversation channels:

• Website: Talk to your customers using our live chat widget and make use of our SDK to identify a user and provide contextual support.
• Facebook: Connect your Facebook pages and start replying to the direct messages to your page.
• Instagram: Connect your Instagram profile and start replying to the direct messages.
• Twitter: Connect your Twitter profiles and reply to direct messages or the tweets where you are mentioned.
• Telegram: Connect your Telegram bot and reply to your customers right from a single dashboard.
• WhatsApp: Connect your WhatsApp business account and manage the conversation in Chatwoot.
• Line: Connect your Line account and manage the conversations in Chatwoot.
• SMS: Connect your Twilio SMS account and reply to the SMS queries in Chatwoot.
• API Channel: Build custom communication channels using our API channel.
• Email: Forward all your email queries to Chatwoot and view it in our integrated dashboard.

And more.

Other features include:

• CRM: Save all your customer information right inside Chatwoot, use contact notes to log emails, phone calls, or meeting notes.
• Custom Attributes: Define custom attribute attributes to store information about a contact or a conversation and extend the product to match your workflow.
• Shared multi-brand inboxes: Manage multiple brands or pages using a shared inbox.
• Private notes: Use @mentions and private notes to communicate internally about a conversation.
• Canned responses (Saved replies): Improve the response rate by adding saved replies for frequently asked questions.
• Conversation Labels: Use conversation labels to create custom workflows.
• Auto assignment: Chatwoot intelligently assigns a ticket to the agents who have access to the inbox depending on their availability and load.
• Conversation continuity: If the user has provided an email address through the chat widget, Chatwoot will send an email to the customer under the agent name so that the user can continue the conversation over the email.
• Multi-lingual support: Chatwoot supports 10+ languages.
• Powerful API & Webhooks: Extend the capability of the software using Chatwoot’s webhooks and APIs.
• Integrations: Chatwoot natively integrates with Slack right now. Manage your conversations in Slack without logging into the dashboard.

Documentation

Detailed documentation is available at chatwoot.com/help-center.

Translation process

The translation process for Chatwoot web and mobile app is managed at https://translate.chatwoot.com using Crowdin. Please read the translation guide for contributing to Chatwoot.

Branching model

We use the git-flow branching model. The base branch is develop. If you are looking for a stable version, please use the master or tags labelled as v1.x.x.

Deployment

Heroku one-click deploy

Deploying Chatwoot to Heroku is a breeze. It's as simple as clicking this button:

Follow this link to understand setting the correct environment variables for the app to work with all the features. There might be breakages if you do not set the relevant environment variables.

DigitalOcean 1-Click Kubernetes deployment

Chatwoot now supports 1-Click deployment to DigitalOcean as a kubernetes app.

Other deployment options

For other supported options, checkout our deployment page.

Security

Looking to report a vulnerability? Please refer our SECURITY.md file.

Community? Questions? Support ?

If you need help or just want to hang out, come, say hi on our Discord server.

Contributors ✨

Thanks goes to all these wonderful people:

Chatwoot © 2017-2024, Chatwoot Inc - Released under the MIT License.

chatwoot-react-native-widget's Issues

No TypeScript support

automatically send welcome message after WebView loaded

Add push notifications to when a new message is sent to the user

When an agent sends the message to the user, send a push notification to the user if the mobile app is in the background or closed.

---

Back Button not working on react native 0.70.6

Each time I click on back button the app show me this error
I tried it with react native 0.66.1 it works just perfect
but on react native 0.70.6 give me this error

I tried to download the latest react native webView and react native modal but no luck i checked the code on the lib and i didn't find any componentWillUnmount or anything related to the error.
just to check I also tried it on a new project also the same result

Please if there is any solution or any idea that I can help.
Thank you <3

duplicated Accounts with the same identifier

each time I used a client info it create a new session with the same user info without getting the old messages and sometimes the
client don't get the responses from the web
but when i test it with the provided dummy data from the readme file everything works just fine.

Publish npm package using github action

Fails because `react-native-modal` uses TypeScript

./node_modules/@chatwoot/react-native-widget/src/App.js 50:4
Module parse failed: Unexpected token (50:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
|   return (
>     <Modal
|       style={styles.modal}
|       coverScreen

Also react-native-webview uses TypeScript. Is there something else I need to add to enable TypeScript in my app?

Issues getting response from dashboard

Describe the bug
So the problem occurs with some of the test accounts, others seem to work fine. When starting a conversation with the 'bugged' accounts the chat wont appear on the dashboard unless you refresh filters or refresh the dashboard page, then when you are trying to answer to the session the user client on the app wont get live-updates on chat state and wont get any messages live, unless you close the chat and reconnect, then the history is updated and user can see the response. Other than that, the 'bugged' accounts dont get updates on the state of the session as it seems, since when youre trying to press the 'doors' icon which closes the chat session, the session ends in dashboard, but the widget state in the app remains unchanged.

Deleting user from the dashboard and trying to identify it from scratch doesnt seems to be of any help.

I will update our old issue on the discord server and provide test accounts information privately to @muhsin-k since we were working prior on resolving a different issue.

All of the user data seem the same comparing working accounts and 'bugged' ones.
We are using chatwoot-react-native-widget 0.0.18, react-native 0.66.5, chatwoot v. 3.3.1

To Reproduce
Open Chat Widget on any platform with the provided credentials, write a message, try responding to the session from the dashboard.
Open Chat Widget on any platform with the provided credentials, write a message, try ending the conversation by pressing 'door' button.

question about hardcoded "en" locale

shouldn't this line https://github.com/chatwoot/chatwoot-react-native-widget/blob/develop/src/WebView.js#L37

let widgetUrl = `${baseUrl}/widget?website_token=${websiteToken}&locale=en`;

be like:

let widgetUrl = `${baseUrl}/widget?website_token=${websiteToken}&locale=${locale}`;

notice I'm using the locale prop now, instead of hardcoded en locale.

Add screenshots

Expo support

No support for expo 49 and React native web view Version 13

No support for expo 49 and React native web view Version 13

Chatwoot buttons in webview don't respond to touches

react-native: v61.5
react-native-webview: v11.13.0

Integrated the chatwoot widget in my react native android app and it works fine while testing in the emulator while using the mouse to click in the widget.

Generated an apk to test on a real device and the buttons in the widget do not respond to touches. Connected a mouse to my real device and the chat widget buttons were responding to the click events.

Video illustrating the issue.

Widget issues with consequent chats

Describe the bug
This problem only happens for Android users (seems like ios is ok for now) and most likely is chrome browser issue (iphone users don‘t get this issue + in admin panel browser detects as chrome).
First time customer can successfully have a chat with agent – widget refreshes, answers are visible.
When the same customer starts second session (or third and later), not at the same time, just new conversation – chat widget buttons stop working correctly.
„Start conversation“ and „exit conversation“ doesn‘t refresh window and customer doesn‘t see responses from webview.
We checked it many times by deleting customer contact and his conversation history from chatwoot. First chat is always good, next one – no.
We are using chatwoot-react-native-widget 0.0.18, react-native 0.66.5
Video recording of a failing chat session on Android
https://github.com/chatwoot/chatwoot/assets/118850916/e9f811e5-5ea6-4749-8c46-a3b850397fd3

To Reproduce
Open Chat Widget on Android phone, type a message, press „Start conversation“ then „exit conversation“ and close the Chat Widget. If customer does this for the first time, the chat session will succeed.
Open Chat Widget on Android phone, using the same customer as in step1, and type a message. Pressing „Start conversation“ will not refresh the Chat Widget and it will look as if nothing has happened.
Please see attached video recording in "describe the bug" section.

Expected behavior
When returning customer on Android phone presses „Start conversation“, Chat Widget refreshes, thus notifying the customer that the message has been sent.

set user info not working

I pass user prop to ChatWootWidget, but it doesn't work. I still have to fill out the email in the form to start the conversation

My code

<ChatWootWidget
      websiteToken={websiteToken}
      locale={locale}
      baseUrl={baseUrl}
      closeModal={() => navigation.goBack()}
      isModalVisible={true}
      user={{
      identifier: userInfo.email,
      name: `${userInfo.name} ${userInfo.firstName}`,
      avatar_url: '',
      email: userInfo.email,
      identifier_hash: 'xGNUWSCzHdMEmDrNm9CNoiGF',
    }}
      customAttributes={customAttributes}
      colorScheme={colorScheme}
      
    />

The widget functions as expected when running in Expo Go but encounters issues when incorporated into an Android build.

I successfully installed the chatwoot-react-native-widget, and everything functions smoothly when I run my app using Expo Go. However, when I create an Android build and test it on a real device, the app crashes. Strangely, my app works perfectly on an Android device as long as I remove the chatwoot package. If I add the package and rebuild the app, it consistently crashes at startup. I'm uncertain about the cause of this issue and would appreciate any insights or solutions.

iOS: "Take a photo or video" crashes the app

If you write a message in the chat and want to select a file, iOS grants you three options:

• Pick photo
• Take photo
• Pick file

Clicking on "Take photo" crashes the app

Need to provide alternate way to persist caching cookie

How can I hide the "rn-close-button" ?

How can I hide the "rn-close-button" ? Would it be supported in the future?

Clicking on attached file like Photo, it opens another page and no way to return back

Add working example

customAttributes is applied to all contacts

When I supply attributes via the customAttributes property on ChatWootWidget, the property values are applied to all my contacts. In other words, all my contacts end up with matching attribute values.

I'm using @chatwoot/react-native-widget version 0.0.14. I'm self-hosted (on AWS), which is version cwctl v2.3.0 alpha build.

Custom modal styles as a prop

Possibility to have custom styling sent to the component modal

i can not respond widget user from chatwoot

I receive all messages in Chatwoot, but when I respond from chatwoot I do not see this message appearing the the widget.

Any idea where to look?