Merge pull request #94 from myleslinder/feat/lifecycle-callbacks

Add callbacks for before chat provider init and after script ready

Author: Michael Dijkstra

README.md

@@ -1,10 +1,12 @@
 # React Live Chat Loader
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md) 
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)
 
 An npm module that allows you to mitigate the negative performance and user
 experience impact of chat tools. `react-live-chat-loader` shows a fake widget
@@ -22,7 +24,7 @@ Made by the team at [♠ Calibre](https://calibreapp.com/), your performance com
 6. [Contributing](#-contributing)
 7. [Examples](#-examples)
 
-## 💡 How it Works 
+## 💡 How it Works
 
 Chat widgets rely heavily on JavaScript which comes at a cost. Given the
 significant impact that comes from the download, parse, compile and execution of
@@ -40,7 +42,7 @@ connection (using `navigator.connection.effectiveType`) or has data-saver enable
 
 > ⚠️ **Please note**: Some chat widget providers open automatically based on the people’s interaction from their last session.
 
-## 📥 Installation 
+## 📥 Installation
 
 To download react-live-chat-loader run:
 
@@ -126,6 +128,8 @@ You can pass the following props to the `LiveChatLoaderProvider` provider:
 - `idlePeriod`: How long to wait in ms before loading the provider. Default is
   `2000`. Set to `0` to never load. This value is used in a `setTimeout` in
   browsers that don't support `requestIdleCallback`.
+- `beforeInit`: A function to be called after the script has loaded, but before the chat provider has been initialized (optional)
+- `onReady`: A function to be called once the script has been loaded, the chat provider has been initialized and is ready for use (optional)
 
 ## 💬 Supported Providers
 
@@ -338,9 +342,11 @@ You can customise the Chatwoot Widget by passing the following props to the
 </details>
 
 ## ➕ Adding a Provider
+
 To add a new live chat provider, follow the steps in [Contributing: Adding a Provider](CONTRIBUTING.md#-adding-a-provider).
 
 ## 🙌 Contributing
+
 Happy to hear you’re interested in contributing to React Live Chat Loader! Please find our contribution guidelines [here](CONTRIBUTING.md).
 
 ## 🖥️ Examples
@@ -352,7 +358,7 @@ Happy to hear you’re interested in contributing to React Live Chat Loader! Ple
 - [How to avoid performance regressions when using live chat tools](https://calibreapp.com/blog/fast-live-chat)
 - [Reducing the Intercom Messenger bundle size by 65%](https://www.intercom.com/blog/reducing-intercom-messenger-bundle-size/)
 
-## ✨ Contributors 
+## ✨ Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 

src/components/LiveChatLoaderProvider.tsx

@@ -3,20 +3,24 @@ import * as Providers from '../providers'
 import { State, Provider } from '../types'
 import { LiveChatLoaderContext } from '../context'
 
-export const LiveChatLoaderProvider = ({
-  provider,
-  children,
-  idlePeriod = 5000,
-  baseUrl,
-  ...props
-}: {
+interface LiveChatLoaderProps {
   provider: Provider
   children: JSX.Element
   idlePeriod?: number
   providerKey: string
   appID?: string
   baseUrl?: string
-}): JSX.Element | null => {
+  beforeInit?: () => void
+  onReady?: () => void
+}
+
+export const LiveChatLoaderProvider = ({
+  provider,
+  children,
+  idlePeriod = 5000,
+  baseUrl,
+  ...props
+}: LiveChatLoaderProps): JSX.Element | null => {
   const [state, setState] = useState<State>('initial')
   const value = {
     provider,

src/context.ts

@@ -11,6 +11,8 @@ interface Context {
   locale?: string
   idlePeriod?: number
   baseUrl?: string
+  beforeInit?: () => void
+  onReady?: () => void
 }
 
 export const LiveChatLoaderContext = createContext<Context>({} as Context)

src/hooks/useChat.ts

@@ -27,7 +27,9 @@ const useChat = (
     setState,
     appID,
     locale,
-    baseUrl
+    baseUrl,
+    beforeInit,
+    onReady
   } = useContext(LiveChatLoaderContext)
 
   useEffect(() => {
@@ -84,7 +86,15 @@ const useChat = (
         return
       }
 
-      chatProvider.load({ providerKey, setState, appID, locale, baseUrl })
+      chatProvider.load({
+        providerKey,
+        setState,
+        appID,
+        locale,
+        baseUrl,
+        beforeInit,
+        onReady
+      })
 
       if (open) {
         chatProvider.open()

src/providers/chatwoot.ts

@@ -39,15 +39,25 @@ const load = ({
   providerKey,
   locale = 'en',
   setState,
-  baseUrl = domain
+  baseUrl = domain,
+  beforeInit = () => undefined,
+  onReady = () => undefined
 }: {
   providerKey: string
   locale?: string
   setState: (state: State) => void
   baseUrl?: string
+  beforeInit?: () => void
+  onReady?: () => void
 }): void => {
   const loaded = loadScript(function() {
-    setTimeout(() => setState('complete'), 1000)
+    beforeInit()
+
+    setTimeout(() => {
+      setState('complete')
+      onReady()
+    }, 1000)
+
     window.chatwootSDK.run({
       websiteToken: providerKey,
       baseUrl,

src/providers/drift.ts

@@ -69,19 +69,25 @@ const loadScript = (): boolean => {
 
 const load = ({
   providerKey,
-  setState
+  setState,
+  beforeInit = () => undefined,
+  onReady = () => undefined
 }: {
   providerKey: string
   setState: (state: State) => void
+  beforeInit?: () => void
+  onReady?: () => void
 }): boolean => {
   const loaded = loadScript()
 
   // Continue as long as drift hasn’t already been initialised.
   if (loaded) {
+    beforeInit()
     window.drift.load(providerKey)
     window.drift.SNIPPET_VERSION = '0.3.1'
     window.drift.on('ready', () => {
       setState('complete')
+      onReady()
     })
   }
 

src/providers/helpScout.ts

@@ -39,19 +39,27 @@ const loadScript = (): boolean => {
 
 const load = ({
   providerKey,
-  setState
+  setState,
+  beforeInit = () => undefined,
+  onReady = () => undefined
 }: {
   providerKey: string
   setState: (state: State) => void
+  beforeInit?: () => void
+  onReady?: () => void
 }): boolean => {
   const loaded = loadScript()
 
   // Continue as long as helpscout hasn’t already been initialised.
   if (loaded) {
+    beforeInit()
     window.Beacon('init', providerKey)
     window.Beacon('once', 'ready', () =>
       // Allow helpscout to complete loading before removing fake widget
-      setTimeout(() => setState('complete'), 2000)
+      setTimeout(() => {
+        setState('complete')
+        onReady()
+      }, 2000)
     )
   }
 

src/providers/intercom.ts

@@ -47,20 +47,29 @@ const loadScript = (appId: string): boolean => {
 
 const load = ({
   providerKey,
-  setState
+  setState,
+  beforeInit = () => undefined,
+  onReady = () => undefined
 }: {
   providerKey: string
   setState: (state: State) => void
+  beforeInit?: () => void
+  onReady?: () => void
 }): boolean => {
   const loaded = loadScript(providerKey)
 
   // Continue as long as userlike hasn’t already been initialised.
   if (loaded) {
+    beforeInit()
     window.Intercom('boot', { app_id: providerKey })
     waitForLoad(
       () => window.Intercom.booted,
       // Allow intercom to complete loading before removing fake widget
-      () => setTimeout(() => setState('complete'), 2000)
+      () =>
+        setTimeout(() => {
+          setState('complete')
+          onReady()
+        }, 2000)
     )
   }
 

src/providers/messenger.ts

@@ -36,15 +36,20 @@ const loadScript = (locale: string): boolean => {
 const load = ({
   appID,
   locale = 'en_US',
-  setState
+  setState,
+  beforeInit = () => undefined,
+  onReady = () => undefined
 }: {
   appID?: string
   locale?: string
   setState: (state: State) => void
+  beforeInit?: () => void
+  onReady?: () => void
 }): boolean => {
   const loaded = loadScript(locale)
   // Continue as long as messenger hasn’t already been initialised.
   if (loaded) {
+    beforeInit()
     window.fbAsyncInit = function() {
       window.FB.init(
         Object.assign(
@@ -58,7 +63,10 @@ const load = ({
       )
       window.FB.Event.subscribe('customerchat.load', () =>
         // Allow messenger to complete loading before removing fake widget
-        setTimeout(() => setState('complete'), 3000)
+        setTimeout(() => {
+          setState('complete')
+          onReady()
+        }, 3000)
       )
     }
   }

src/providers/userlike.ts

@@ -35,18 +35,27 @@ const loadScript = (providerKey: string): boolean => {
 
 const load = ({
   providerKey,
-  setState
+  setState,
+  beforeInit = () => undefined,
+  onReady = () => undefined
 }: {
   providerKey: string
   setState: (state: State) => void
+  beforeInit?: () => void
+  onReady?: () => void
 }): boolean => {
   const loaded = loadScript(providerKey)
   // Continue as long as userlike hasn’t already been initialised.
   if (loaded) {
+    beforeInit()
     waitForLoad(
       () => !!window.userlike,
       // Allow userlike to complete loading before removing fake widget
-      () => setTimeout(() => setState('complete'), 2000)
+      () =>
+        setTimeout(() => {
+          setState('complete')
+          onReady()
+        }, 2000)
     )
   }