Skip to content

Commit f05c807

Browse files
IlirEdisIlirEdis
committed
FrontChat icon placeholder fixed. ReadMe updated and other minimal fixes
1 parent e1015cd commit f05c807

4 files changed

Lines changed: 124 additions & 22 deletions

File tree

‎README.md‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export const LoadChatButton = () => {
122122

123123
You can pass the following props to the `LiveChatLoaderProvider` provider:
124124

125-
- `provider`: Choose from `helpScout`, `intercom`, `drift` or `messenger` ([see below](#-supported-providers))
125+
- `provider`: Choose from `helpScout`, `intercom`, `drift`, `frontChat` or `messenger` ([see below](#-supported-providers))
126126
- `providerKey`: Provider API Key ([see below](#-supported-providers))
127127
- `idlePeriod`: How long to wait in ms before loading the provider. Default is
128128
`2000`. Set to `0` to never load. This value is used in a `setTimeout` in
@@ -347,6 +347,39 @@ You can customise the Chatwoot placeholder by passing the following props to the
347347

348348
</details>
349349

350+
<details>
351+
<summary id="frontChat">FrontChat</summary>
352+
353+
To use FrontChat import the `LiveChatLoaderProvider` and set the `provider` prop
354+
as `frontChat` and the `providerKey` prop as your FrontChat `chatId`.
355+
356+
Then import the `FrontChat` component.
357+
358+
```jsx
359+
import { LiveChatLoaderProvider, FrontChat } from 'react-live-chat-loader'
360+
361+
export default () => {
362+
return (
363+
<LiveChatLoaderProvider
364+
providerKey="YourFrontChat-chatId"
365+
provider="frontChat"
366+
>
367+
/* ... */
368+
<FrontChat />
369+
</LiveChatLoaderProvider>
370+
)
371+
}
372+
```
373+
374+
You can customise the FrontChat placeholder icon by passing the following props to the `FrontChat` component:
375+
376+
- `color`: The background color of the placeholder widget.
377+
- `containerClass`: Class to be added to the placeholder element, defaults to `live-chat-loader-placeholder`
378+
379+
See the [official Intercom documentation](https://help.front.com/) for more details.
380+
381+
</details>
382+
350383
## ➕ Adding a Provider
351384

352385
To add a new live chat provider, follow the steps in [Contributing: Adding a Provider](CONTRIBUTING.md#-adding-a-provider).

‎src/components/FrontChat/index.tsx‎

Lines changed: 85 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,64 @@
11
import React, { CSSProperties } from 'react'
2-
32
import useChat from '../../hooks/useChat'
3+
import { ClassNames, ProviderProps } from '../../types'
44

55
const styles: {
66
button: CSSProperties
7+
wrapper: CSSProperties
8+
iconWrapper: CSSProperties
9+
icon: CSSProperties
710
} = {
8-
// Add widget styles here
9-
button: {
10-
// Add button styles here
11+
wrapper: {
1112
position: 'fixed',
12-
zIndex: 999,
13+
// z-index is 1 more than FrontChat's actual launcher as when the real widget loads
14+
// it might not initially reflect the fake icon's current state (open/closed)
15+
zIndex: 100000000,
1316
bottom: '20px',
1417
right: '20px',
15-
maxWidth: '48px',
16-
width: '48px',
17-
maxHeight: '48px',
18-
height: '48px',
19-
borderRadius: '50px',
20-
cursor: 'pointer'
18+
border: 'none',
19+
outline: 'none',
20+
width: '64px',
21+
height: '64px'
22+
},
23+
button: {
24+
maxWidth: '64px',
25+
width: '64px',
26+
maxHeight: '64px',
27+
height: '64px',
28+
borderRadius: '64px',
29+
cursor: 'pointer',
30+
border: 'none'
31+
},
32+
iconWrapper: {
33+
position: 'relative',
34+
width: '100%',
35+
height: '100%'
36+
},
37+
icon: {
38+
position: 'absolute',
39+
top: '50%',
40+
marginTop: '-21px',
41+
left: '50%',
42+
marginLeft: '-22px'
2143
}
2244
}
2345

24-
const FrontChat = ({ color }: { color: string }) => {
46+
interface Props extends ProviderProps {
47+
color?: string
48+
}
49+
50+
const FrontChat = ({
51+
color = '#333333',
52+
containerClass = ClassNames.container
53+
}: Props) => {
2554
const [state, loadChat] = useChat({ loadWhenIdle: true })
2655

2756
if (state === 'complete') {
2857
return null
2958
}
3059

3160
return (
32-
<div>
61+
<div style={{ ...styles.wrapper }} className={containerClass}>
3362
<button
3463
onClick={() => loadChat({ open: true })}
3564
onMouseEnter={() => loadChat({ open: false })}
@@ -38,14 +67,52 @@ const FrontChat = ({ color }: { color: string }) => {
3867
backgroundColor: color
3968
}}
4069
>
41-
Button
70+
<div style={{ ...styles.iconWrapper }}>
71+
<svg width="40" height="40" role="button" style={{ ...styles.icon }}>
72+
<title>Launch Front Chat</title>
73+
<defs>
74+
<filter
75+
id="chat-logo-a"
76+
data-testid="chat-logo-shadow"
77+
width="127.8%"
78+
height="127.8%"
79+
x="-13.9%"
80+
y="-11.1%"
81+
filterUnits="objectBoundingBox"
82+
>
83+
<feOffset
84+
dy="1"
85+
in="SourceAlpha"
86+
result="shadowOffsetOuter1"
87+
></feOffset>
88+
<feGaussianBlur
89+
in="shadowOffsetOuter1"
90+
result="shadowBlurOuter1"
91+
stdDeviation="1.5"
92+
></feGaussianBlur>
93+
<feColorMatrix
94+
in="shadowBlurOuter1"
95+
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
96+
></feColorMatrix>
97+
</filter>
98+
</defs>
99+
<g fill="none" transform="translate(-11 -12)">
100+
<use
101+
data-testid="chat-logo-svg-shadow"
102+
fill="#000"
103+
filter="url(#chat-logo-a)"
104+
href="#chat-logo-b"
105+
></use>
106+
<path
107+
fill="#FFF"
108+
d="M32,18 C24.2680135,18 18,24.2680135 18,32 C18,39.7319865 24.2680135,46 32,46 L45.6,46 C45.8209139,46 46,45.8209139 46,45.6 L46,32 C46,24.2680135 39.7319865,18 32,18 Z M32,14 C41.9411255,14 50,22.0588745 50,32 L50,45.6 C50,48.0300529 48.0300529,50 45.6,50 L32,50 C22.0588745,50 14,41.9411255 14,32 C14,22.0588745 22.0588745,14 32,14 Z M25.9634146,31.5853659 L37.9634146,31.5853659 C39.0679841,31.5853659 39.9634146,30.6899354 39.9634146,29.5853659 C39.9634146,28.4807964 39.0679841,27.5853659 37.9634146,27.5853659 L25.9634146,27.5853659 C24.8588451,27.5853659 23.9634146,28.4807964 23.9634146,29.5853659 C23.9634146,30.6899354 24.8588451,31.5853659 25.9634146,31.5853659 Z M31.195122,38.8292683 L37.195122,38.8292683 C38.2996915,38.8292683 39.195122,37.9338378 39.195122,36.8292683 C39.195122,35.7246988 38.2996915,34.8292683 37.195122,34.8292683 L31.195122,34.8292683 C30.0905525,34.8292683 29.195122,35.7246988 29.195122,36.8292683 C29.195122,37.9338378 30.0905525,38.8292683 31.195122,38.8292683 Z"
109+
></path>
110+
</g>
111+
</svg>
112+
</div>
42113
</button>
43114
</div>
44115
)
45116
}
46117

47-
FrontChat.defaultProps = {
48-
color: 'red'
49-
}
50-
51118
export default FrontChat

‎src/providers/frontChat.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// Website: https://front.com/product/live-chat
2+
// Documentation: https://help.front.com/
3+
14
import { State } from '../types'
25
import waitForLoad from '../utils/waitForLoad'
36

@@ -43,10 +46,9 @@ const load = ({
4346
const loaded = loadScript(() => {
4447
beforeInit()
4548

46-
// console.log('WINDOW', window)
4749
window.FrontChat('init', {
4850
chatId: providerKey,
49-
useDefaultLauncher: true // optional
51+
useDefaultLauncher: false // optional. Read more: https://dev.frontapp.com/docs/chat-sdk-reference#frontchatinit-options
5052
})
5153
})
5254

‎website/pages/frontchat.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Page: NextPage = () => (
2525
<ExampleLinks />
2626
</div>
2727
</div>
28-
<FrontChat color="red" />
28+
<FrontChat color="#333333" />
2929
</Layout>
3030
</LiveChatLoaderProvider>
3131
)

0 commit comments

Comments
 (0)