No se admiten las personalizaciones que se apliquen a la IU del widget del SDK web más allá de las que se documentan aquí y podrían generar un comportamiento inesperado. Google recomienda usar el SDK sin encabezado si necesitas personalizaciones más avanzadas.
Para asegurarte de que las personalizaciones de tu tema aparezcan según lo previsto, 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.
Launcher
Ícono de abrir
Ícono de cierre
Íconos
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 de bordes
Puedes personalizar las siguientes opciones del 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;
}
Inhabilita el selector
Por motivos estéticos, es posible que desees 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 las siguientes opciones:
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 los elementos destacados
Puedes personalizar el color de énfasis color 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 del acento
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 el siguiente comando:
#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 la 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 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 personalizarlo con la 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 de finalización (finalizar chat, salir del chat, finalizar la navegación conjunta)
Ícono de confirmación
El ícono de confirmación que aparece en varias páginas del SDK se puede personalizar. Puedes reemplazar el ícono predeterminado por uno personalizado y controlar su tamaño y 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 los diálogos y las pantallas 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 del botón general, se aplica el comportamiento predeterminado. |
| Personalizaciones del botón 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 diálogo, se aplica el comportamiento predeterminado. |
| Personalizaciones generales de botones
Personalización del botón 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ú o botones de diálogo aparecen según las personalizaciones generales. Si NO se especifica ninguna variable de personalización general, 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 CSS usan la configuración y personalización del botón general.
--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 del botón 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 del botón de menú
Botones de diálogo
Por ejemplo, ventanas emergentes o modales.
--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
