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

Prerequisites

What your app installs, what ships inside the package, and the credentials you need from your backend.

You install (peer dependencies)

Only what your app must own a single shared copy of - everything else the package needs installs itself.

PackageVersionWhenWhy
react≥ 17AlwaysUI framework - exactly one copy in your app
react-dom≥ 17AlwaysDOM rendering - same reason
tailwindcssany / noneOnly if your app itself uses TailwindNot needed for chat - styles.css is pre-compiled and self-contained
next≥ 13Next.js onlyApp Router

Bundled inside the package

These are regular dependencies of the package: installing it pulls them in, uninstalling it removes them (unless something else in your project also uses them). Don't add them to your own package.json.

zustand, axios, socket.io-client, radix-ui, lucide-react, emoji-picker-react, clsx, tailwind-merge, class-variance-authority, react-hot-toast, firebase (push), date-fns, react-day-picker, lexical + @lexical/*, dompurify, @videosdk.live/react-sdk v0.13.3 (calling) and all chat UI components.

Note

pnpm + Vite:pnpm doesn't hoist nested dependencies, so list the chat's nested deps in optimizeDeps.include with > paths (e.g. "@realtimexsco/live-chat > @videosdk.live/react-sdk") - see Project setup. You still don't add them to your package.json.

Lexical - nothing to install

Rich-text messaging needs Lexical, and it's already a dependency of the package. lexical, @lexical/react, @lexical/html and the rest land under node_modules automatically. Only add them yourself if you build a completely separate Lexical editor.

shell
npm ls lexical @lexical/react dompurify   # nested under @realtimexsco/live-chat

Backend credentials

FieldExampleNotes
clientId"6a35339216e46130366cda93"RealtimeX tenant / client id
accessTokenJWT stringThe user's access token
loggedUserDetails._id"6a3533c416e46130366cda98"Must match the _id inside the JWT
loggedUserDetails.name"chat1"Display name
loggedUserDetails.email"chat1@example.com"Used for client-user login
apiUrlhttps://realtimex.softwareco.com/api/v1Required. REST API - must end with /api/v1
socketUrlhttps://realtimex.softwareco.comNo /api/v1; connects at /connection. Optional - derived from apiUrl
themeColor"#6366f1" / "blue" / "var(--primary)"Brand accent - any CSS color (optional)

Important

If loggedUserDetails._iddoesn't match the JWT's _id, messages can appear on the wrong side, contacts can be empty, or session sync can fail. Decode your JWT or use the id returned by the login API.
PreviousIntroductionNextInstallation

On this page

You install (peer dependencies)Bundled inside the packageLexical - nothing to installBackend credentials
Back to top