Chat Widget for React
Install lightweight chat widget on your React app in 2 minutes.
Zero tracking. Zero cookies. No dependencies.
Quick Install (2 Minutes)
- 01.
Sign up and get your Site ID from the dashboard.
Sign Up → - 02.
Add the script tag to your HTML file.
CRA: public/index.htmlVite: index.htmlGatsby: gatsby-ssr.js - 03.
Paste this code before the closing
</body>tag:<script src="https://api.ghostchat.dev/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.ghostchat.dev/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.ghostchat.dev/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.ghostchat.dev/widget.js"
data-site="YOUR_SITE_ID"
defer
/>
])
}Why Choose This Over React Chat Libraries?
~10KB 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 ~10KB, it's 15–30x smaller than most React chat libraries. It loads asynchronously and doesn't block rendering.
Ready to Add Chat to Your React App?
Have your chat widget live in 2 minutes. No credit card required.