saltar al contenido principal
Explorar la documentación

Tematizar el widget

El widget se adapta a tu marca automáticamente, con control total cuando lo quieras.

El widget está diseñado para parecer parte de tu producto desde el primer momento, a la vez que te da un control preciso cuando lo quieras.

Tematización automática

Al cargar, el widget lee el sistema de diseño de tu sitio —reconoce shadcn/ui, MUI, Chakra, Mantine, daisyUI, Radix Themes, Tailwind y Open Props— y adopta tus colores, fuentes, radio y más. Si no puede detectar un sistema, recurre a la fuente del cuerpo y a tus colores dominantes.

Tokens de tema

Todo se rige por propiedades personalizadas CSS con espacio de nombres --syncanix-* para color, tipografía, forma, elevación y movimiento. El widget usa propiedades CSS lógicas en todo momento, de modo que se dispone correctamente tanto de izquierda a derecha como de derecha a izquierda.

Claro y oscuro

Un diseño «detectado» deriva un esquema claro y otro oscuro a partir de tu sitio en vivo, preservando el tono de tu marca. Por último se aplica un piso de contraste WCAG-AA, de modo que el texto se mantiene legible sea cual sea tu paleta.

Diséñalo en el panel

Para un control total —varios diseños, anulaciones por tamaño, el lanzador, CSS personalizado— usa el Estudio de Diseño del Widget, donde diseñas contra el widget real como un lienzo en vivo.

Próximos pasos