{"id":13469647,"url":"https://github.com/calibreapp/react-live-chat-loader","last_synced_at":"2025-05-14T09:10:59.196Z","repository":{"id":38361792,"uuid":"195909955","full_name":"calibreapp/react-live-chat-loader","owner":"calibreapp","description":"Implement a live chat beacon in your React application without performance regressions.","archived":false,"fork":false,"pushed_at":"2025-04-28T04:28:00.000Z","size":10561,"stargazers_count":538,"open_issues_count":14,"forks_count":63,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-28T05:27:44.425Z","etag":null,"topics":["chatwoot","drift","facebook","helpscout","intercom","live-chat","messenger","performance","performance-optimization","react","react-components","reactjs","userlike","web-performance"],"latest_commit_sha":null,"homepage":"https://react-live-chat-loader.now.sh","language":"TypeScript","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/calibreapp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-07-09T01:30:00.000Z","updated_at":"2025-04-28T04:26:50.000Z","dependencies_parsed_at":"2023-11-29T01:34:41.613Z","dependency_job_id":"0bfa7d94-c3f5-4952-ace4-c0c04b8295d1","html_url":"https://github.com/calibreapp/react-live-chat-loader","commit_stats":{"total_commits":396,"total_committers":20,"mean_commits":19.8,"dds":0.5681818181818181,"last_synced_commit":"2c6e2a3cca2d9af45133512a8194a93837e75884"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calibreapp%2Freact-live-chat-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calibreapp%2Freact-live-chat-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calibreapp%2Freact-live-chat-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calibreapp%2Freact-live-chat-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calibreapp","download_url":"https://codeload.github.com/calibreapp/react-live-chat-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"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":["chatwoot","drift","facebook","helpscout","intercom","live-chat","messenger","performance","performance-optimization","react","react-components","reactjs","userlike","web-performance"],"created_at":"2024-07-31T15:01:48.390Z","updated_at":"2025-05-14T09:10:59.176Z","avatar_url":"https://github.com/calibreapp.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Live Chat Loader\n\n[![NPM package](https://img.shields.io/npm/v/react-live-chat-loader?color=informational)](https://www.npmjs.com/package/react-live-chat-loader)\n[![License](https://img.shields.io/github/license/calibreapp/react-live-chat-loader?color=informational)](https://github.com/calibreapp/react-live-chat-loader/blob/main/LICENSE)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-success)](CODE_OF_CONDUCT.md)\n[![Contribution guidelines](https://img.shields.io/badge/PRs-welcome-success)](CONTRIBUTING.md)\n\nAn npm module that allows you to mitigate the negative performance and user\nexperience impact of chat tools. `react-live-chat-loader` shows a fake widget\nuntil 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), [Front](#front), [Chatwoot](#chatwoot), [Hubspot](#hubspot) and [Adobe Dynamic Chat](#adobe-dynamic-chat)\n\nMade by the team at [♠ Calibre](https://calibreapp.com/), your performance companion.\n\n\u003e [!IMPORTANT]  \n\u003e This project is looking for collaborators, maintainers and/or new stewardship. [Read more](https://github.com/calibreapp/react-live-chat-loader/issues/449).\n\nSince introducing `react-live-chat-loader` in 2019 we've welcomed the addition of several chat provider tools, with thanks to numerous contributors. As a group the Calibre team have taken this library as far as we can, and we're looking for someone to take the reigns. If you, your buddies or team can help, please create a new issue to start discussion. 💬\n\n## 🖇️ Table of Contents\n\n1. [How it Works](#-how-it-works)\n2. [Installation](#-installation)\n3. [Usage](#-usage)\n4. [Supported Providers](#-supported-providers)\n5. [Adding a Provider](#-adding-a-provider)\n6. [Examples](#%EF%B8%8F-examples)\n7. [Contributing](#-contributing)\n8. [Resources](#-resources)\n9. [License](#-license)\n\n## 💡 How it Works\n\nChat widgets rely heavily on JavaScript which comes at a cost. Given the\nsignificant impact that comes from the download, parse, compile and execution of\nchat JavaScript, React Live Chat Loader implements a \"fake\", fast loading button\nand waits for one of the following events before loading the actual widget:\n\n- Person hovers over the fake button\n- Person clicks the fake button\n- The page has been idle for a significant amount of time\n\nUnder the hood React Live Chat Loader makes use of `requestIdleCallback` to\ntrack how long the page has been idle for and checks if the person is on a slow\nconnection (using `navigator.connection.effectiveType`) or has data-saver enabled\n(using `navigator.connection.saveData`) to prevent loading.\n\n\u003e ⚠️ **Please note**: Some chat widget providers open automatically based on the people’s interaction from their last session.\n\n## 📥 Installation\n\nTo download react-live-chat-loader run:\n\n```bash\nnpm install --save react-live-chat-loader\n```\n\nOr if you're using yarn, run:\n\n```bash\nyarn add react-live-chat-loader\n```\n\n## 🛠 Usage\n\nTo allow you to trigger a single live chat within your application, React Live\nChat Loader has a `Context Provider` which should be added at the root level of\nyour application.\n\nYou pass your `providerKey` and `provider` to the `LiveChatLoaderProvider`.\n\nFor example, to add a `LiveChatLoaderProvider` for Help Scout you would do the\nfollowing:\n\n```jsx\nimport { LiveChatLoaderProvider } from 'react-live-chat-loader'\n\nexport default class App extends React.Component {\n  /* ... */\n\n  render() {\n    return (\n      \u003cLiveChatLoaderProvider providerKey=\"asdjkasl123123\" provider=\"helpScout\"\u003e\n        /* ... */\n      \u003c/LiveChatLoaderProvider\u003e\n    )\n  }\n}\n```\n\nYou can then include the relevant chat where you would like it to appear.\n\nFor example, for Help Scout you would import the `HelpScout` component and add it\nto your application:\n\n```jsx\nimport { HelpScout } from 'react-live-chat-loader'\n\nexport default class Index extends React.Component {\n  /* ... */\n\n  render() {\n    return (\n      \u003c\u003e\n        /* ... */\n        \u003cHelpScout /\u003e\n      \u003c/\u003e\n    )\n  }\n}\n```\n\nTo display chat from a custom button you can import the `useChat`\nhook which has the current state of the chat and a function to load the\nchat.\n\n```jsx\nimport { useChat } from 'react-live-chat-loader'\n\nexport const LoadChatButton = () =\u003e {\n  const [state, loadChat] = useChat()\n\n  return \u003cbutton onClick={() =\u003e loadChat({ open: true })}\u003eLoad Chat\u003c/button\u003e\n}\n```\n\n### Options\n\nYou can pass the following props to the `LiveChatLoaderProvider` provider:\n\n- `provider`: Choose from `helpScout`, `intercom`, `drift`, `front` or `messenger` ([see below](#-supported-providers))\n- `providerKey`: Provider API Key ([see below](#-supported-providers))\n- `idlePeriod`: How long to wait in ms before loading the provider. Default is\n  `2000`. Set to `0` to never load. This value is used in a `setTimeout` in\n  browsers that don't support `requestIdleCallback`.\n- `beforeInit`: A function to be called after the script has loaded, but before the chat provider has been initialized (optional)\n- `onReady`: A function to be called once the script has been loaded, the chat provider has been initialized and is ready for use (optional)\n\n## 💬 Supported Providers\n\nCurrently there are eight supported providers:\n\n\u003cdetails\u003e\n\u003csummary id=\"help-scout\"\u003eHelp Scout\u003c/summary\u003e\n\nTo use Help Scout import the `LiveChatLoaderProvider` and set the `provider` prop\nas `helpScout` and the `providerKey` prop as your Beacon API Key.\n\nThen import the `HelpScout` component.\n\n```jsx\nimport { LiveChatLoaderProvider, HelpScout } from 'react-live-chat-loader'\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cLiveChatLoaderProvider providerKey=\"asdjkasl123123\" provider=\"helpScout\"\u003e\n        /* ... */\n        \u003cHelpScout /\u003e\n      \u003c/LiveChatLoaderProvider\u003e\n    )\n  }\n}\n```\n\nYou can customise the Help Scout placeholder by passing the following props to the\n`HelpScout` component:\n\n- `color`: The background color of the placeholder\n- `icon`: Choose from `message`, `antenna`, `search`, `question`, `beacon`\n- `zIndex`: Changes the CSS index value of how the placeholder relates to other objects\n- `horizontalPosition`: Choose from `left` or `right`\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n\nCurrently the Help Scout component only supports the icon button style.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"intercom\"\u003eIntercom\u003c/summary\u003e\n\nTo use Intercom import the `LiveChatLoaderProvider` and set the `provider` prop\nas `intercom` and the `providerKey` prop as your Intercom App ID.\n\nThen import the `Intercom` component.\n\n```jsx\nimport { LiveChatLoaderProvider, Intercom } from 'react-live-chat-loader'\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cLiveChatLoaderProvider providerKey=\"asd239\" provider=\"intercom\"\u003e\n        /* ... */\n        \u003cIntercom /\u003e\n      \u003c/LiveChatLoaderProvider\u003e\n    )\n  }\n}\n```\n\nYou can customise the Intercom placeholder icon by passing the following props to the `Intercom` component:\n\n- `color`: The background color of the placeholder widget\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n- `icon`: Override the default Intercom icon, can be any JSX element.\n\n[Messenger Settings](https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#messenger-attributes), User context and Company context settings can be set using `window.intercomSettings`. See the [official Intercom documentation](https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#section-data-attributes) for more details.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"messenger\"\u003eMessenger\u003c/summary\u003e\n\nTo use Messenger, import the `LiveChatLoaderProvider` and then set the `provider` prop as `messenger` and the `providerKey` prop as your Facebook Page ID.\n\nIf you are using other Facebook features like share, you should set the `appID` prop as your Facebook App ID as the Customer Chat SDK includes all the features that Facebook provide.\n\nYou can optionally set the `locale` prop, the default value is `en_US`.\n\nThen import the `Messenger` component.\n\n```jsx\nimport { LiveChatLoaderProvider, Messenger } from 'react-live-chat-loader'\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cLiveChatLoaderProvider\n        provider=\"messenger\"\n        providerKey=\"111222333444555\"\n        appID=\"111222333444555\"\n        locale=\"en_US\"\n      \u003e\n        /* ... */\n        \u003cMessenger /\u003e\n      \u003c/LiveChatLoaderProvider\u003e\n    )\n  }\n}\n```\n\nFor a list of locale option values, refer to [Facebook Localization documentation](https://developers.facebook.com/docs/internationalization).\n\nYou can customise the Messenger widget by passing the following props to the\n`Messenger` component:\n\n- `color`: The theme color of the widget\n- `loggedInGreeting`: The greeting text that will be displayed if the person is currently logged in to Facebook.\n- `loggedOutGreeting`: The greeting text that will be displayed if the person is\n  currently not logged in to Facebook.\n- `greetingDialogDisplay`: Sets how the greeting dialog will be displayed.\n- `greetingDialogDelay`: Sets the number of seconds of delay before the greeting dialog is shown after the plugin is loaded.\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n\nFor a list of options, refer to [Facebook Customer Chat Plugin documentation](https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#customization).\n\n\u003e ⚠️ **Please note**: Facebook Messenger will not load on localhost and you will need to configure your domain through the setup wizard in Facebook for it to load correctly.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"drift\"\u003eDrift\u003c/summary\u003e\n\nTo use Drift import the `LiveChatLoaderProvider` and set the `provider` prop\nas `drift` and the `providerKey` prop as your Drift App ID.\n\nThen import the `Drift` component.\n\n```jsx\nimport { LiveChatLoaderProvider, Drift } from 'react-live-chat-loader'\n\nexport default () =\u003e (\n  \u003cLiveChatLoaderProvider providerKey=\"asdhjg127s1s\" provider=\"drift\"\u003e\n    /* ... */\n    \u003cDrift /\u003e\n  \u003c/LiveChatLoaderProvider\u003e\n)\n```\n\nYou can customise the Drift placeholder by passing the following props to the\n`Drift` component:\n\n- `color`: The background color of the placeholder\n- `icon`: Choose from `A`, `B`, `C`, `D`; you're presented with these preset icons when signing up for Drift, or in the \"Drift Widget \u003e Design \u003e Widget icon\" entry under the \"App Settings\" header on the Drift settings page.\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"userlike\"\u003eUserlike\u003c/summary\u003e\n\nTo use Userlike import the `LiveChatLoaderProvider` and set the `provider` prop\nas `userlike` and the `providerKey` prop as your Userlike Widget secret.\n\nThen import the `Userlike` component.\n\n```jsx\nimport { LiveChatLoaderProvider, Userlike } from 'react-live-chat-loader'\n\nexport default () =\u003e (\n  \u003cLiveChatLoaderProvider\n    providerKey=\"x014e93c288445c0bf6f8a378a0b1af8e6e1125t71634124a88fe63e38hme701\"\n    provider=\"userlike\"\n  \u003e\n    /* ... */\n    \u003cUserlike /\u003e\n  \u003c/LiveChatLoaderProvider\u003e\n)\n```\n\nYou can customise the Userlike placeholder by passing the following props to the\n`Userlike` component:\n\n- `color`: The contrasting color, can be `black` or `white`.\n- `backgroundColor`: The main color\n- `position`: The button position, can be `right` or `left`.\n- `vOffset`: The amount of vertical margin.\n- `hOffset`: The amount of horizontal margin.\n- `style`: The shape style, can be `round` or `square`.\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"chatwoot\"\u003eChatwoot\u003c/summary\u003e\n\nTo use Chatwoot import the `LiveChatLoaderProvider` and set the `provider` prop\nas `chatwoot` and the `providerKey` prop as your Chatwoot secret.\n\nYou can optionally set the `locale` and `baseUrl` props.\n\nThen import the `Chatwoot` component.\n\n```jsx\nimport { LiveChatLoaderProvider, Chatwoot } from 'react-live-chat-loader'\n\nexport default () =\u003e (\n  \u003cLiveChatLoaderProvider\n    providerKey=\"E33wn9ftxMDHZx18AaBkfPvY\"\n    provider=\"chatwoot\"\n  \u003e\n    /* ... */\n    \u003cChatwoot /\u003e\n  \u003c/LiveChatLoaderProvider\u003e\n)\n```\n\nYou can customise the Chatwoot placeholder by passing the following props to the\n`Chatwoot` component:\n\n- `color`: The background color, set to same color value you choose in Chatwoot dashboard.\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"front\"\u003eFront\u003c/summary\u003e\n\nTo use Front import the `LiveChatLoaderProvider` and set the `provider` prop\nas `front` and the `providerKey` prop as your Front Chat `chatId`.\n\nThen import the `Front` component.\n\n```jsx\nimport { LiveChatLoaderProvider, Front } from 'react-live-chat-loader'\n\nexport default () =\u003e {\n  return (\n    \u003cLiveChatLoaderProvider\n      providerKey=\"your-front-chat-chatId\"\n      provider=\"front\"\n    \u003e\n      /* ... */\n      \u003cFront /\u003e\n    \u003c/LiveChatLoaderProvider\u003e\n  )\n}\n```\n\nYou can customise the Front placeholder icon by passing the following props to the `Front` component:\n\n- `color`: The background color of the placeholder widget.\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n\nSee the [official Front documentation](https://help.front.com/) for more details.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"hubspot\"\u003eHubspot\u003c/summary\u003e\n\nTo use Hubspot import the `LiveChatLoaderProvider` and set the `provider` prop\nas `hubSpot` and the `providerKey` prop as your Hubspot API Key.\n\nThen import the `Hubspot` component.\n\n```jsx\nimport { LiveChatLoaderProvider, Hubspot } from 'react-live-chat-loader'\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cLiveChatLoaderProvider providerKey=\"asdjkasl123123\" provider=\"hubSpot\"\u003e\n        /* ... */\n        \u003cHubspot /\u003e\n      \u003c/LiveChatLoaderProvider\u003e\n    )\n  }\n}\n```\n\nYou can customise the Hubspot placeholder by passing the following props to the\n`Hubspot` component:\n\n- `backgroundColor`: The background color of the placeholder\n- `loader`: A react component shown while the Hubspot libraries are loading\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary id=\"adobe-dynamic-chat\"\u003eAdobe Dynamic Chat\u003c/summary\u003e\n\nTo use Adobe Dynamic Chat import the `LiveChatLoaderProvider` and set the `provider` prop\nas `adobeDynamicChat` and the props for your instance as found in your Chatbot settings \u003e Installation \u003e Javascript snippet.\n\nFor example, your script URL will look something like this:\n`\u003cscript src=\"https://assets.adoberesources.net/loader.js?orgId=ABCD1234ABCD1234ABCD123%40AdobeOrg\u0026instanceId=yourinstance\u0026env=prod\u0026geo=va7\"\u003e\u003c/script\u003e`\n\nThen import the `AdobeDynamicChat` component.\n\n```jsx\nimport { LiveChatLoaderProvider, AdobeDynamicChat } from 'react-live-chat-loader'\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cLiveChatLoaderProvider \n        providerKey=\"ABCD1234ABCD1234ABCD123%40AdobeOrg\"  // Use \"orgId\" query parameter found in script URL\n        instanceId=\"yourinstance\"                   // Use \"instanceId\" query parameter found in script URL\n        env=\"prod\"                                  // Use \"env\" query parameter found in script URL\n        geo=\"va7\"                                   // Use \"geo\" query parameter found in script URL\n        provider=\"adobeDynamicChat\"\n      \u003e\n        /* ... */\n        \u003cAdobeDynamicChat /\u003e\n      \u003c/LiveChatLoaderProvider\u003e\n    )\n  }\n}\n```\n\nYou can customise the Adobe Dynamic Chat placeholder icon by passing the following props to the `AdobeDynamicChat` component:\n\n- `color`: The background color of the placeholder widget\n- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`\n- `icon`: Override the default Adobe Dynamic Chat icon, can be any JSX element.\n\n\u003c/details\u003e\n\n## ➕ Adding a Provider\n\nTo add a new live chat provider, follow the steps in [Contributing: Adding a Provider](CONTRIBUTING.md#-adding-a-provider).\n\n## 🖥️ Examples\n\nThe [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.\n\nFor 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.\n\nThe following scripts in the example app will then be available:\n\n- `npm run dev` (run a local server)\n- `npm run build` (run next build)\n- `npm run start` (run next start)\n\nVisit [react-live-chat-loader.vercel.app](https://react-live-chat-loader.vercel.app/) for a hosted version of the example app.\n\n\u003e 📝  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.\n\n## 🙌 Contributing\n\nHappy to hear you’re interested in contributing to React Live Chat Loader! Please find our contribution guidelines [here](CONTRIBUTING.md).\n\n### Past Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/FateXRebirth\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/11188616?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKevin Peng\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=FateXRebirth\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://ash.ms\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/49600?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAsh Kyd\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=AshKyd\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://reiner.design\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/8116716?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJeff Reiner\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=mirshko\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=mirshko\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://joanmira.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1721288?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJoan Mira\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=gazpachu\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/elmoeleven\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1560770?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNathan Collman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=elmoeleven\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jaska120\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/23189620?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJaakko Mustalahti\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=jaska120\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://motiko.me\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/875618?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMoti Korets\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=motiko\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/stramel\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/855184?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMichael Stramel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=stramel\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/myleslinder\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/4735451?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMyles Linder\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=myleslinder\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/lauGutierrezz\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/52488696?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLaura Gutiérrez López de la Franca\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=lauGutierrezz\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/38ri581oq480\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/64654807?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKirill Vakalov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=38ri581oq480\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://luisrudge.net\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/941075?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuís Rudge\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=luisrudge\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/enjoyjeremy-bc\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/260613?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJeremy Adam\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/calibreapp/react-live-chat-loader/commits?author=enjoyjeremy-bc\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## 📚 Resources\n\n- [How to avoid performance regressions when using live chat tools](https://calibreapp.com/blog/fast-live-chat)\n- [Reducing the Intercom Messenger bundle size by 65%](https://www.intercom.com/blog/reducing-intercom-messenger-bundle-size/)\n\n## 💼 License\n\nThis project is [MIT licensed](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalibreapp%2Freact-live-chat-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalibreapp%2Freact-live-chat-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalibreapp%2Freact-live-chat-loader/lists"}