React.js implementation

General

Provide Support live chat component for React.js makes the integration of the live chat with React.js simple and straightforward. All available live chat features are supported.

Installation

Provide Support live chat component for React.js is available in NPM repository as providesupport-live-chat-window-react. It works correctly with all popular bundlers. To install the live chat component for React.js use the following command:

npm install providesupport-live-chat-window-react --save

Including components

To start using live chat component for React.js you just need to import the component from the providesupport-live-chat-window-react package and pass

the "company" parameter. "Company" parameter can be either your account name or account hash.

import React from 'react';
import { LiveChat } from 'providesupport-live-chat-window-react';
export default () => (
  <div className="app">
    <LiveChat company="your_account_hash" />
  </div>
);

The LiveChat component should be as close to the root of the application as possible since it contains an iframe.

LiveChat Props

Prop name	Description	Is required	Default value
company	The account name, specified during the registration, or the account hash	Yes	n/a
isUploadAfterDocumentLoaded	Load chat button after page loads	No	true
bannerDomain	Specify a custom domain from which the banner will be downloaded, if a custom domain is activated for your account	No	"image.providesupport.com"
(...otherParams)	All other parameters that are passed to the banner download URL, e.g. custom variables	No	n/a

Some styles like live chat button position can be customized through the account Control Panel. However, you can override these styles or change the chat window loading position. E.g., the following styles are applied to the live chat button and fix it on your screen in the right bottom corner:

.psmtc_XXXX {

position: fixed !important;

right: 20 !important;

bottom: 20 !important;

}

The live chat window will spring from the position where the live chat button was added unless you change it like this:

.psmw_XXXX {

position: fixed !important;

left: 0 !important;

bottom: 0 !important;

}

In the above example the live chat window is set to spring out from the left bottom corner regardless the position of the live chat button.