Personalizações aplicadas à UI do widget do SDK da Web além das documentadas aqui não são compatíveis e podem resultar em comportamento inesperado. O Google recomenda usar o SDK sem interface gráfica se você precisar de personalizações mais avançadas.
Para garantir que as personalizações do tema apareçam conforme o esperado, o Google recomenda testar 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 iniciador podem ser personalizados.
Launcher
Ícone "Abrir"
Ícone "Fechar"
Ícones
Se a interface do usuário do iniciador padrão não corresponder à sua marca, personalize os ícones do iniciador com seu próprio arquivo SVG. Não é possível adicionar um URL ao arquivo SVG. Ele precisa ser o arquivo SVG em si.
ccaas.config({ launcherOpenIcon: '<svg ....>', launcherCloseIcon: '<svg ....>',})
Tamanho
A largura e a altura padrão da tela de início são 80px. Você pode mudar para um
tamanho diferente:
#ccaas-widget {
--launcher-size: 60px;
}
Personalização da borda
É possível personalizar as seguintes opções para a borda do iniciador:
- Cor da borda
- Largura da borda
- Sombra projetada (aumentar ou diminuir)
--launcher-border-color
--launcher-border-width
--launcher-shadow
Cores da tela de início
Por padrão, a tela de início usa a cor de destaque.
{
--launcher-border-color: var(--accent-10);
--launcher-background-color: var(--accent-10);
--launcher-color: var(--accent-9-contrast);
}
É possível personalizar o iniciador para usar uma cor diferente. Exemplo:
#ccaas-widget {
--launcher-border-color: var(--green-10);
--launcher-background-color: var(--blue-10);
--launcher-color: white;
}
Desativar o iniciador
Por motivos estéticos, talvez você queira ocultar o iniciador do SDK da Web e usar um gatilho de chat proativo ou iniciar o chat de forma programática. É possível ocultar ou desativar a interface do iniciador usando disableLauncher:
ccaas.config({
disableLauncher: true
})
Quando o acesso rápido aos apps está desativado, é possível abrir o widget com:
ccaas.show()
Design de 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
usando a seguinte configuração:
ccaas.config({
accent: 'green',
})
As cores predefinidas incluem 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);
}
Cargo
Se o ponto de montagem for #ccaas-widget, atualize 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'
})
Ocultar a borda do logotipo do agente
Se o ponto de montagem for #ccaas-widget, você poderá ocultar a borda do logotipo do agente usando o exemplo de código a seguir:
#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 de CSS para configurar alguns dos outros componentes usados no widget.
Se o ponto de montagem for #ccaas-widget, você poderá personalizá-los usando o seguinte exemplo de código:
#ccaas-widget {
--variable-name: value;
}
Variáveis gerais de CSS
--text-font: Família de fontes de texto padrão.
--text-color: Cor do texto padrão.
--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 personalizado e controlar o tamanho e a cor.
--confirmation-icon-size
--confirmation-icon-color
botões
Você pode controlar de forma granular a personalização de diferentes tipos de botões. 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 caixas de diálogo/telas de chat) aparecem de acordo com as personalizações definidas pelo cliente. Isso inclui botões de menu.
Se uma variável de personalização de botão geral 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 uma variável de personalização de 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 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 uma variável de personalização de botão geral / menu / 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 em todo o SDK que não têm variáveis CSS próprias 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ões principais
--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-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
Botões secundários (inverso)
--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
Botões de menu
Personalização do botão de menu.
--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
Personalização do botão de menu
Botões de caixa de diálogo
Por exemplo, modais ou pop-ups.
--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
Cabeçalho do 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
Desativar som do chat
ccaas.config({
enableMuteChat: true,
})
Balão 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
### 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
--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 pós-sessão
--post-session-background
--post-session-padding
