
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-live-chat-loader
Advanced tools
Implement live chat in your react app without taking a performance hit.
Implement live chat in your React app without taking a performance hit.
To download react-live-chat-loader run:
npm install --save react-live-chat-loader
Or if you're using yarn, run:
yarn add react-live-chat-loader --dev
To allow you to trigger a single live chat within your application, React Live Chat Loader has a Context Provider which should be added at the root level of your application.
You pass your providerKey
and provider
to the LiveChatLoaderProvider
.
For example, to add a LiveChatLoaderProvider
for HelpScout you would do the
following:
import { LiveChatLoaderProvider } from 'react-live-chat-loader'
export default class App extends React.Component {
/* ... */
render() {
return (
<LiveChatLoaderProvider providerKey="asdjkasl123123" provider="helpScout">
/* ... */
</LiveChatLoaderProvider>
)
}
}
You can then include the relevant chat where you would like it to appear.
For example, for HelpScout you would import the HelpScout
component and add it
to your application:
import { HelpScout } from 'react-live-chat-loader'
export default class Index extends React.Component {
/* ... */
render() {
return (
<>
/* ... */
<HelpScout />
</>
)
}
}
And to load the chat from a custom button you can import the useChat
hook which has the current state of the chat and a function to load the
chat.
import { useChat } from 'react-live-chat-loader'
export const LoadChatButton = () => {
const [state, loadChat] = useChat()
return <button onClick={loadChat}>Load Chat</button>
}
You can pass the following props to the LiveChatLoaderProvider
provider:
provider
: Choose from helpScout
or intercom
(see below)providerKey
: Provider API Key (see below)strategy
: The loading strategy, choose from:
idle
: load when the page is idle or when a user hovers or clicks on the
widgetdefault
: only load when a user hovers or clicks on the widgetCurrently there are two supported providers:
To use HelpScout set the provider
prop as helpScout
and set the
providerKey
prop as your Beacon API Key.
You can customise the HelpScout beacon by passing the following props to the
HelpScout
component:
color
: The background color of the beaconicon
: Choose from message
, antenna
, search
, question
, beacon
zIndex
: Changes the CSS index value of how the Beacon relates to other objectshorizontalPosition
: Choose from left
or right
To use Intercom set the provider
as intercom
and set the providerKey
props
as your Intercom App ID.
You can customise the color of the Intercom widget by passing a color
prop to
the Intercom
component.
buttonStyle
, text
, textAlign
FAQs
Implement live chat in your react app without taking a performance hit.
The npm package react-live-chat-loader receives a total of 9,293 weekly downloads. As such, react-live-chat-loader popularity was classified as popular.
We found that react-live-chat-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.