RealTimeX
Sign inStart for free
RealTimeXWeb Package
IntroductionPrerequisitesInstallationProject setupQuick start
Package structureConfigurationComponentsHooksAPI integrationSocket events
OverviewReplace entire UIReplace componentsStyle with classNamesThemes & localePhone & video callingIn-call control barFeatures
Unread badgeRich-text messagesPins, stars & datesMessage threadsMentionsCanvas & draftsNotificationsAdmin permissionsServer refusalsSession & token refresh
Host app integrationTroubleshootingFAQVersion historyBest practicesSupport & contact
Web packageGetting started

Installation

Install the package and its two peers - everything else, including Lexical, comes with it.

Step 1 - Install the package and peers

shell
npm install @realtimexsco/live-chat react react-dom

No Tailwind plugin, no zustand and no lexical - they're bundled. See Prerequisites.

Note

Using pnpm + Vite? Add the nested optimizeDeps.include entries shown in Project setup.

Step 2 - Verify the install

shell
1npm ls @realtimexsco/live-chat2npm ls lexical @lexical/react dompurify   # nested under live-chat - Lexical is bundled3ls node_modules/@realtimexsco/live-chat/dist/index.d.ts   # TypeScript types must exist

Step 3 - CSS, config file and chat page

Import the stylesheet once, create chat.config.ts and render ChatMain - see Project setup and Quick start.

Step 4 - Run your app

Start your dev server and open the page that renders ChatMain.

PreviousPrerequisitesNextProject setup

On this page

Step 1 - Install the package and peersStep 2 - Verify the installStep 3 - CSS, config file and chat pageStep 4 - Run your app
Back to top