support Chatwoot expanded bubble

Author: billykwok

README.md

@@ -336,6 +336,7 @@ 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.
+- `launcherTitle`: The text used for the [Expanded Bubble](https://www.chatwoot.com/docs/product/channels/live-chat/sdk/setup#widget-designs) design. Setting to any non-empty string will enable expanded bubble design automatically. Default to null.
 
 </details>
 

src/components/Chatwoot/index.tsx

@@ -5,6 +5,9 @@ import useChat from '../../hooks/useChat'
 const styles: {
   button: CSSProperties
   img: CSSProperties
+  expandedButton: CSSProperties
+  expandedImg: CSSProperties
+  launcherTitle: CSSProperties
   close: CSSProperties
 } = {
   button: {
@@ -24,6 +27,27 @@ const styles: {
     margin: '20px',
     width: '24px'
   },
+  expandedButton: {
+    display: 'flex',
+    bottom: '24px',
+    height: '48px',
+    width: 'auto'
+  },
+  expandedImg: {
+    height: '20px',
+    margin: '14px 8px 14px 16px',
+    width: '20px'
+  },
+  launcherTitle: {
+    display: 'flex',
+    color: '#fff',
+    alignItems: 'center',
+    paddingRight: '20px',
+    fontFamily:
+      'system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif',
+    fontSize: '16px',
+    fontWeight: 500
+  },
   close: {
     backgroundColor: '#fff',
     height: '24px',
@@ -36,9 +60,10 @@ const styles: {
 
 interface Props {
   color?: string
+  launcherTitle?: string
 }
 
-const Provider = ({ color }: Props): JSX.Element | null => {
+const Provider = ({ color, launcherTitle }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
   if (state === 'complete') return null
@@ -54,15 +79,24 @@ const Provider = ({ color }: Props): JSX.Element | null => {
         onMouseEnter={() => loadChat({ open: false })}
         style={{
           ...styles.button,
+          ...(launcherTitle && styles.expandedButton),
           backgroundColor: color
         }}
       >
         {state === 'initial' ? (
-          <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"
-          />
+          <>
+            <img
+              style={{
+                ...styles.img,
+                ...(launcherTitle && styles.expandedImg)
+              }}
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg=="
+              alt="bubble-icon"
+            />
+            {launcherTitle ? (
+              <div style={styles.launcherTitle}>{launcherTitle}</div>
+            ) : null}
+          </>
         ) : (
           <>
             <div style={{ ...styles.close, transform: 'rotate(45deg)' }} />