|
8 | 8 |
|
9 | 9 | An npm module that allows you to mitigate the negative performance and user |
10 | 10 | experience impact of chat tools. `react-live-chat-loader` shows a fake widget |
11 | | -until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom), [Help Scout](#help-scout), [Drift](#drift), [Messenger](#messenger) and [Userlike](#userlike). |
| 11 | +until the page has become idle or users are ready to interact with chat. Currently works with [Intercom](#intercom), [Help Scout](#help-scout), [Drift](#drift), [Messenger](#messenger), [Userlike](#userlike) and [Chatwoot](#chatwoot). |
12 | 12 |
|
13 | 13 | Made by the team at [♠ Calibre](https://calibreapp.com/), your performance companion. |
14 | 14 |
|
15 | | -### Table of Contents |
| 15 | +## Table of Contents |
16 | 16 |
|
17 | | -1. [How it works](#how-it-works) |
| 17 | +1. [How it Works](#how-it-works) |
18 | 18 | 2. [Installation](#installation) |
19 | 19 | 3. [Usage](#usage) |
20 | 20 | 4. [Supported Providers](#supported-providers) |
21 | | -5. [Adding a provider](#adding-a-provider) |
| 21 | +5. [Adding a Provider](#adding-a-provider) |
22 | 22 | 6. [Examples](#examples) |
23 | 23 |
|
24 | | ---- |
25 | | - |
26 | | -## How it works |
| 24 | +## How it Works |
27 | 25 |
|
28 | 26 | Chat widgets rely heavily on JavaScript which comes at a cost. Given the |
29 | 27 | significant impact that comes from the download, parse, compile and execution of |
30 | 28 | chat JavaScript, React Live Chat Loader implements a "fake", fast loading button |
31 | 29 | and waits for one of the following events before loading the actual widget: |
32 | 30 |
|
33 | | -- User hovers over the fake button |
34 | | -- User clicks the fake button |
| 31 | +- Person hovers over the fake button |
| 32 | +- Person clicks the fake button |
35 | 33 | - The page has been idle for a significant amount of time |
36 | 34 |
|
37 | 35 | Under the hood React Live Chat Loader makes use of `requestIdleCallback` to |
38 | | -track how long the page has been idle for and checks if the user is on a slow |
| 36 | +track how long the page has been idle for and checks if the person is on a slow |
39 | 37 | connection (using `navigator.connection.effectiveType`) or has data-saver enabled |
40 | 38 | (using `navigator.connection.saveData`) to prevent loading. |
41 | 39 |
|
42 | | -Please note: Some chat widget providers open automatically based on the users |
| 40 | +:warning: **Please note:** Some chat widget providers open automatically based on the people’s |
43 | 41 | interaction from their last session. |
44 | 42 |
|
45 | 43 | ## Installation |
@@ -235,15 +233,15 @@ You can customise the Messenger widget by passing the following props to the |
235 | 233 | `Messenger` component: |
236 | 234 |
|
237 | 235 | - `color`: The theme color of the widget |
238 | | -- `loggedInGreeting`: The greeting text that will be displayed if the user is currently logged in to Facebook. |
239 | | -- `loggedOutGreeting`: The greeting text that will be displayed if the user is |
| 236 | +- `loggedInGreeting`: The greeting text that will be displayed if the person is currently logged in to Facebook. |
| 237 | +- `loggedOutGreeting`: The greeting text that will be displayed if the person is |
240 | 238 | currently not logged in to Facebook. |
241 | 239 | - `greetingDialogDisplay`: Sets how the greeting dialog will be displayed. |
242 | 240 | - `greetingDialogDelay`: Sets the number of seconds of delay before the greeting dialog is shown after the plugin is loaded. |
243 | 241 |
|
244 | 242 | For a list of options, refer to [Facebook Customer Chat Plugin documentation](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#customization). |
245 | 243 |
|
246 | | -**Please note**: Facebook Messenger will not load on localhost and you will need |
| 244 | +:warning: **Please note**: Facebook Messenger will not load on localhost and you will need |
247 | 245 | to configure your domain through the setup wizard in Facebook for it to load |
248 | 246 | correctly. |
249 | 247 |
|
@@ -461,7 +459,7 @@ Add your new provider to this README under [Supported Providers](#supported-prov |
461 | 459 |
|
462 | 460 | Add a new page to `website/pages/` which showcases the provider. If you don't want to include your `providerKey` leave this blank and the maintainers will set one up. |
463 | 461 |
|
464 | | -The new provider page can be tested locally by creating a distribution version of the package and referencing this from the `wesbite`. |
| 462 | +The new provider page can be tested locally by creating a distribution version of the package and referencing this from the `website`. |
465 | 463 |
|
466 | 464 | Unfortunately if you try to include the package locally from source you'll most likely run into a [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) error. |
467 | 465 |
|
|
0 commit comments