
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
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,270 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 3 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.