As personalizações aplicadas à UI do widget do SDK da Web que não estão documentadas aqui não são compatíveis e podem resultar em um comportamento inesperado. O Google recomenda o uso do SDK sem interface se você precisar de personalizações mais avançadas.
Para garantir que as personalizações do tema apareçam como esperado, o Google recomenda que você teste as mudanças em um ambiente de teste antes de implantá-las na produção.
Design do acesso rápido
O ícone, o tamanho, a posição e a cor do inicializador podem ser personalizados.
Launcher
Ícone "Abrir"
Ícone "Fechar"
Ícones
Se a interface do inicializador padrão não corresponder à sua marca, personalize os ícones do inicializador com seu próprio arquivo SVG. Não é possível adicionar um URL ao arquivo SVG. Ele precisa ser o próprio arquivo SVG.
ccaas.config({
launcherOpenIcon: '<svg ....>',
launcherCloseIcon: '<svg ....>',
})
Tamanho
A largura e a altura padrão do acesso rápido são 80px. Você pode mudar para um
tamanho diferente:
#ccaas-widget {
--launcher-size: 60px;
}
Estados de interação
As cores da borda, do plano de fundo e do primeiro plano do inicializador são configuradas por
estado de interação: padrão, ao passar o cursor, em foco e ativo. Cada estado tem
o próprio conjunto de variáveis CSS, todas com o mesmo padrão de nomenclatura:
--launcher-{state}-{property}.
Personalização da borda do acesso rápido
É possível personalizar as seguintes opções para a borda do acesso rápido:
- Borda (cor, largura e estilo, definidos juntos usando a abreviação de borda CSS, por estado de interação).
- Sombra projetada (aumentar ou diminuir).
A borda do inicializador é configurada por estado de interação usando a abreviação de borda CSS. Não há uma variável separada para a cor ou a largura da borda.
--launcher-default-border
--launcher-hover-border
--launcher-focus-border
--launcher-active-border
--launcher-shadow
Cores do acesso rápido
Por padrão, o acesso rápido usa a cor de destaque.
#ccaas-widget {
--launcher-default-border: 6px solid var(--accent-9);
--launcher-default-background: var(--accent-9);
--launcher-default-color: var(--accent-contrast);
}
O mesmo padrão se aplica aos estados de passar o cursor, foco e ativo (cada um com
as próprias variáveis *-border, *-background e *-color). As quatro
variáveis *-border foram listadas na seção Personalização da borda
do acesso rápido. As outras oito variáveis de estado
em segundo e primeiro plano são:
--launcher-default-background
--launcher-default-color
--launcher-hover-background
--launcher-hover-color
--launcher-focus-background
--launcher-focus-color
--launcher-active-background
--launcher-active-color
É possível personalizar o acesso rápido para usar uma cor diferente. Exemplo:
#ccaas-widget {
--launcher-default-border: 6px solid var(--green-10);
--launcher-default-background: var(--blue-10);
--launcher-default-color: white;
}
Para estilizar os estados de passagem, foco e ativo do inicializador, repita o padrão com o prefixo de estado correspondente:
#ccaas-widget {
--launcher-hover-background: var(--blue-11);
--launcher-focus-background: var(--blue-11);
--launcher-active-background: var(--blue-11);
}
Desativar o acesso rápido
Por motivos estéticos, talvez você queira ocultar o inicializador do SDK da Web e usar um acionador de chat proativo ou iniciar o chat de forma programática. É
possível ocultar ou desativar a interface do inicializador usando disableLauncher:
ccaas.config({
disableLauncher: true
})
Quando o inicializador está desativado, você pode abrir o widget com:
ccaas.show()
Design do widget
Widget
Logotipo
Fontes
Selecione fontes diferentes para a interface do usuário.
--font-en: Roboto, Verdana, Helvetica Neue
--font-zh: PingFang SC, Hiragino Sans GB, Droid Sans Fallback, Microsoft YaHei
--font-ja: Hiragino Sans, Meiryo
Cor de destaque
É possível personalizar o destaque color selecionando uma opção de cor predefinida
com a seguinte configuração:
ccaas.config({
accent: 'green',
})
As cores predefinidas incluem default, blue, green, purple, orange, yellow, gold,
red.
Personalização de sotaque
Se as opções predefinidas não atenderem às necessidades da sua empresa, personalize o estilo com as variáveis 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);
}
As 12 etapas de destaque seguem o modelo de escala de cores da interface do Radix. As cores de destaque predefinidas (default, blue, green, purple, orange, yellow, gold, red) vêm dessa escala e estão prontas para uso com a configuração accent. Para qualquer outra escala
nomeada no site do Radix Colors (mint, crimson, cyan), copie a paleta de 12 etapas
para os valores de --accent-1 a --accent-12.
Posição
Se o ponto de montagem for #ccaas-widget, você poderá atualizar a posição do widget usando:
#ccaas-widget {
--ujet-right: 20px;
--ujet-bottom: 10px;
}
Logotipo
Escolha um logo personalizado para aparecer no widget.
ccaas.config({
logo: 'https://example.com/logo.png'
})
Personalização da borda do widget
É possível personalizar as seguintes opções para a borda do widget:
- Cor da borda
- Largura da borda
- Sombra projetada (aumentar ou diminuir)
--widget-border-color
--widget-border-width
--widget-shadow
Ocultar a borda do logotipo do agente
Se o ponto de montagem for #ccaas-widget, use o exemplo de código a seguir para ocultar a borda do logotipo do agente:
#ccaas-widget {
--head-logo-shadow: none;
}
Componentes diversos
Além das cores de destaque e da posição, o widget do SDK da Web forneceu mais variáveis CSS para configurar alguns dos outros componentes usados no widget.
Se o ponto de montagem for #ccaas-widget, será possível personalizá-lo usando o
seguinte exemplo de código:
#ccaas-widget {
--variable-name: value;
}
As variáveis CSS disponíveis para cada componente estão listadas na próxima seção.
Variáveis gerais de CSS
--text-font: Família de fontes de texto padrão.
--text-color: Cor padrão do texto.
--end-color: Cor padrão dos botões de encerramento (encerrar chat, sair do chat, encerrar navegação conjunta)
Ícone de confirmação
O ícone de confirmação que aparece em várias páginas do SDK pode ser personalizado. Você pode substituir o ícone padrão por um ícone personalizado e controlar o tamanho e a cor.
--confirmation-icon-size
--confirmation-icon-color
Botões
É possível controlar de forma granular a personalização de diferentes tipos de botão. A tabela a seguir explica o comportamento esperado ao personalizar diferentes tipos de botões em combinação.
| Personalizações de botões aplicadas | Result |
| Nenhum | Comportamento padrão (todos os estilos de botão aparecem de acordo com o tema principal). |
| Personalizações gerais de botões | Todos os botões (exceto as telas de caixas de diálogo/chat) aparecem de acordo com as personalizações definidas pelo cliente. Isso inclui os botões de menu.
Se alguma variável de personalização geral do botão NÃO for especificada, o comportamento padrão será aplicado. |
| Personalizações do botão de menu
Personalizações de botões de caixa de diálogo |
Os botões de menu aparecem de acordo com a variável --menu-button.
Os botões de caixa de diálogo aparecem de acordo com as variáveis Se alguma variável de personalização do botão de menu / caixa de diálogo NÃO for especificada, o comportamento padrão será aplicado. |
| Personalizações gerais de botões
Personalização do botão de menu Personalizações de botões de caixa de diálogo |
Os botões de menu aparecem de acordo com a variável --menu-button
Os botões da caixa de diálogo aparecem de acordo com as variáveis Os botões que NÃO são de menu ou de caixa de diálogo aparecem de acordo com as personalizações gerais. Se alguma variável de personalização de botão geral / de menu / de caixa de diálogo NÃO for especificada, o comportamento padrão será aplicado a esse botão. |
Botões gerais
Todos os outros botões do SDK que não têm as próprias variáveis CSS usam a configuração e a personalização do botão geral.
--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ão 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
Botões secundários
--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
Botões secundários (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
Botões de menu
Por exemplo, seleção de fila e de canal.
--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
Botões de caixa de diálogo
Por exemplo, modais ou pop-ups.
--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
Cabeçalho do 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,
})
Balão de diálogo
--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
Personalização do balão de diálogo
Mensagem:
--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 pós-sessão:
--post-session-background
--post-session-padding
Link do formulário 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
Formulário 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