React.js implementation

<< Click to Display Table of Contents >>

  System Setup and Customization > Control Panel > Using chat button codes >

React.js implementation



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.




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" />


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


LiveChat Props


Prop name


Is required

Default value


The account name, specified during the registration, or the account hash




Load chat button after page loads





Specify a custom domain from which the banner will be downloaded, if a custom domain is activated for your account







All other parameters that are passed to the banner download URL, e.g. custom variables






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.