React Live Chat Loader

To use Help Scout import the LiveChatLoaderProvider and set the provider prop as helpScout and the providerKey prop as your Beacon API Key.

Then import the HelpScout component.

import { LiveChatLoaderProvider, HelpScout } from 'react-live-chat-loader'

export default class App extends React.Component {
  render() {
    return (
      <livechatloaderprovider providerkey="asdjkasl123123" provider="helpScout">
        /* ... */
        <helpscout></helpscout>
      </livechatloaderprovider>
    )
  }
}

You can customise the Help Scout beacon by passing the following props to the HelpScout component:

• color: The background color of the beacon
• icon: Choose from message, antenna, search, question, beacon
• zIndex: Changes the CSS index value of how the Beacon relates to other objects
• horizontalPosition: Choose from left or right

Currently the Help Scout component only supports the icon button style.

To use Intercom import the LiveChatLoaderProvider and set the provider prop as intercom and the providerKey prop as your Intercom App ID.

Then import the Intercom component.

import { LiveChatLoaderProvider, Intercom } from 'react-live-chat-loader'

export default class App extends React.Component {
  render() {
    return (
      <livechatloaderprovider providerkey="asd239" provider="intercom">
        /* ... */
        <intercom></intercom>
      </livechatloaderprovider>
    )
  }
}

You can customise the color of the Intercom widget by passing a color prop to the Intercom component.

To use Messenger, import the LiveChatLoaderProvider and then set the provider prop as messenger and the providerKey prop as your Facebook Page ID.

If you are using other Facebook features like share, you should set the appID prop as your Facebook App ID as the Customer Chat SDK includes all the features that Facebook provide.

You can optionally set the locale prop, the default value is en_US.

Then import the Messenger component.

import { LiveChatLoaderProvider, Messenger } from 'react-live-chat-loader'

export default class App extends React.Component {
  render() {
    return (
      <livechatloaderprovider provider="messenger" providerkey="111222333444555" appid="111222333444555" locale="en_US">
        /* ... */
        <messenger></messenger>
      </livechatloaderprovider>
    )
  }
}

For a list of locale option values, refer to Facebook Localization documentation.

You can customise the Messenger widget by passing the following props to the Messenger component:

• color: The theme color of the widget
• loggedInGreeting: The greeting text that will be displayed if the user is currently logged in to Facebook.
• loggedOutGreeting: The greeting text that will be displayed if the user is currently not logged in to Facebook.
• greetingDialogDisplay: Sets how the greeting dialog will be displayed.
• greetingDialogDelay: Sets the number of seconds of delay before the greeting dialog is shown after the plugin is loaded.

For a list of options, refer to Facebook Customer Chat Plugin documentation.

Please note: Facebook Messenger will not load on localhost and you will need to configure your domain through the setup wizard in Facebook for it to load correctly.

To use Drift import the LiveChatLoaderProvider and set the provider prop as drift and the providerKey prop as your Drift App ID.

Then import the Drift component.

import { LiveChatLoaderProvider, Drift } from 'react-live-chat-loader'

export default () => (
  <livechatloaderprovider providerkey="asdhjg127s1s" provider="drift">
    /* ... */
    <drift></drift>
  </livechatloaderprovider>
)

You can customise the Drift Messenger by passing the following props to the Drift component:

• color: The background color of the messenger
• icon: Choose from A, B, C, D; you're presented with these preset icons when signing up for Drift, or in the "Drift Widget > Design > Widget icon" entry under the "App Settings" header on the Drift settings page.

const domain = 'https://provider.domain.com'

const loadScript = () => {
  // Detect the provider is already loaded and return early
  if (alreadyLoaded) return

  // Call provider script here
}

const load = ({ providerKey }) => {
  loadScript()
  // Initialise provider script
}

const open = () => // Open provider
const close = () => // Close provider

export default {
  domain,
  load,
  open,
  close
}

import React from 'react'

import { useChat } from '../../'
import STATES from '../../utils/states'

const styles = {
  // Add widget styles here
  button: {
    // Add button styles here
  }
}

const Provider = ({ color }) => {
  const [state, loadChat] = useChat({ loadWhenIdle: true })

  if (state === STATES.COMPLETE) return null

  return (
    <div>
      <button onclick="{()"> loadChat({ open: true })}
        onMouseEnter={() =&gt; loadChat({ open: false })}
        style={{
          ...styles.button,
          backgroundColor: color
        }}
      &gt;
        Button
      </button>
    </div>
  )
}

Provider.defaultProps = {
  color: '#976ad4'
}

export default Provider