Tematización y personalización

El sistema de temas de AI Anywhere te permite personalizar cómo se ve y se siente tu Asistente. Desde los colores de los botones hasta las fuentes, puedes hacer que el Asistente se integre perfectamente con el diseño de tu sitio o que resalte con los colores de tu marca. Puedes diseñar tus propios modos claro y oscuro personalizando colores y estilos para que coincidan con la apariencia de tu sitio.

Personalización del color del botón

El color del botón del Asistente es una de las opciones de personalización más visibles. Puedes configurarlo para que coincida con tu marca o tema del sitio.

Configuración del color del botón

En la configuración de tu Asistente en el panel de control, navega a la configuración de Tema. Aquí puedes establecer el color principal del botón usando:

• Selector de color: Elige un color visualmente desde la interfaz del selector de color
• Código hex: Introduce un código de color hex específico (por ejemplo, #4B0076 para morado, #007bff para azul)
• Valores RGB: Especifica valores RGB si lo prefieres (se convierten automáticamente a hex)

/* Ejemplo: Configuración del color del botón a morado de la marca */
Color del botón: #4B0076

Color de la etiqueta

El color del texto de la etiqueta (el texto que aparece en el botón) se ajusta automáticamente para el contraste según el color de tu botón. Si tu botón es oscuro, el texto será claro; si es claro, el texto será oscuro. Esto asegura la legibilidad mientras mantiene la estética elegida.

Creación de modos claro y oscuro

Aunque AI Anywhere no incluye un modo oscuro preconstruido, puedes diseñar tus propias implementaciones de temas claro y oscuro personalizando los colores de los botones, los colores del texto y otras opciones de estilo para que coincidan con el diseño de tu sitio.

Diseño del modo oscuro

Para crear una apariencia de modo oscuro para tu Asistente:

• Usa colores de botón más oscuros: Elige colores oscuros (por ejemplo, #1a1a1a, #2d3748) para sitios con tema oscuro
• Ajusta los colores del texto: Asegura un contraste adecuado para la legibilidad - botones oscuros con texto claro, o personaliza los colores de las etiquetas
• Coincide con tu sitio\ Selecciona colores que se alineen con tu esquema de color de modo oscuro

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>

El color del botón que configures determinará la apariencia. Usa colores más oscuros para modos oscuros, colores más claros para modos claros.

Personalización de la Familia de Fuentes

Puedes personalizar la familia de fuentes utilizada por el Asistente para que coincida con tu sitio\

Configuración de la Familia de Fuentes

En la configuración de tu Asistente en el panel de control, navega a la configuración de Tema donde puedes seleccionar entre una variedad de familias de fuentes, incluyendo:

• Fuentes seguras para la web (Arial, Helvetica, Georgia, Times New Roman)
• Fuentes modernas sans-serif (Inter, Roboto, Open Sans, Lato)
• Fuentes serif (Merriweather, Playfair Display)

El Asistente usará la familia de fuentes seleccionada para todos los elementos de texto, asegurando la consistencia visual con tu sitio\

Estilos de Botones: Redondeados vs. Cuadrados

Elige entre estilos de botones redondeados (en forma de píldora) y cuadrados para que coincidan con tu sitio\

Botones Redondeados

Los botones redondeados tienen esquinas completamente redondeadas, dándoles una apariencia moderna y amigable. Este estilo funciona bien con diseños contemporáneos y estéticas de marca más suaves.

Botones Cuadrados

Los botones cuadrados tienen esquinas afiladas y mínimas que se alinean con diseños más geométricos y estructurados. Transmiten una sensación profesional y corporativa.

Ejemplos de Códigos de Color

Aquí tienes algunos códigos de color comunes que podrías usar:

• Púrpura: #4B0076 (Predeterminado de AI Anywhere)
• Azul: #007bff
• Verde: #28a745
• Rojo: #dc3545
• Amarillo: #ffc107
• Gris: #6c757d

Mejores Prácticas de Diseño

Previsualizar Antes de Desplegar

Antes de hacer que tu Asistente esté en vivo, utiliza la función de previsualización en tu panel de control para ver exactamente cómo se verán tus personalizaciones. Esto te ayuda a:

• Verificar que las elecciones de color coincidan con tu marca
• Verifica la legibilidad y el contraste
• Asegúrate de que el estilo del botón se ajuste a tu sitio\
• Prueba tus diseños personalizados de modo claro y oscuro si es aplicable

Recuerda: Después de realizar cambios de tema en tu configuración de Asistente, regenera tu fragmento para obtener el código actualizado con tus nuevos ajustes de tema, luego actualiza tu sitio con el nuevo fragmento.