Las personalizaciones que se apliquen a la IU del widget del SDK web más allá de las que se documentan aquí no son compatibles y podrían 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 del tema aparezcan como se espera, Google recomienda que pruebes los cambios en un entorno de prueba 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.
Selector
Ícono de abrir
Ícono de cerrar
Icons
Si la IU del Selector predeterminado no coincide con tu 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;
}
Personalización del borde
Puedes personalizar las siguientes opciones para el borde del Selector:
- Color del borde
- Ancho del borde
- Sombra paralela (aumentar o disminuir)
--launcher-border-color
--launcher-border-width
--launcher-shadow
Colores del Selector
De forma predeterminada, el Selector usa el color de énfasis.
{
--launcher-border-color: var(--accent-10);
--launcher-background-color: var(--accent-10);
--launcher-color: var(--accent-9-contrast);
}
Puedes personalizar el Selector para que use un color diferente. Por ejemplo:
#ccaas-widget {
--launcher-border-color: var(--green-10);
--launcher-background-color: var(--blue-10);
--launcher-color: white;
}
Inhabilitar el Selector
Por motivos estéticos, es posible que quieras ocultar el Selector del SDK web y, en su lugar, 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
Selecciona 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 énfasis
Puedes personalizar el color de énfasis seleccionando una opción de color predefinida con la siguiente configuración:
ccaas.config({
accent: 'green',
})
Los colores predefinidos incluyen blue, green, purple, orange, yellow, gold y red.
Personalización de énfasis
Si las opciones predefinidas no se adaptan a las necesidades de tu empresa, 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);
}
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'
})
Oculta el borde del logotipo del agente
Si el punto de activación es #ccaas-widget, puedes ocultar el borde del logotipo del agente con el siguiente muestra de código:
#ccaas-widget {
--head-logo-shadow: none;
}
Componentes varios
Además de los colores de énfasis y la posición, el widget del SDK web proporcionó 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 el siguiente muestra de código:
#ccaas-widget {
--variable-name: value;
}
Variables generales de CSS
--text-font: Familia de fuentes de texto predeterminada.
--text-color: Color de texto predeterminado.
--end-color: Color predeterminado de los botones finales (finalizar chat, salir del chat, finalizar la 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 un ícono 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 diferentes tipos de botones. En la siguiente tabla, se explica el comportamiento esperado cuando se personalizan diferentes tipos de botones en combinación.
| Personalizaciones de botones aplicadas | Resultado |
| Ninguno | Comportamiento predeterminado (todos los estilos de botones aparecen según el tema principal). |
| Personalizaciones generales de botones | Todos los botones (excepto las pantallas de diálogos o de chat) aparecen según las personalizaciones establecidas por el cliente. Esto incluye los botones de menú.
Si NO se especifica ninguna variable de personalización de botones generales, se aplica el comportamiento predeterminado. |
| Personalizaciones de botones de menú
Personalizaciones de botones de 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 de diálogo, se aplica el comportamiento predeterminado. |
| Personalizaciones generales de botones
Personalización de botones de menú Personalizaciones de botones de diálogo |
Los botones de menú aparecen según la variable --menu-button.
Los botones de diálogo aparecen según las variables Los botones que NO son botones 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 en todo el SDK que no tienen sus propias variables de CSS usan la configuración y la 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
Botones principales
--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-outline
--secondary-button-default-color
--secondary-button-hover-background
--secondary-button-hover-border
--secondary-button-hover-outline
--secondary-button-hover-color
--secondary-button-active-background
--secondary-button-active-border
--secondary-button-active-outline
--secondary-button-active-color
--secondary-button-disabled-background
--secondary-button-disabled-border
--secondary-button-disabled-outline
--secondary-button-disabled-color
--secondary-button-focus-background
--secondary-button-focus-border
--secondary-button-focus-outline
--secondary-button-focus-color
Botones secundarios (inversos)
--secondary-button-inverse-default-background
--secondary-button-inverse-default-border
--secondary-button-inverse-default-outline
--secondary-button-inverse-default-color
--secondary-button-inverse-hover-background
--secondary-button-inverse-hover-border
--secondary-button-inverse-hover-outline
--secondary-button-inverse-hover-color
--secondary-button-inverse-active-background
--secondary-button-inverse-active-border
--secondary-button-inverse-active-outline
--secondary-button-inverse-active-color
--secondary-button-inverse-disabled-background
--secondary-button-inverse-disabled-border
--secondary-button-inverse-disabled-outline
--secondary-button-inverse-disabled-color
--secondary-button-inverse-focus-background
--secondary-button-inverse-focus-border
--secondary-button-inverse-focus-outline
--secondary-button-inverse-focus-color
Botones de menú
Personalización de botones de menú.
--menu-button-default-background
--menu-button-default-border
--menu-button-default-text
--menu-button-default-outline
--menu-button-hover-background
--menu-button-hover-border
--menu-button-hover-text
--menu-button-active-background
--menu-button-active-border
--menu-button-active-text
--menu-button-active-outline
--menu-button-focus-background
--menu-button-focus-border
--menu-button-focus-text
--menu-button-focus-outline
Personalización de botones de menú
Botones de diálogo
Por ejemplo, modales o ventanas emergentes.
--dialog-background
--dialog-text
--dialog-primary-button-default-background
--dialog-primary-button-default-border
--dialog-primary-button-default-text
--dialog-primary-button-default-outline
--dialog-primary-button-hover-background
--dialog-primary-button-hover-border
--dialog-primary-button-hover-text
--dialog-primary-button-hover-outline
--dialog-primary-button-focus-background
--dialog-primary-button-focus-border
--dialog-primary-button-focus-text
--dialog-primary-button-focus-outline
--dialog-primary-button-active-background
--dialog-primary-button-active-border
--dialog-primary-button-active-text
--dialog-primary-button-active-outline
--dialog-secondary-button-default-background
--dialog-secondary-button-default-border
--dialog-secondary-button-default-text
--dialog-secondary-button-default-outline
--dialog-secondary-button-hover-background
--dialog-secondary-button-hover-border
--dialog-secondary-button-hover-text
--dialog-secondary-button-hover-outline
--dialog-secondary-button-focus-background
--dialog-secondary-button-focus-border
--dialog-secondary-button-focus-text
--dialog-secondary-button-focus-outline
--dialog-secondary-button-active-background
--dialog-secondary-button-active-border
--dialog-secondary-button-active-text
--dialog-secondary-button-active-outline
Encabezado del chat
--options-menu-icon-color-default
--options-menu-icon-color-hover
--options-menu-icon-color-active
--options-menu-icon-color-focus
--options-menu-icon-background-default
--options-menu-icon-background-hover
--options-menu-icon-background-active
--options-menu-icon-background-focus
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-text
--chat-bubble-agent-border-top-left
--chat-bubble-agent-border-top-right
--chat-bubble-agent-border-bottom-right
--chat-bubble-agent-border-bottom-left
--chat-bubble-user-background
--chat-bubble-user-text
--chat-bubble-user-border-top-left
--chat-bubble-user-border-top-right
--chat-bubble-user-border-bottom-right
--chat-bubble-user-border-bottom-left
### 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
--message-button-text-size
--message-button-text-color
--message-button-font-style
--message-button-default-background
--message-button-default-border
--message-button-hover-background
--message-button-focus-background
--message-button-focus-text
--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
