Widget de Chat para React
Instala un widget de chat ligero de 3KB en tu app React en 2 minutos.
Sin rastreo. Sin cookies. Sin dependencias.
Instalación Rápida (2 Minutos)
- 1.
Regístrate gratis y obtén tu Site ID desde el panel.
Registrarse Gratis → - 2.
Añade la etiqueta script a tu archivo HTML.
Para Create React App:
public/index.htmlPara Vite:
index.htmlPara Gatsby:
gatsby-ssr.js - 3.
Pega este código antes de la etiqueta de cierre
</body>:<script src="https://api.thechatwidget.com/widget.js" data-site="YOUR_SITE_ID" defer></script> - ✓
¡Listo! El widget aparece en todas las páginas automáticamente.
Instrucciones por Framework
¿Usas Next.js? Consulta nuestra guía dedicada Widget de Chat para Next.js →
Create React App (public/index.html)
Añade directamente a tu archivo 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)
Añade directamente a tu archivo index.html raíz.
<!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)
Añade a tu archivo gatsby-ssr.js en el directorio raíz.
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 Qué Elegir Esto Sobre Librerías de Chat de React?
3KB vs paquetes npm pesados
La mayoría de librerías de chat React son 50-200KB+ y aumentan tu bundle. Esto se carga externamente.
Sin inflar el bundle
Una etiqueta script. Sin npm install. No aumenta el tamaño de tu bundle JavaScript.
Funciona con SSR/SSG
Perfecto para Gatsby y otros frameworks SSR. Sin problemas de hidratación.
Compatible con RGPD por defecto
Sin rastreo, sin cookies. No necesitas banner de cookies. Perfecto para cumplimiento en la UE.
Preguntas Comunes
¿Funciona con Vite?
¡Sí! Solo añade la etiqueta script a tu archivo index.html. Funciona perfectamente con Vite + React.
¿Funcionará con TypeScript?
¡Sí! La etiqueta script funciona con TypeScript. No necesitas definiciones de tipos - es solo una etiqueta script.
¿Funciona con Create React App?
¡Sí! Añade la etiqueta script a tu archivo public/index.html. Funciona con CRA, expulsado o no.
¿Ralentizará mi app React?
No. Con 3KB, es 20-40 veces más pequeño que la mayoría de librerías de chat. Carga asíncronamente y no bloquea el renderizado.
¿Puedo usarlo con React Native?
Este widget está diseñado para navegadores web. Para React Native, necesitarías una solución diferente. Contáctanos si necesitas soporte para apps móviles.
¿Listo para Añadir Chat a tu App React?
Regístrate gratis y ten tu widget de chat funcionando en 2 minutos. Sin tarjeta de crédito.