Widget de Chat para React
Instale um widget de chat leve de 3KB na sua app React em 2 minutos.
Sem rastreamento. Sem cookies. Sem dependências.
Instalação Rápida (2 Minutos)
- 1.
Cadastre-se grátis e obtenha seu Site ID do painel.
Cadastrar Grátis → - 2.
Adicione a tag script ao seu arquivo HTML.
Para Create React App:
public/index.htmlPara Vite:
index.htmlPara Gatsby:
gatsby-ssr.js - 3.
Cole este código antes da tag de fechamento
</body>:<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script> - ✓
Pronto! O widget aparece em todas as páginas automaticamente.
Instruções por Framework
Usando Next.js? Veja nosso guia dedicado Guia Widget de Chat Next.js →
Create React App (public/index.html)
Adicione diretamente ao seu arquivo public/index.html.
<!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)
Adicione diretamente ao seu arquivo index.html raiz.
<!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)
Adicione ao seu arquivo gatsby-ssr.js no diretório raiz.
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
/>
])
}Por Que Escolher Isso Ao Invés de Bibliotecas React?
3KB vs pacotes npm pesados
A maioria das bibliotecas de chat React são 50-200KB+ e aumentam seu bundle. Isso carrega externamente.
Sem inflar o bundle
Uma tag script. Sem npm install. Não aumenta o tamanho do seu bundle JavaScript.
Funciona com SSR/SSG
Perfeito para Gatsby e outros frameworks SSR. Sem problemas de hidratação.
Compatível com LGPD por padrão
Sem rastreamento, sem cookies. Não precisa de banner de cookies. Perfeito para conformidade.
Perguntas Comuns
Funciona com Vite?
Sim! Apenas adicione a tag script ao seu arquivo index.html. Funciona perfeitamente com Vite + React.
Vai funcionar com TypeScript?
Sim! A tag script funciona com TypeScript. Não precisa de definições de tipos - é apenas uma tag script.
Funciona com Create React App?
Sim! Adicione a tag script ao seu arquivo public/index.html. Funciona com CRA, ejetado ou não.
Vai deixar minha app React lenta?
Não. Com 3KB, é 20-40 vezes menor que a maioria das bibliotecas. Carrega assincronamente e não bloqueia a renderização.
Posso usar com React Native?
Este widget é projetado para navegadores web. Para React Native, você precisaria de outra solução. Entre em contato se precisar de suporte mobile.
Pronto para Adicionar Chat à Sua App React?
Cadastre-se grátis e tenha seu widget de chat funcionando em 2 minutos. Sem cartão de crédito.