Chat Widget for React
Install 3KB lightweight chat widget on your React app in 2 minutes.
Zero tracking. Zero cookies. No dependencies.
Quick Install (2 Minutes)
- 1.
Sign up free and get your Site ID from the dashboard.
Sign Up Free → - 2.
Add the script tag to your HTML file.
For Create React App:
public/index.htmlFor Vite:
index.htmlFor Gatsby:
gatsby-ssr.js - 3.
Paste this code before the closing
</body>tag:<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script> - ✓
Done! The widget appears on all pages automatically.
Framework-Specific Instructions
Using Next.js? See our dedicated Next.js Chat Widget guide →
Create React App (public/index.html)
Add directly to your public/index.html file.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="root"></div>
<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>Vite (index.html)
Add directly to your root index.html file.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script>
</body>
</html>Gatsby (gatsby-ssr.js)
Add to your gatsby-ssr.js file in the root directory.
import React from 'react'
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="chat-widget"
src="https://api.thechatwidget.com/widget.js"
data-site="YOUR_SITE_ID"
defer
/>
])
}Why Choose This Over React Chat Libraries?
3KB vs heavy npm packages
Most React chat libraries are 50-200KB+ and add to your bundle size. This loads externally.
No bundle bloat
One script tag. No npm install. Doesn't increase your JavaScript bundle size.
Works with SSR/SSG
Perfect for Gatsby and other SSR frameworks. No hydration issues.
GDPR-friendly by default
Zero tracking, zero cookies. No cookie banner needed. Perfect for EU compliance.
Common Questions
Does it work with Vite?
Yes! Just add the script tag to your index.html file. Works perfectly with Vite + React.
Will this work with TypeScript?
Yes! The script tag works with TypeScript. No type definitions needed - it's just a script tag.
Does it work with Create React App?
Yes! Add the script tag to your public/index.html file. Works with CRA, ejected or not.
Will it slow down my React app?
No. At 3KB, it's 20-40x smaller than most React chat libraries. It loads asynchronously and doesn't block rendering.
Can I use it with React Native?
This widget is designed for web browsers. For React Native, you'd need a different solution. Contact us if you need mobile app support.
Ready to Add Chat to Your React App?
Sign up free and have your chat widget live in 2 minutes. No credit card required.