Merge pull request #72 from motiko/chatwoot

Chatwoot

Author: Michael Dijkstra

README.md

@@ -1,7 +1,9 @@
 # React Live Chat Loader
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 An npm module that allows you to mitigate the negative performance and user
@@ -126,7 +128,7 @@ You can pass the following props to the `LiveChatLoaderProvider` provider:
 
 ## Supported Providers
 
-Currently there are five supported providers:
+Currently there are six supported providers:
 
 <details>
 <summary>Help Scout</summary>
@@ -305,6 +307,35 @@ You can customise the Userlike Widget by passing the following props to the
 
 </details>
 
+<details>
+<summary> Chatwoot </summary>
+
+To use Chatwoot import the `LiveChatLoaderProvider` and set the `provider` prop
+as `chatwoot` and the `providerKey` prop as your Chatwoot secret.
+
+Then import the `Chatwoot` component.
+
+```jsx
+import { LiveChatLoaderProvider, Chatwoot } from 'react-live-chat-loader'
+
+export default () => (
+  <LiveChatLoaderProvider
+    providerKey="E33wn9ftxMDHZx18AaBkfPvY"
+    provider="chatwoot"
+  >
+    /* ... */
+    <Chatwoot />
+  </LiveChatLoaderProvider>
+)
+```
+
+You can customise the Chatwoot Widget by passing the following props to the
+`Chatwoot` component:
+
+- `color`: The background color, set to same color value you choose in Chatwoot dashboard.
+
+</details>
+
 ## Adding a provider
 
 To contribute a new provider, follow these steps:

src/components/Chatwoot/index.tsx

@@ -0,0 +1,60 @@
+import useChat from 'hooks/useChat'
+import React, { CSSProperties } from 'react'
+
+const styles: {
+  button: CSSProperties
+  img: CSSProperties
+} = {
+  button: {
+    borderRadius: '100px',
+    bottom: '20px',
+    right: '20px',
+    boxShadow: '0 8px 24px rgb(0 0 0 / 16%)',
+    cursor: 'pointer',
+    height: '64px',
+    position: 'fixed',
+    width: '64px',
+    zIndex: 2147483001,
+    userSelect: 'none'
+  },
+  img: {
+    height: '24px',
+    margin: '20px',
+    width: '24px'
+  }
+}
+
+interface Props {
+  color?: string
+}
+
+const Provider = ({ color }: Props): JSX.Element | null => {
+  const [state, loadChat] = useChat({ loadWhenIdle: true })
+
+  if (state === 'complete') return null
+
+  return (
+    <div>
+      <div
+        onClick={() => loadChat({ open: true })}
+        onMouseEnter={() => loadChat({ open: false })}
+        style={{
+          ...styles.button,
+          backgroundColor: color
+        }}
+      >
+        <img
+          style={styles.img}
+          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg=="
+          alt="bubble-icon"
+        />
+      </div>
+    </div>
+  )
+}
+
+Provider.defaultProps = {
+  color: '#1f93ff'
+}
+
+export default Provider

src/components/LiveChatLoaderProvider.tsx

