Personalización de la interfaz del widget

Cómo funciona la personalización

El widget externo de REDA AI se renderiza dentro de un Shadow DOM, lo que significa que el CSS de tu sitio web no puede alcanzar el interior del widget y los estilos del widget no pueden afectar a tu página. Toda la personalización se realiza agregando atributos data-* a la etiqueta <script> de inserción.

Configuración de la definición de agente

Algunos ajustes de apariencia provienen del registro de Definición de agente en Salesforce, no del código de inserción:

Atributos obligatorios

Estilo de la burbuja

La burbuja es el botón flotante en el que los visitantes hacen clic para abrir el chat. Puedes mostrarla como un círculo (predeterminado) o como un botón con forma de píldora con una etiqueta de texto.

data-bubble-style="pill"
data-bubble-label="Ask REDA AI"

Estilo del encabezado

El encabezado aparece en la parte superior del panel de chat. Elige entre un encabezado con color (fondo con el color de tu marca) o un encabezado minimalista (fondo blanco y limpio).

data-header-style="minimal"

Hero de bienvenida

El hero de bienvenida es una sección con la marca que se muestra en el panel de chat. Muestra un avatar o ícono, un título grande y un subtexto opcional — creando una primera impresión acogedora.

data-welcome-heading="How can {title} help?"
data-welcome-subtext="Ask me anything about your properties"

Colores

data-primary-color="#1B5E20"
data-user-msg-bg="#2E7D32"
data-bg-color="#FAFAFA"

Diseño y posición

Modo de visualización

El modo de visualización controla cómo se abre el panel de chat. La burbuja de lanzamiento siempre está presente en todos los modos — los visitantes hacen clic en ella para abrir el asistente, y el modo de visualización decide qué obtienen.

Un panel acoplado le da mucho más espacio al asistente — útil cuando las respuestas incluyen tarjetas de propiedades, fotos o comparaciones que se sienten apretadas en la tarjeta flotante.

data-display-mode="docked-right"
data-dock-width="420"

Tema

Tipografía

Comportamiento móvil

Comportamiento

Texto e internacionalización (i18n)

Todo el texto visible para el usuario en el widget se puede sustituir con fines de marca o de traducción:

Ejemplos completos

Inserción mínima (todos los valores predeterminados)

<script
  src="https://<org>.my.salesforce-sites.com/chat/resource/redaai__REDAAILoader"
  data-api-key="your-api-key"
  data-endpoint="https://<org>.my.salesforce-sites.com/chat/services/apexrest/redaai/chat/v1">
</script>

Usa todos los valores predeterminados: burbuja circular, encabezado con color, hero de bienvenida, tema claro y posición abajo a la derecha.

Burbuja píldora moderna con encabezado minimalista

<script
  src="https://<org>.my.salesforce-sites.com/chat/resource/redaai__REDAAILoader"
  data-api-key="your-api-key"
  data-endpoint="https://<org>.my.salesforce-sites.com/chat/services/apexrest/redaai/chat/v1"
  data-bubble-style="pill"
  data-bubble-label="Ask REDA AI"
  data-header-style="minimal"
  data-welcome-heading="How can {title} help?"
  data-welcome-subtext="Ask me anything about your properties">
</script>

Panel lateral acoplado

<script
  src="https://<org>.my.salesforce-sites.com/chat/resource/redaai__REDAAILoader"
  data-api-key="your-api-key"
  data-endpoint="https://<org>.my.salesforce-sites.com/chat/services/apexrest/redaai/chat/v1"
  data-display-mode="docked-right"
  data-dock-width="420"
  data-bubble-style="pill"
  data-bubble-label="Ask REDA AI"
  data-welcome-subtext="Ask me anything about your properties">
</script>

Un panel de altura completa se desliza desde el borde derecho cuando el visitante hace clic en la píldora; la página sigue siendo legible a su lado. Omite data-dock-width para que el panel se ajuste a la pantalla, o cámbialo por docked-left para acoplarlo al otro lado. Ten en cuenta que data-panel-width y data-panel-height no se aplican aquí — un panel acoplado siempre tiene altura completa, y data-dock-width define su ancho.

Colores de marca personalizados con tema oscuro

<script
  src="https://<org>.my.salesforce-sites.com/chat/resource/redaai__REDAAILoader"
  data-api-key="your-api-key"
  data-endpoint="https://<org>.my.salesforce-sites.com/chat/services/apexrest/redaai/chat/v1"
  data-theme="dark"
  data-primary-color="#6C63FF"
  data-title="Support Agent"
  data-position="bottom-left">
</script>

Encabezado con color sin hero de bienvenida

<script
  src="https://<org>.my.salesforce-sites.com/chat/resource/redaai__REDAAILoader"
  data-api-key="your-api-key"
  data-endpoint="https://<org>.my.salesforce-sites.com/chat/services/apexrest/redaai/chat/v1"
  data-bubble-style="pill"
  data-bubble-label="Chat with us"
  data-show-welcome-hero="false"
  data-primary-color="#D32F2F">
</script>

Internacionalizado (español)

<script
  src="https://<org>.my.salesforce-sites.com/chat/resource/redaai__REDAAILoader"
  data-api-key="your-api-key"
  data-endpoint="https://<org>.my.salesforce-sites.com/chat/services/apexrest/redaai/chat/v1"
  data-title="Asistente"
  data-bubble-style="pill"
  data-bubble-label="Pregunte"
  data-input-placeholder="Escribe un mensaje..."
  data-welcome-heading="¿Cómo puede {title} ayudarte?"
  data-welcome-subtext="Pregúntame sobre tu cuenta"
  data-aria-open="Abrir chat"
  data-aria-close="Cerrar chat"
  data-aria-send="Enviar mensaje"
  data-error-generic="Algo salió mal. Inténtalo de nuevo.">
</script>

Cómo probar las personalizaciones

Preguntas frecuentes

Próximos pasos

Consulta la guía Configuración del widget externo para la configuración inicial, o explora Configuración del agente de Comunidad para la implementación en el portal.