Do I need an npm package or a React component?
No. The script tag goes in index.html, outside React, and the chat runs in its own iframe. There is nothing to import and no component to render.
Install guide
Live chat for React
The widget lives outside your component tree: one script tag in index.html, no npm package, no React component. It stays on screen while React Router changes pages.
No credit card needed · Free for 21 days
index.html
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
<script
src="https://app.mewdesk.com/widget.js"
data-site-id="YOUR_SITE_ID"
async>
</script>
</body>
</html>
Where it goes
Paste it once on React
The snippet is the same on every platform: one script tag just before the closing body tag. These steps show where that is on React.
- 1
Copy your snippet from the dashboard
Add your website under Websites, using the domain you are installing on, and copy the snippet from its Embed code page. It has your site ID filled in; the one shown here uses a placeholder.
- 2
Open your app's HTML file
With Vite it is index.html at the project root. With Create React App it is public/index.html. Both are plain HTML files that wrap your React app.
- 3
Paste the snippet before </body>
Put it after the script that loads your app. The tag is async, so it never delays your bundle.
- 4
Run or deploy the app
The chat bubble shows on every route, because a single-page app never leaves this HTML page.
Good to know
- Open the chat from your own button with the data-mewdesk-open attribute, or call window.Mewdesk?.open() in a click handler. Calls made before the widget has loaded run once it is ready.
- The visitor's conversation is kept in the widget's own storage, so a full reload keeps the chat history too.
What you get
The same Mewdesk, whatever your site runs on
The widget lives in its own iframe, so it looks and works the same on React as everywhere else.
One script tag
That is the whole install. No npm package, no build step, no plugin to keep updated.
Replies in seconds
Visitors see your answer the moment you send it, without refreshing. Your team replies from one inbox.
Offline form
When nobody is online, visitors leave their email and a message, and the chat picks up where it left off.
No tracking cookies
No IP addresses, no fingerprinting, no third-party scripts. A name, an optional email and the conversation.
FAQ
Mewdesk on React
Questions people ask before adding live chat to a React site. For everything else, the general FAQ has the rest.
Does the chat survive client-side navigation with React Router?
Yes. A single-page app stays on the same HTML page while routes change, so the widget and the conversation stay exactly where they are.
Can I open the chat from a button in my React app?
Yes. Add data-mewdesk-open to any button, which needs no JavaScript, or call window.Mewdesk?.open() in an onClick handler. In TypeScript, declare Mewdesk on the Window type once.
Also installing on
Add live chat to your React site today
Paste the snippet, answer your first visitor. The first 21 days are on us, with no card needed.