Você pode personalizar o estilo da caixa de diálogo de chat definindo variáveis CSS.
Estilo geral
As seguintes variáveis CSS oferecem opções gerais de estilo:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes para usar em todo o widget |
df-messenger-font-size |
Opcional | 14px | Tamanho do texto a ser usado em todo o widget |
df-messenger-font-color |
Opcional | #1f1f1f | Cor do texto para usar em todo o widget |
df-messenger-primary-color |
Opcional | #0b57d0 | Cor principal dos elementos em todo o widget, como o plano de fundo da barra de título, do botão de ação e muito mais |
df-messenger-focus-color |
Opcional | #1e88e5 | Cor do anel de foco ao redor dos elementos |
df-messenger-focus-color-contrast |
Opcional | branco | Cor do anel de foco em torno dos elementos quando dentro de um pai com uma cor de plano de fundo (como a barra de título) |
df-messenger-chat-border |
Opcional | nenhum | Borda da caixa de diálogo |
df-messenger-chat-border-radius |
Opcional | 0 | Raio da borda da caixa de diálogo |
Estilo para df-messenger-chat-bubble
Ao usar o elemento df-messenger-chat-bubble, as seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-chat-window-height |
Opcional | 480px | Altura da janela de chat |
df-messenger-chat-window-width |
Opcional | 320px | Largura da janela de chat |
df-messenger-chat-window-offset |
Opcional | 16 px | A distância entre o balão do chat e a janela do chat |
df-messenger-chat-window-box-shadow |
Opcional | nenhum | Sombra da caixa da janela de chat |
df-messenger-chat-collapse-icon-size |
Opcional | indefinido | Tamanho do ícone do botão de recolhimento na barra de título |
df-messenger-chat-bubble-icon-size |
Opcional | 36 px | Tamanho do ícone do balão de chat |
df-messenger-chat-bubble-close-icon-size |
Opcional | 24px | Tamanho do ícone de fechamento do balão do chat |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opcional | -90deg | Rotação do ícone "Fechar" do balão do chat, gira para 0deg ao fechar o chat |
df-messenger-chat-bubble-icon-color |
Opcional | branco | Cor do ícone e do ícone "Fechar" do balão do chat |
df-messenger-chat-bubble-size |
Opcional | 64px | Tamanho do balão do chat |
df-messenger-chat-bubble-background |
Opcional | #0b57d0 | Plano de fundo do balão do chat |
df-messenger-chat-bubble-border-radius |
Opcional | 32px | Raio da borda do balão do chat |
df-messenger-chat-bubble-border |
Opcional | nenhum | Borda do balão do chat |
df-messenger-chat-border-minimized |
Opcional | nenhum | Borda do chat minimizada |
df-messenger-chat-border-radius-minimized |
Opcional | 0 | Raio da borda do chat minimizado |
Estilo da barra de títulos
Para a barra de título, as seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-titlebar-background |
Opcional | #0b57d0 | Plano de fundo da barra de título |
df-messenger-titlebar-padding |
Opcional | 0 15px | Padding da barra de título |
df-messenger-titlebar-border |
Opcional | nenhum | Borda da barra de título |
df-messenger-titlebar-border-bottom |
Opcional | nenhum | Borda inferior da barra de título |
df-messenger-titlebar-title-align |
Opcional | início | Alinhamento do texto dos títulos na barra. Os valores permitidos são start, center ou end |
df-messenger-titlebar-font-color |
Opcional | branco | Cor do texto na barra de título |
df-messenger-titlebar-letter-spacing |
Opcional | normal | Espaçamento entre letras do texto na barra de título |
df-messenger-titlebar-title-font-size |
Opcional | 18 px | Tamanho do texto do título na barra de título |
df-messenger-titlebar-title-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes do texto do título na barra de título |
df-messenger-titlebar-title-font-weight |
Opcional | 400 | Espessura da fonte do texto do título na barra de título |
df-messenger-titlebar-title-line-height |
Opcional | normal | Altura da linha do texto do título na barra |
df-messenger-titlebar-title-letter-spacing |
Opcional | normal | Espaçamento entre letras do texto do título na barra de título |
df-messenger-titlebar-subtitle-font-color |
Opcional | branco | Cor do texto da legenda na barra de título |
df-messenger-titlebar-subtitle-font-size |
Opcional | 18 px | Tamanho do texto da legenda na barra de título |
df-messenger-titlebar-subtitle-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes do texto da legenda na barra de título |
df-messenger-titlebar-subtitle-font-weight |
Opcional | 400 | Espessura da fonte do texto do subtítulo na barra de título |
df-messenger-titlebar-subtitle-line-height |
Opcional | normal | Altura da linha do texto da legenda na barra de título |
df-messenger-titlebar-subtitle-letter-spacing |
Opcional | normal | Espaçamento entre letras do texto do subtítulo na barra de título |
df-messenger-titlebar-title-order |
Opcional | linha | Ordene os elementos na barra de título. Os valores permitidos são row ou row-reverse. Esse valor só será eficaz se o atributo chat-title-icon tiver sido especificado. |
df-messenger-titlebar-icon-width |
Opcional | 18 px | A largura do ícone na barra de título. Esse valor só será aplicado se chat-title-icon tiver sido especificado. |
df-messenger-titlebar-icon-height |
Opcional | 18 px | A altura do ícone na barra de título. Esse valor só será aplicado se chat-title-icon tiver sido especificado. |
df-messenger-titlebar-icon-padding |
Opcional | 0 12px 0 0 | O padding ao redor do ícone na barra de título. Esse valor só será aplicado se chat-title-icon tiver sido especificado. |
Estilo da janela de chat
Para a janela de chat, as seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-chat-background |
Opcional | #fafafa | Segundo plano da caixa de diálogo do agente em que as mensagens são mostradas |
df-messenger-chat-padding |
Opcional | 10px | Padding da caixa de diálogo do agente em que as mensagens são mostradas |
df-messenger-messagelist-border |
Opcional | nenhum | Borda da lista de mensagens |
df-messenger-message-border |
Opcional | nenhum | Borda das mensagens da caixa de diálogo do agente |
df-messenger-message-font-size |
Opcional | 14px | Tamanho do texto das mensagens da caixa de diálogo do agente |
df-messenger-message-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes das mensagens da caixa de diálogo do agente |
df-messenger-message-font-weight |
Opcional | normal | Espessura da fonte das mensagens da caixa de diálogo do agente |
df-messenger-message-bot-background |
Opcional | #ecf3fe | Segundo plano das mensagens enviadas pelo agente |
df-messenger-message-bot-border |
Opcional | nenhum | Borda das mensagens enviadas pelo agente |
df-messenger-message-bot-font-color |
Opcional | #1f1f1f | Cor do texto das mensagens enviadas pelo agente |
df-messenger-message-bot-font-weight |
Opcional | normal | Espessura da fonte das mensagens enviadas pelo agente |
df-messenger-message-user-background |
Opcional | #e1e3e1 | Contexto das mensagens enviadas pelo usuário |
df-messenger-message-user-border |
Opcional | nenhum | Borda das mensagens enviadas pelo usuário |
df-messenger-message-user-font-color |
Opcional | #1f1f1f | Cor do texto das mensagens enviadas pelo usuário |
df-messenger-message-user-font-weight |
Opcional | normal | Espessura da fonte das mensagens enviadas pelo usuário |
df-messenger-message-spacing |
Opcional | 10px | Espaço entre duas mensagens |
df-messenger-message-border-radius |
Opcional | 8px | Raio da borda das mensagens (aplicável a todos os cantos) |
df-messenger-message-bot-border-top-left-radius |
Opcional | 8px | Raio de borda no canto superior esquerdo das mensagens do agente, substitui o raio genérico |
df-messenger-message-bot-border-top-right-radius |
Opcional | 8px | Raio de borda no canto superior direito para mensagens do agente, substitui o raio genérico |
df-messenger-message-bot-border-bottom-left-radius |
Opcional | 8px | Raio de borda inferior à esquerda para mensagens do agente, substitui o raio genérico |
df-messenger-message-bot-border-bottom-right-radius |
Opcional | 8px | Raio da borda inferior à direita para mensagens do agente, substitui o raio genérico |
df-messenger-message-user-border-top-left-radius |
Opcional | 8px | Raio da borda da parte superior esquerda para mensagens do usuário (modifica o raio genérico) |
df-messenger-message-user-border-top-right-radius |
Opcional | 8px | Raio da borda superior direita para mensagens do usuário, substitui o raio genérico |
df-messenger-message-user-border-bottom-left-radius |
Opcional | 8px | Raio da borda inferior à esquerda para mensagens do usuário (modifica o raio genérico) |
df-messenger-message-user-border-bottom-right-radius |
Opcional | 8px | Raio da borda inferior à direita para mensagens do usuário, substitui o raio genérico |
df-messenger-message-stack-spacing |
Opcional | 10px | Espaço entre duas mensagens consecutivas |
df-messenger-message-bot-stack-border-top-left-radius |
Opcional | 8px | Raio de borda da parte superior esquerda para mensagens do agente consecutivas, substitui o raio superior esquerdo do agente |
df-messenger-message-bot-stack-border-top-right-radius |
Opcional | 8px | Raio da borda superior direita para mensagens consecutivas do agente, modifica o raio superior direito do agente |
df-messenger-message-bot-stack-border-bottom-left-radius |
Opcional | 8px | Raio da borda inferior à esquerda para mensagens consecutivas do agente, modifica o raio inferior esquerdo do agente |
df-messenger-message-bot-stack-border-bottom-right-radius |
Opcional | 8px | Raio da borda inferior à direita para mensagens consecutivas do agente, modifica o raio inferior direito do agente |
df-messenger-message-user-stack-border-top-left-radius |
Opcional | 8px | Raio de borda da parte superior esquerda para mensagens de usuário consecutivas, substitui o raio superior esquerdo do usuário |
df-messenger-message-user-stack-border-top-right-radius |
Opcional | 8px | Raio de borda da parte superior direita para mensagens de usuário consecutivas, substitui o raio superior direito do usuário |
df-messenger-message-user-stack-border-bottom-left-radius |
Opcional | 8px | Raio de borda inferior à esquerda para mensagens de usuário consecutivas, substitui o raio inferior esquerdo do usuário |
df-messenger-message-user-stack-border-bottom-right-radius |
Opcional | 8px | Raio de borda da parte inferior direita para mensagens de usuário consecutivas, substitui o raio inferior direito do usuário |
df-messenger-message-user-writing-image-width |
Opcional | 24px | Largura da imagem mostrada enquanto o agente está gravando, ativa apenas se bot-writing-image estiver definido |
df-messenger-message-bot-writing-image-height |
Opcional | 24px | Altura da imagem mostrada enquanto o agente está gravando, ativa apenas se bot-writing-image estiver definido |
df-messenger-message-bot-writing-font-color |
Opcional | #1f1f1f | Cor do texto mostrado durante a gravação do agente |
df-messenger-message-bot-writing-font-weight |
Opcional | normal | Espessura da fonte do texto mostrado enquanto o agente está gravando |
df-messenger-message-bot-writing-font-size |
Opcional | 14px | Tamanho do texto mostrado enquanto o agente está gravando |
df-messenger-message-bot-writing-border |
Opcional | nenhum | Borda da mensagem mostrada enquanto o agente está gravando |
df-messenger-message-bot-writing-background |
Opcional | #ecf3fe | Segundo plano da mensagem exibida durante a gravação do agente |
df-messenger-message-bot-writing-padding |
Opcional | 12px | Padding da mensagem mostrada enquanto o agente está gravando |
df-messenger-message-bot-writing-spacing |
Opcional | 10px | Um espaço entre a mensagem mostrada enquanto o agente está escrevendo e a anterior |
df-messenger-chat-scroll-button-enabled-display |
Opcional | nenhum | Define a exibição do botão "Pular para baixo" com a configuração flex para ativar o botão. |
df-messenger-chat-scroll-button-align |
Opcional | centro | Alinhamento do botão "Ir para o fim". Os valores permitidos incluem flex-start, center e flex-end. |
df-messenger-chat-scroll-button-container-padding |
Opcional | 8px | Padding do contêiner em torno do botão "Pular para baixo" |
df-messenger-chat-scroll-button-text-display |
Opcional | in-line | Exibição do texto ao lado do ícone no botão "Ir para o fim". Use none para ocultá-lo. |
df-messenger-chat-scroll-button-font-size |
Opcional | 14px | Tamanho do texto do botão "Pular para o fim" |
df-messenger-chat-scroll-button-font-color |
Opcional | branco | Cor do texto do botão "Pular para o fim" |
df-messenger-chat-scroll-button-background |
Opcional | #0b57d0 | Plano de fundo do botão "Pular para o fim" |
df-messenger-chat-scroll-button-border-radius |
Opcional | 999px | Raio da borda do botão "Pular para baixo" |
df-messenger-chat-messagelist-scroll-shadow-background |
Opcional | gradiente radial(mais distante a 50% a 100%, rgba(0,0,0,.2), transparente) na parte inferior |
Sombra mostrada na parte de baixo da lista de mensagens quando ela não é rolada até a parte de baixo da tela. Defina como none para desativar. |
Estilos para as imagens dos atores
As imagens dos atores são aquelas exibidas ao lado das mensagens do bot ou do ator. Para essas imagens de atores, as seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-message-actor-spacing |
Opcional | 16 px | Distância entre a imagem do ator e as mensagens |
df-messenger-message-bot-actor-order |
Opcional | linha | Ordem da imagem e das mensagens do agente. Use row para ter a imagem do ator à esquerda e as mensagens à direita ou row-reverse para que a imagem do ator seja exibida à direita e as mensagens à esquerda. |
df-messenger-message-user-actor-order |
Opcional | linha inversa | Ordem da imagem e das mensagens do agente. Use row-reverse para colocar a imagem do ator à direita e as mensagens à esquerda ou row para que a imagem do ator seja exibida à esquerda e as mensagens à direita. |
df-messenger-message-actor-direction |
Opcional | coluna | Precisa ser o oposto de df-messenger-message-bot-actor-order e df-messenger-message-user-actor-order. Use column quando se basear em row, ou row quando se basear em column. |
df-messenger-message-actor-align |
Opcional | início flexível | Alinhamento do ator em relação às mensagens. Use flex-start para colocar a imagem do ator na parte superior, center para centralizar a imagem ou flex-end para que a imagem fique na parte inferior. |
df-messenger-message-actor-border-radius |
Opcional | 999px | Raio da borda da imagem do ator |
df-messenger-message-actor-padding |
Opcional | 8px | Padding da imagem do ator |
df-messenger-message-actor-image-size |
Opcional | 24px | Tamanho da imagem do ator |
df-messenger-message-bot-actor-background |
Opcional | branco | Plano de fundo da imagem do ator do agente |
df-messenger-message-bot-actor-border |
Opcional | nenhum | Borda da imagem do ator do agente |
df-messenger-message-bot-actor-offset |
Opcional | 0 | Deslocamento para mover a imagem do ator do agente |
df-messenger-message-user-actor-background |
Opcional | branco | Plano de fundo da imagem do ator do usuário |
df-messenger-message-user-actor-border |
Opcional | nenhum | Borda da imagem do ator do usuário |
df-messenger-message-user-actor-offset |
Opcional | 0 | Deslocar para mover a imagem do ator do usuário |
Estilo para entrada do usuário
Para a entrada do usuário, as seguintes variáveis CSS podem ser fornecidas:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-send-icon-color |
Opcional | #0b57d0 | Cor do ícone "enviar" na entrada do usuário |
df-messenger-send-icon-color-hover |
Opcional | #0b57d0 | Cor do ícone "Enviar" na entrada do usuário ao passar o cursor |
df-messenger-send-icon-color-active |
Opcional | #0b57d0 | Cor do ícone "Enviar" na entrada do usuário quando o texto pode ser enviado |
df-messenger-send-icon-offset-x |
Opcional | 0 | Deslocamento vertical do ícone "enviar" na entrada do usuário |
df-messenger-send-icon-offset-y |
Opcional | -4px | Deslocamento horizontal do ícone "enviar" na entrada do usuário |
df-messenger-input-background |
Opcional | branco | Contexto da entrada do usuário |
df-messenger-input-padding |
Opcional | 8px | Padding geral entre o campo de entrada do usuário (incluindo o botão "Enviar mensagem") e o contêiner. |
df-messenger-input-inner-padding |
Opcional | 0px 48px 0px 0 | Padding interno entre o campo de entrada do usuário (não incluindo o botão "Enviar mensagem") e o contêiner. |
df-messenger-input-border |
Opcional | nenhum | Borda da entrada do usuário |
df-messenger-input-border-top |
Opcional | 1 px sólido #e0e0e0 | Borda superior da entrada do usuário |
df-messenger-input-border-bottom |
Opcional | nenhum | Borda inferior do campo de texto da entrada do usuário |
df-messenger-input-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes da entrada do usuário |
df-messenger-input-font-color |
Opcional | #1f1f1f | Cor do texto da entrada do usuário |
df-messenger-input-font-size |
Opcional | 14px | Tamanho do texto da entrada do usuário |
df-messenger-input-font-weight |
Opcional | normal | Espessura da fonte da entrada do usuário |
df-messenger-input-box-border |
Opcional | nenhum | Borda da caixa de entrada do usuário |
df-messenger-input-box-focus-border |
Opcional | nenhum | Borda da caixa de entrada do usuário enquanto o foco está |
df-messenger-input-box-border-radius |
Opcional | 0 | Raio da borda da caixa de entrada do usuário |
df-messenger-input-box-padding |
Opcional | 12px 0 | Padding da caixa de entrada do usuário |
df-messenger-input-box-focus-padding |
Opcional | 12px 0 | Padding da caixa de entrada do usuário com foco |
df-messenger-input-gutter |
Opcional | estável | Gutter de rolagem da entrada do usuário |
df-messenger-input-info-font-size |
Opcional | 14px | Tamanho do texto de mensagens informativas na entrada do usuário |
df-messenger-input-info-font-weight |
Opcional | normal | Espessura da fonte de mensagens informativas na entrada do usuário |
df-messenger-input-info-padding |
Opcional | 14px 16px | Padding de mensagens informativas na entrada do usuário |
df-messenger-input-info-line-height |
Opcional | 20px | Altura da linha das mensagens informativas na entrada do usuário |
df-messenger-input-long-text-warning-display |
Opcional | nenhum | Se definida como block, vai aparecer uma mensagem de aviso quando a entrada exceder 256 caracteres. Ativo apenas se o atributo max-query-length for maior (por exemplo, desativado). Documentação adicional. |
df-messenger-input-warning-background |
Opcional | #fef7e0 | Segundo plano da mensagem de aviso na entrada do usuário |
df-messenger-input-warning-color |
Opcional | #410e0b | Cor do texto da mensagem de aviso na entrada do usuário |
df-messenger-input-warning-icon-color |
Opcional | #e37400 | Cor do ícone na mensagem de aviso na entrada do usuário |
df-messenger-input-error-background |
Opcional | #f9dedc | Segundo plano da mensagem de erro na entrada do usuário |
df-messenger-input-error-color |
Opcional | #410e0b | Cor do texto da mensagem de erro na entrada do usuário |
df-messenger-input-error-icon-color |
Opcional | #b3261e | Cor do ícone na mensagem de aviso na entrada do usuário |
Estilo para sobreposição de autenticação
Ao usar uma configuração autenticada, as seguintes variáveis CSS podem ser fornecidas para a sobreposição:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-auth-background |
Opcional | RGBA(204, 204, 204, 0,8) | Segundo plano da caixa de diálogo do agente quando a autenticação é mostrada |
df-messenger-auth-button-background |
Opcional | #0b57d0 | Contexto do botão de autenticação |
df-messenger-auth-button-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes do botão de autenticação |
df-messenger-auth-button-font-color |
Opcional | branco | Cor do texto do botão de autenticação |
df-messenger-auth-button-font-size |
Opcional | 14px | Tamanho do texto do botão de autenticação |
df-messenger-auth-button-border |
Opcional | nenhum | Borda do botão de autenticação |
df-messenger-auth-button-border-radius |
Opcional | 8px | Raio da borda do botão de autenticação |
Estilo do feedback
Quando o recurso de feedback de resposta está ativado, as variáveis CSS a seguir podem ser fornecidas para os controles de feedback.
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
Opcional | 8px | Distância entre os botões "Não gostei" e "Não gostei" |
df-messenger-message-feedback-icon-font-color |
Opcional | #444746 | Cor dos botões "Gostei" e "Não gostei" |
df-messenger-message-feedback-icon-font-color-active |
Opcional | #444746 | Cor dos botões "Gostei" e "Não gostei" quando ativos |
df-messenger-message-feedback-icon-border |
Opcional | nenhum | Borda dos botões "Gostei" e "Não gostei" |
df-messenger-message-feedback-icon-border-radius |
Opcional | 0 | Raio da borda dos botões "Gostei" e "Não gostei" |
df-messenger-message-feedback-icon-background |
Opcional | nenhum | Plano de fundo dos botões "Gostei" e "Não gostei" |
df-messenger-message-feedback-icon-background-hover |
Opcional | nenhum | Plano de fundo dos botões "Gostei" e "Não gostei" ao passar o cursor |
df-messenger-message-feedback-icon-padding |
Opcional | 0 | Padding dos botões "Gostei" e "Não gostei" |
df-messenger-message-rich-feedback-spacing |
Opcional | 10px | Espaçamento de elementos no feedback avançado |
df-messenger-message-rich-feedback-padding |
Opcional | 0 | Padding do feedback avançado |
df-messenger-message-rich-feedback-background |
Opcional | nenhum | Contexto do feedback avançado |
df-messenger-message-rich-feedback-border-radius |
Opcional | 0 | Raio de borda do feedback avançado |
df-messenger-message-rich-feedback-border |
Opcional | nenhum | Borda do feedback avançado |
df-messenger-rich-feedback-offset-left |
Opcional | 0 | Deslocamento no lado esquerdo |