@@ -7,20 +7,23 @@ export const LiveChatLoaderProvider = ({
   provider,
   children,
   idlePeriod = 5000,
+  baseUrl,
   ...props
 }: {
   provider: Provider
   children: JSX.Element
   idlePeriod?: number
   providerKey: string
   appID?: string
+  baseUrl?: string
 }): JSX.Element | null => {
   const [state, setState] = useState<State>('initial')
   const value = {
     provider,
     idlePeriod,
     state,
     setState,
+    baseUrl,
     ...props
   }
 
@@ -36,7 +39,11 @@ export const LiveChatLoaderProvider = ({
 
   return (
     <LiveChatLoaderContext.Provider value={value}>
-      <link href={chatProvider.domain} rel="preconnect" crossOrigin="" />
+      <link
+        href={baseUrl || chatProvider.domain}
+        rel="preconnect"
+        crossOrigin=""
+      />
       {children}
     </LiveChatLoaderContext.Provider>
   )

src/context.ts

@@ -9,6 +9,7 @@ interface Context {
   appID?: string
   locale?: string
   idlePeriod?: number
+  baseUrl?: string
 }
 
 export const LiveChatLoaderContext = createContext<Context>({} as Context)

src/hooks/useChat.ts

@@ -27,7 +27,8 @@ const useChat = (
     state,
     setState,
     appID,
-    locale
+    locale,
+    baseUrl
   } = useContext(LiveChatLoaderContext)
 
   useEffect(() => {
@@ -90,7 +91,7 @@ const useChat = (
 
       if (!scriptLoaded) {
         scriptLoaded = true
-        chatProvider.load({ providerKey, setState, appID, locale })
+        chatProvider.load({ providerKey, setState, appID, locale, baseUrl })
       }
 
       if (open) {

src/index.ts

@@ -5,6 +5,7 @@ import { default as HelpScout } from './components/HelpScout'
 import { default as Intercom } from './components/Intercom'
 import { default as Messenger } from './components/Messenger'
 import { default as Userlike } from './components/Userlike'
+import { default as Chatwoot} from './components/Chatwoot'
 import { default as LiveChatLoaderProvider } from './components/LiveChatLoaderProvider'
 
 export {
@@ -15,5 +16,6 @@ export {
   Intercom,
   Messenger,
   Userlike,
+  Chatwoot,
   LiveChatLoaderProvider
 }

src/providers/chatwoot.ts

@@ -0,0 +1,66 @@
+import { State } from 'types'
+
+const domain = 'https://app.chatwoot.com'
+
+declare global {
+  interface Window {
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
+    chatwootSettings: any
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
+    $chatwoot: any
+    chatwootSDK: {
+      run: (options: {
+        websiteToken: string
+        baseUrl: string
+        locale?: string
+        type?: 'standard' | 'expanded_bubble'
+        position?: 'left' | 'right'
+      }) => void
+    }
+  }
+}
+
+/* eslint-disable */
+const loadScript = (onload: () => void, baseUrl: string): void => {
+  if (window.$chatwoot) return
+  ;(function(d, t) {
+    var script: HTMLScriptElement = d.createElement('script')
+    var fisrtScript = d.getElementsByTagName('script')[0]
+    script.src = baseUrl + '/packs/js/sdk.js'
+    fisrtScript.parentNode?.insertBefore(script, fisrtScript)
+    script.onload = onload
+  })(document)
+}
+/* eslint-enable */
+
+const load = ({
+  providerKey,
+  locale = 'en',
+  setState,
+  baseUrl = domain
+}: {
+  providerKey: string
+  locale?: string
+  setState: (state: State) => void
+  baseUrl?: string
+}): void => {
+  loadScript(function() {
+    setTimeout(() => setState('complete'), 1000)
+    window.chatwootSDK.run({
+      websiteToken: providerKey,
+      baseUrl,
+      locale
+    })
+  }, baseUrl)
+}
+
+const open = (): void => window.$chatwoot && window.$chatwoot.toggle()
+
+const close = (): void => window.$chatwoot && window.$chatwoot.toggle()
+
+export default {
+  domain,
+  load,
+  open,
+  close
+}

src/providers/index.ts

@@ -3,3 +3,4 @@ export { default as helpScout } from './helpScout'
 export { default as intercom } from './intercom'
 export { default as messenger } from './messenger'
 export { default as userlike } from './userlike'
+export { default as chatwoot} from './chatwoot'

src/types.ts

@@ -6,3 +6,4 @@ export type Provider =
   | 'messenger'
   | 'drift'
   | 'userlike'
+  | 'chatwoot'

website/pages/chatwoot.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import Layout from '../layouts/main'
+import ExampleLinks from '../components/exampleLinks'
+import { LiveChatLoaderProvider, Chatwoot } from 'react-live-chat-loader'
+
+const Page = () => (
+  <LiveChatLoaderProvider provider="chatwoot" providerKey="E33wn9ftxMDHZx18AaBkfPvY">
+    <Layout title="React Live Chat Loader: Chatwoot">
+      <div className="wrapper">
+        <div className="inner">
+          <h1>React Live Chat Loader: Chatwoot</h1>
+          <p>
+            This is an example implementation of the Chatwoot widget using{' '}
+            <a href="https://github.com/calibreapp/react-live-chat-loader">
+              react-live-chat-loader
+            </a>
+            .
+          </p>
+          <ExampleLinks />
+        </div>
+      </div>
+      <Chatwoot />
+    </Layout>
+  </LiveChatLoaderProvider>
+)
+
+export default Page