Add class to provider container elements

Author: robmorieson

src/components/Chatwoot/index.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   button: CSSProperties
@@ -34,17 +35,20 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
 }
 
-const Provider = ({ color }: Props): JSX.Element | null => {
+const Provider = ({
+  color,
+  containerClass = ClassNames.container
+}: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
   if (state === 'complete') return null
 
   return (
-    <div>
+    <div className={containerClass}>
       <div
         role="button"
         aria-label="Load Chat"

src/components/Drift/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
 import useWindowWidth from '../../hooks/useWindowWidth'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   container: CSSProperties
@@ -40,14 +41,15 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
   icon?: 'A' | 'B' | 'C' | 'D'
 }
 
 const Drift = ({
   color = '#0176ff',
-  icon = 'A'
+  icon = 'A',
+  containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
   const windowWidth = useWindowWidth()
@@ -72,7 +74,7 @@ const Drift = ({
   }
 
   return (
-    <div style={positionStyles}>
+    <div className={containerClass} style={positionStyles}>
       <div style={styles.container}>
         <div
           role="button"

src/components/HelpScout/index.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, useEffect, useState } from 'react'
 
 import useChat from '../../hooks/useChat'
 import useWindowHeight from '../../hooks/useWindowHeight'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   wrapper: CSSProperties
@@ -157,7 +158,7 @@ const getIcon = (icon: HelpScoutIcon): JSX.Element => {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
   icon?: HelpScoutIcon
   zIndex?: string
@@ -168,7 +169,8 @@ const HelpScout = ({
   color = '#976ad4',
   icon = 'beacon',
   zIndex = '1050',
-  horizontalPosition = 'left'
+  horizontalPosition = 'left',
+  containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
   const windowHeight = useWindowHeight()
@@ -201,6 +203,7 @@ const HelpScout = ({
 
   return (
     <div
+      className={containerClass}
       style={{
         ...styles.wrapper,
         ...positionStyles,

src/components/Intercom/index.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   wrapper: CSSProperties
@@ -88,11 +89,14 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
 }
 
-const Intercom = ({ color }: Props): JSX.Element | null => {
+const Intercom = ({
+  color,
+  containerClass = ClassNames.container
+}: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
   if (state === 'complete') {
@@ -101,6 +105,7 @@ const Intercom = ({ color }: Props): JSX.Element | null => {
 
   return (
     <div
+      className={containerClass}
       style={{
         ...styles.wrapper,
         background: color

src/components/Messenger/index.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, memo } from 'react'
 
 import useProvider from '../../hooks/useProvider'
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: CSSProperties = {
   appearance: 'none',
@@ -24,7 +25,7 @@ const styles: CSSProperties = {
   userSelect: 'none'
 }
 
-interface Props {
+interface Props extends ProviderProps {
   themeColor?: string
   loggedInGreeting?: string
   loggedOutGreeting?: string
@@ -34,7 +35,6 @@ interface Props {
   greetingDialogDelay?: string
   greetingDialogDisplay?: string
   color?: string
-  className?: string
 }
 
 interface ChatProps extends Props {
@@ -70,10 +70,10 @@ const CustomerChat = memo(
 
 const Widget = ({
   color,
-  className
+  containerClass
 }: {
   color: string
-  className: string
+  containerClass: string
 }): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
 
@@ -83,7 +83,7 @@ const Widget = ({
 
   return (
     <div
-      className={className}
+      className={containerClass}
       style={styles}
       role="button"
       aria-label="Load Chat"
@@ -114,15 +114,15 @@ const Widget = ({
 
 const Messenger = ({
   color = '',
-  className = 'live-chat-loader-placeholder',
+  containerClass = ClassNames.container,
   ...props
 }: Props): JSX.Element => {
   const { providerKey } = useProvider()
 
   return (
     <>
       <CustomerChat color={color} providerKey={providerKey} {...props} />
-      <Widget color={color} className={className} />
+      <Widget color={color} containerClass={containerClass} />
     </>
   )
 }

src/components/Userlike/index.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties } from 'react'
 
 import useChat from '../../hooks/useChat'
+import { ProviderProps, ClassNames } from '../../types'
 
 const styles: {
   container: CSSProperties
@@ -34,7 +35,7 @@ const styles: {
   }
 }
 
-interface Props {
+interface Props extends ProviderProps {
   color?: string
   backgroundColor?: string
   position?: string
@@ -49,7 +50,8 @@ const Userlike = ({
   position = 'right',
   vOffset = '24px',
   hOffset = '24px',
-  style = 'round'
+  style = 'round',
+  containerClass = ClassNames.container
 }: Props): JSX.Element | null => {
   const [state, loadChat] = useChat({ loadWhenIdle: true })
   const positionStyles = {
@@ -66,7 +68,10 @@ const Userlike = ({
   }
 
   return (
-    <div style={{ ...styles.container, ...positionStyles, ...shapeStyle }}>
+    <div
+      className={containerClass}
+      style={{ ...styles.container, ...positionStyles, ...shapeStyle }}
+    >
       <button
         role="button"
         aria-label="Load Chat"

src/types.ts

@@ -1,3 +1,10 @@
+export enum ClassNames {
+  container = 'live-chat-loader-placeholder'
+}
+export interface ProviderProps {
+  containerClass?: string
+}
+
 export type State = 'initial' | 'open' | 'complete'
 
 export type Provider =