Support & Contact

Most integration issues are configuration or styling related — missing Tailwind @source paths, an incorrect JWT user id, or a broken height chain. Start with the guides below before opening a support ticket.

• Troubleshooting — symptom → cause → fix table
• FAQ — short answers to common questions
• Best Practices — recommended patterns for production apps

Use this list when embedding the package in a new project. Tick each item before debugging application logic.

Install

npm install @realtimexsco/live-chat react react-dom zustand tailwindcss

• Node.js 18 or later
• Tailwind v4 plugin installed (@tailwindcss/vite or @tailwindcss/postcss)
• Package version 1.1.56+ if you customize drawers
• Types present at node_modules/@realtimexsco/live-chat/dist/index.d.ts

CSS and theme

• Import tailwindcss and @realtimexsco/live-chat/styles.css
• @source points at dist/index.mjs and dist/index.cjs with the correct relative depth
• :root defines --chat-theme and --chat-theme-5 through --chat-theme-60
• @theme inline maps the matching --color-chat-theme* tokens

Runtime config

• chat.config.ts has real clientId, accessToken, apiUrl, and socketUrl
• loggedUserDetails._id matches the JWT _id
• Chat page uses h-dvh min-h-0 overflow-hidden or an explicit viewportHeight
• Next.js: "use client" + transpilePackages
• Vite: optimizeDeps.exclude includes the chat package

Optional customization

• components for custom UI slots
• classNames for theme tweaks
• features for phone/video callbacks
• layout to hide sections
• colorMode synced with your app theme

• Installation and Project Setup
• Quick Start for a minimum working page
• API docs under /documentations/api when backend contracts are involved

The package is released under the MIT License. You may use, copy, modify, and distribute it in accordance with that license. Keep the copyright notice with redistributed copies.

For product-specific support, bug reports, or feature requests, contact your RealtimeX account team or the support channel included with your subscription. Include your package version, framework (Vite / Next.js), and a minimal reproduction when reporting bugs.