You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+25-12Lines changed: 25 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,8 +18,8 @@ Made by the team at [♠ Calibre](https://calibreapp.com/), your performance com
18
18
3.[Usage](#-usage)
19
19
4.[Supported Providers](#-supported-providers)
20
20
5.[Adding a Provider](#-adding-a-provider)
21
-
6.[Contributing](#-contributing)
22
-
7.[Examples](#-examples)
21
+
6.[Examples](#%EF%B8%8F-examples)
22
+
7.[Contributing](#-contributing)
23
23
8.[Resources](#-resources)
24
24
9.[License](#-license)
25
25
@@ -135,7 +135,7 @@ You can pass the following props to the `LiveChatLoaderProvider` provider:
135
135
Currently there are six supported providers:
136
136
137
137
<details>
138
-
<summary>Help Scout</summary>
138
+
<summaryid="help-scout">Help Scout</summary>
139
139
140
140
To use Help Scout import the `LiveChatLoaderProvider` and set the `provider` prop
141
141
as `helpScout` and the `providerKey` prop as your Beacon API Key.
@@ -170,7 +170,7 @@ Currently the Help Scout component only supports the icon button style.
170
170
</details>
171
171
172
172
<details>
173
-
<summary>Intercom</summary>
173
+
<summaryid="intercom">Intercom</summary>
174
174
175
175
To use Intercom import the `LiveChatLoaderProvider` and set the `provider` prop
176
176
as `intercom` and the `providerKey` prop as your Intercom App ID.
@@ -200,7 +200,7 @@ the `Intercom` component.
200
200
</details>
201
201
202
202
<details>
203
-
<summary>Messenger</summary>
203
+
<summaryid="messenger">Messenger</summary>
204
204
205
205
To use Messenger, import the `LiveChatLoaderProvider` and then set the `provider` prop as `messenger` and the `providerKey` prop as your Facebook Page ID.
206
206
@@ -249,7 +249,7 @@ For a list of options, refer to [Facebook Customer Chat Plugin documentation](ht
249
249
</details>
250
250
251
251
<details>
252
-
<summary>Drift</summary>
252
+
<summaryid="drift">Drift</summary>
253
253
254
254
To use Drift import the `LiveChatLoaderProvider` and set the `provider` prop
255
255
as `drift` and the `providerKey` prop as your Drift App ID.
@@ -276,7 +276,7 @@ You can customise the Drift Messenger by passing the following props to the
276
276
</details>
277
277
278
278
<details>
279
-
<summary>Userlike</summary>
279
+
<summaryid="userlike">Userlike</summary>
280
280
281
281
To use Userlike import the `LiveChatLoaderProvider` and set the `provider` prop
282
282
as `userlike` and the `providerKey` prop as your Userlike Widget secret.
@@ -310,7 +310,7 @@ You can customise the Userlike Widget by passing the following props to the
310
310
</details>
311
311
312
312
<details>
313
-
<summary> Chatwoot</summary>
313
+
<summaryid="chatwoot">Chatwoot</summary>
314
314
315
315
To use Chatwoot import the `LiveChatLoaderProvider` and set the `provider` prop
316
316
as `chatwoot` and the `providerKey` prop as your Chatwoot secret.
@@ -344,6 +344,22 @@ You can customise the Chatwoot Widget by passing the following props to the
344
344
345
345
To add a new live chat provider, follow the steps in [Contributing: Adding a Provider](CONTRIBUTING.md#-adding-a-provider).
346
346
347
+
## 🖥️ Examples
348
+
349
+
The [website](https://github.com/calibreapp/react-live-chat-loader/tree/master/website) directory of this repository includes a [Next.js](https://nextjs.org) app with example implementations of all currently supported providers.
350
+
351
+
For the initial setup of the example app, be sure first to run `npm install` + `npm run build` in the root level of the repository before running `npm install` in the `website` directory.
352
+
353
+
The following scripts in the example app will then be available:
354
+
355
+
-`npm run dev` (run a local server)
356
+
-`npm run build` (run next build)
357
+
-`npm run start` (run next start)
358
+
359
+
Visit [react-live-chat-loader.vercel.app](https://react-live-chat-loader.vercel.app/) for a hosted version of the example app.
360
+
361
+
> 📝 Note that some providers require safe-listed, publicly accessible domains served over HTTPS — a service like [ngrok](https://ngrok.com/) can help achieve this locally.
362
+
347
363
## 🙌 Contributing
348
364
349
365
Happy to hear you’re interested in contributing to React Live Chat Loader! Please find our contribution guidelines [here](CONTRIBUTING.md).
@@ -381,14 +397,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
381
397
382
398
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
383
399
384
-
## 🖥️ Examples
385
-
386
-
-[react-live-chat-loader-example-app](https://github.com/calibreapp/react-live-chat-loader/tree/master/website): example [Next.js](https://nextjs.org) application
387
-
388
400
## 📚 Resources
389
401
390
402
-[How to avoid performance regressions when using live chat tools](https://calibreapp.com/blog/fast-live-chat)
391
403
-[Reducing the Intercom Messenger bundle size by 65%](https://www.intercom.com/blog/reducing-intercom-messenger-bundle-size/)
0 commit comments