Saltar al contenido principal
Si los temas y colores del grupo no son suficientes, puedes agregar tu propio código CSS y JavaScript a un grupo de comunidad. Con CSS ajustas fuentes, espaciados y componentes para que el grupo se vea igual que tu marca. Con JavaScript agregas pequeñas interacciones o mejoras de navegación. El código se aplica solo al grupo donde lo agregas, así que puedes personalizar un grupo sin afectar a los demás.
Chateea no ofrece asesoría ni soporte para escribir, depurar o mantener código personalizado. Si usas CSS o JavaScript propio, pruébalo bien antes de publicarlo.

​
Para qué te sirve

  • Marca precisa: iguala tipografías, espaciados y estilos de botones a tu guía de marca.
  • Cambios acotados: el código afecta solo a ese grupo.
  • Publicación controlada: revisas los cambios con una vista previa antes de mostrarlos a los miembros.
  • Mejor experiencia: agregas detalles de navegación o microinteracciones con fragmentos cortos de JavaScript.
  • Ajustes para móvil: puedes definir reglas específicas para teléfonos y tabletas.

​
Agregar CSS o JavaScript a un grupo

1

Entra al grupo

Ve a Membresías → Comunidades → Grupos y haz clic en Iniciar sesión en el grupo que quieres personalizar.
2

Abre la configuración de marca

Dentro del grupo, haz clic en Configuración y abre la pestaña Marca (Branding).
3

Despliega las opciones avanzadas

Baja hasta Opciones avanzadas (Advanced Options) y haz clic para expandirlas.
4

Pega tu código

Pega tu código en los campos CSS personalizado y JavaScript personalizado.
5

Revisa la vista previa

Haz clic en Vista previa de prueba (Test Preview) para ver cómo queda. Si algo no te convence, ajusta el código y vuelve a probar.
6

Publica y guarda

Cuando estés conforme, activa el Modo en vivo (Live Mode) y haz clic en Guardar.

​
Estilos distintos para modo claro y modo oscuro

Cuando un miembro usa el modo oscuro, se aplica automáticamente la clase .dark en la raíz de la página. Úsala en tu CSS para definir estilos específicos del modo oscuro:
Evita selectores demasiado genéricos, como div:nth-of-type(2), a menos que estés seguro de que no afectan otras partes de la página. Revisa siempre el resultado en modo claro y en modo oscuro.

​
Solución de problemas

Si algo deja de funcionar en el grupo después de agregar código, primero confirma si el problema viene de tu código:
  1. Desactiva el Modo en vivo. Es la forma más rápida de apagar el código para todos.
  2. Desactiva el código solo para ti. Agrega ?customCode=false al final de la URL de la comunidad en tu navegador y presiona Enter (si la URL ya tiene parámetros, usa &customCode=false). Esto desactiva el código personalizado solo en tu sesión actual.
Si el problema desaparece con el código desactivado, tienes que revisar tu CSS o JavaScript.

​
Preguntas frecuentes

Sí. Apaga el Modo en vivo en la configuración de marca del grupo.
No. El CSS y el JavaScript se guardan por grupo y solo se aplican en el grupo donde los agregaste.
Usa la clase .dark en tus selectores. Se agrega automáticamente cuando el modo oscuro está activo.

​
Artículos relacionados

Temas de los grupos

Cambia los colores del grupo sin escribir código.

Transmisiones en vivo en comunidades

Haz reuniones y transmisiones dentro de tus grupos.
Última modificación el 29 de septiembre de 2026