No se admite ninguna personalización aplicada a la IU del widget del SDK web más allá de las que se documentan aquí, y podría generar un comportamiento inesperado. Google recomienda usar el SDK sin interfaz gráfica si necesitas personalizaciones más avanzadas.
Para asegurarte de que las personalizaciones de tu tema aparezcan como se espera, Google recomienda que pruebes los cambios en un entorno de pruebas antes de implementarlos en producción.
Diseño del selector
Se pueden personalizar el ícono, el tamaño, la posición y el color del selector.
Launcher
Ícono de abrir
Ícono de cierre
Íconos
Si la IU del selector predeterminado no coincide con tu desarrollo de la marca, puedes personalizar los íconos del selector con tu propio archivo SVG. No puedes agregar una URL al archivo SVG, debe ser el archivo SVG en sí.
ccaas.config({
launcherOpenIcon: '<svg ....>',
launcherCloseIcon: '<svg ....>',
})
Tamaño
El ancho y la altura predeterminados del selector son 80px. Puedes cambiarlo a un tamaño diferente:
#ccaas-widget {
--launcher-size: 60px;
}
Estados de las interacciones
Los colores del borde, el fondo y el primer plano del selector se configuran según el estado de interacción: predeterminado, con el cursor encima, enfocado y activo. Cada estado tiene
su propio conjunto de variables de CSS, y todas comparten el mismo patrón de nombres:
--launcher-{state}-{property}.
Personalización del borde del selector
Puedes personalizar las siguientes opciones para el borde del selector:
- Borde (color, ancho y estilo, que se configuran juntos con la abreviatura de borde de CSS, por estado de interacción)
- Sombra paralela (aumentar o disminuir)
El borde del selector se configura por estado de interacción con la propiedad abreviada border de CSS. No hay una variable independiente para el color o el ancho del borde.
--launcher-default-border
--launcher-hover-border
--launcher-focus-border
--launcher-active-border
--launcher-shadow
Colores del Selector
De forma predeterminada, el selector usa el color de los elementos destacados.
#ccaas-widget {
--launcher-default-border: 6px solid var(--accent-9);
--launcher-default-background: var(--accent-9);
--launcher-default-color: var(--accent-contrast);
}
El mismo patrón se aplica a los estados de desplazamiento, enfoque y activo (cada uno con su propia variable *-border, *-background y *-color). Las cuatro variables *-border se enumeraron en la sección Personalización del borde del selector. Las ocho variables de estado restantes
en segundo y primer plano son las siguientes:
--launcher-default-background
--launcher-default-color
--launcher-hover-background
--launcher-hover-color
--launcher-focus-background
--launcher-focus-color
--launcher-active-background
--launcher-active-color
Puedes personalizar el selector para que use un color diferente. Por ejemplo:
#ccaas-widget {
--launcher-default-border: 6px solid var(--green-10);
--launcher-default-background: var(--blue-10);
--launcher-default-color: white;
}
Para aplicar diseño a los estados de desplazamiento, enfoque y activo del selector, repite el patrón con el prefijo de estado correspondiente:
#ccaas-widget {
--launcher-hover-background: var(--blue-11);
--launcher-focus-background: var(--blue-11);
--launcher-active-background: var(--blue-11);
}
Inhabilitar el selector
Por motivos estéticos, es posible que quieras ocultar el selector del SDK web y, en su lugar,
optar por usar un activador de chat proactivo o iniciar el chat de forma programática. Puedes
ocultar o inhabilitar la IU del selector con disableLauncher:
ccaas.config({
disableLauncher: true
})
Cuando el selector está inhabilitado, puedes abrir el widget con lo siguiente:
ccaas.show()
Diseño del widget
Widget
Logotipo
Fuentes
Seleccionar diferentes fuentes para tu interfaz de usuario
--font-en: Roboto, Verdana, Helvetica Neue
--font-zh: PingFang SC, Hiragino Sans GB, Droid Sans Fallback, Microsoft YaHei
--font-ja: Hiragino Sans, Meiryo
Color de los elementos destacados
Puedes personalizar el color de los elementos destacados color seleccionando una opción de color predefinida con la siguiente configuración:
ccaas.config({
accent: 'green',
})
Los colores predefinidos incluyen default, blue, green, purple, orange, yellow, gold y red.
Personalización del acento
Si las opciones predefinidas no se adaptan a tus necesidades empresariales, puedes personalizar el estilo con las variables de CSS.
#ccaas-widget {
--accent-1: #fbfdff;
--accent-2: #f4faff;
--accent-3: #e6f4fe;
--accent-4: #d5efff;
--accent-5: #c2e5ff;
--accent-6: #acd8fc;
--accent-7: #8ec8f6;
--accent-8: #5eb1ef;
--accent-9: #0090ff;
--accent-10: #0588f0;
--accent-11: #0d74ce;
--accent-12: #113264;
--accent-contrast: white;
--chat-input-selection-color: var(--accent-11);
}
Los 12 pasos de acento siguen el modelo de escala de colores de la IU de Radix. Los acentos predefinidos (default, blue, green, purple, orange, yellow, gold, red) provienen de esta escala y están listos para usarse con la configuración de accent. Para cualquier otra escala con nombre
en el sitio de Radix Colors (mint, crimson, cyan), copia su paleta de 12 pasos
en los valores de --accent-1 a --accent-12.
Posición
Si el punto de activación es #ccaas-widget, puedes actualizar la posición del widget con lo siguiente:
#ccaas-widget {
--ujet-right: 20px;
--ujet-bottom: 10px;
}
Logotipo
Elige un logo personalizado para que aparezca en el widget.
ccaas.config({
logo: 'https://example.com/logo.png'
})
Personalización del borde del widget
Puedes personalizar las siguientes opciones para el borde del widget:
- Color del borde
- Ancho del borde
- Sombra paralela (aumentar o disminuir)
--widget-border-color
--widget-border-width
--widget-shadow
Ocultar el borde del logotipo del agente
Si el punto de activación es #ccaas-widget, puedes ocultar el borde del logotipo del agente con
la siguiente muestra de código:
#ccaas-widget {
--head-logo-shadow: none;
}
Componentes varios
Además de los colores de los elementos destacados y la posición, el widget del SDK de Web proporciona más variables de CSS para configurar algunos de los otros componentes que se usan en el widget.
Si el punto de activación es #ccaas-widget, puedes personalizarlos con la
siguiente muestra de código:
#ccaas-widget {
--variable-name: value;
}
En la siguiente sección, se enumeran las variables de CSS disponibles para cada componente.
Variables generales de CSS
--text-font: Es la familia de fuentes de texto predeterminada.
--text-color: Es el color predeterminado del texto.
--end-color: Color predeterminado de los botones de finalización (finalizar chat, salir del chat, finalizar navegación conjunta)
Ícono de confirmación
Se puede personalizar el ícono de confirmación que aparece en varias páginas del SDK. Puedes reemplazar el ícono predeterminado por uno personalizado y controlar el tamaño y el color.
--confirmation-icon-size
--confirmation-icon-color
Botones
Puedes controlar de forma detallada la personalización de los diferentes tipos de botones. En la siguiente tabla, se explica el comportamiento esperado cuando se personalizan diferentes tipos de botones en combinación.
| Se aplicaron las personalizaciones de los botones | Resultado |
| Ninguno | Comportamiento predeterminado (todos los estilos de botones aparecen según el tema principal) |
| Personalizaciones generales de los botones | Todos los botones (excepto los diálogos y las pantallas de chat) aparecen según las personalizaciones que estableció el cliente. Esto incluye los botones de menú.
Si NO se especifica ninguna variable de personalización general de los botones, se aplica el comportamiento predeterminado. |
| Personalizaciones del botón de menú
Personalizaciones de los botones del diálogo |
Los botones de menú aparecen según la variable --menu-button.
Los botones de diálogo aparecen según las variables Si NO se especifica ninguna variable de personalización de botones de menú o diálogo, se aplica el comportamiento predeterminado. |
| Personalizaciones generales de los botones
Personalización del botón de menú Personalizaciones de los botones del diálogo |
Los botones de menú aparecen según la variable --menu-button
Los botones del diálogo aparecen según las variables Los botones que NO son de menú ni de diálogo aparecen según las personalizaciones generales. Si NO se especifica ninguna variable de personalización de botones generales, de menú o de diálogo, se aplica el comportamiento predeterminado para ese botón. |
Botones generales
Todos los demás botones del SDK que no tienen sus propias variables de CSS usan la configuración y personalización de botones generales.
--general-button-default-background
--general-button-default-border
--general-button-default-color
--general-button-default-outline
--general-button-hover-background
--general-button-hover-border
--general-button-hover-color
--general-button-hover-outline
--general-button-active-background
--general-button-active-border
--general-button-active-color
--general-button-active-outline
--general-button-focus-background
--general-button-focus-border
--general-button-focus-color
--general-button-focus-outline
Botón principal
--primary-button-default-background
--primary-button-default-color
--primary-button-focus-background
--primary-button-focus-color
--primary-button-hover-background
--primary-button-hover-color
--primary-button-active-background
--primary-button-active-color
--primary-button-disabled-background
--primary-button-disabled-color
Botones secundarios
--secondary-button-default-background
--secondary-button-default-border
--secondary-button-default-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color
Botones secundarios (inversos)
--inverse-button-default-background
--inverse-button-default-border
--inverse-button-default-outline
--inverse-button-default-color
--inverse-button-hover-background
--inverse-button-hover-border
--inverse-button-hover-outline
--inverse-button-hover-color
--inverse-button-active-background
--inverse-button-active-border
--inverse-button-active-outline
--inverse-button-active-color
--inverse-button-disabled-background
--inverse-button-disabled-border
--inverse-button-disabled-color
--inverse-button-focus-background
--inverse-button-focus-border
--inverse-button-focus-outline
--inverse-button-focus-color
Botones de menú
Por ejemplo, la selección de colas y de canales.
--menu-button-default-background
--menu-button-default-border
--menu-button-default-color
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-color
--menu-button-hover-outline
--menu-button-active-background
--menu-button-active-border
--menu-button-active-color
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-color
--menu-button-focus-outline
Botones de diálogo
Por ejemplo, ventanas modales o emergentes.
--dialog-background
--dialog-color
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-color
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-color
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-color
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-color
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-color
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-color
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-color
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-color
--dialog-secondary-button-active-outline
Encabezado del chat
--options-menu-icon-default-color
--options-menu-icon-hover-color
--options-menu-icon-active-color
--options-menu-icon-default-background
--options-menu-icon-hover-background
--options-menu-icon-active-background
--options-menu-icon-focus-background
Silenciar chat
ccaas.config({
enableMuteChat: true,
})
Burbuja de chat
--chat-bubble-background
--chat-bubble-border
--chat-bubble-text
--chat-bubble-line-height
--chat-bubble-agent-background
--chat-bubble-agent-color
--chat-bubble-agent-border
--chat-bubble-agent-border-radius
--chat-bubble-user-background
--chat-bubble-user-color
--chat-bubble-user-border
--chat-bubble-user-border-radius
Personalización de la burbuja de chat
Mensaje:
--message-event-general-font
--message-event-general-font-size
--message-event-general-font-weight
--message-event-general-color
--message-event-error-font
--message-event-error-font-size
--message-event-error-font-weight
--message-event-error-color
--message-event-confirmation-font
--message-event-confirmation-font-size
--message-event-confirmation-font-weight
--message-event-confirmation-color
--message-progress-color
--message-button-font-family
--message-button-font-size
--message-button-default-background
--message-button-default-border
--message-button-default-color
--message-button-default-font-style
--message-button-hover-background
--message-button-hover-border
--message-button-hover-color
--message-button-hover-font-style
--message-button-focus-background
--message-button-focus-border
--message-button-focus-color
--message-button-focus-font-style
--message-button-active-background
--message-button-active-border
--message-button-active-color
--message-button-active-font-style
--message-button-disabled-background
--message-button-disabled-border
--message-button-disabled-color
--message-button-disabled-font-style
Agente virtual posterior a la sesión:
--post-session-background
--post-session-padding
Vínculo del formulario personalizado:
--form-card-background
--form-card-title-color
--form-card-status-color
--form-card-subtitle-color
--form-card-image-height
--form-card-title-font-size
--form-card-title-font-weight
--form-card-border-radius
--form-card-subtitle-font-weight
--form-card-subtitle-font-size
Formulario personalizado:
--form-title-font-size
--form-title-font-weight
--form-title-color
--form-title-font-style
--form-header-font-size
--form-header-font-weight
--form-header-color
--form-header-font-style
--form-footer-font-size
--form-footer-font-weight
--form-footer-color
--form-footer-font-style
--form-field-border-radius
--form-field-cursor-color
--form-field-label-font-size
--form-field-label-font-weight
--form-field-label-color
--form-field-label-font-style
--form-field-active-border-color
--form-field-active-border-width
--form-field-inactive-border-color
--form-field-inactive-border-width
--form-field-list-selection-checkbox-color