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 de texto para usar 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 primária para 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 em torno 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 | 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 recolher na barra de título |
df-messenger-chat-bubble-icon-size |
Opcional | 36 px | Tamanho do ícone do balão do chat |
df-messenger-chat-bubble-close-icon-size |
Opcional | 24px | Tamanho do ícone "Fechar" no balão do chat |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opcional | -90° | Rotação do ícone "Fechar" no balão do chat. Gira para 0° ao fechar o chat. |
df-messenger-chat-bubble-icon-color |
Opcional | branco | Cor do ícone e ícone "Fechar" no 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 | O 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 | O raio da borda do chat em formato minimizado. |
Estilo da barra de título
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 dos textos do título na barra de título, 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 de título |
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 do subtítulo na barra de título |
df-messenger-titlebar-subtitle-font-size |
Opcional | 18 px | Tamanho do texto do subtítulo na barra de título |
df-messenger-titlebar-subtitle-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes do texto do subtítulo 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 do subtítulo 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 | Ordenar 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 o 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 o 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 o 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 | Plano de fundo da caixa de diálogo do agente em que as mensagens são exibidas |
df-messenger-chat-padding |
Opcional | 10px | Padding da caixa de diálogo do agente em que as mensagens são exibidas |
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 | Segundo plano 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 | O peso 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, aplicado a todos os cantos |
df-messenger-message-bot-border-top-left-radius |
Opcional | 8px | O raio da borda no canto superior esquerdo para as mensagens do agente modifica o raio genérico |
df-messenger-message-bot-border-top-right-radius |
Opcional | 8px | O raio da borda no canto superior direito para mensagens do agente modifica o raio genérico. |
df-messenger-message-bot-border-bottom-left-radius |
Opcional | 8px | O raio da borda no canto inferior esquerdo para mensagens do agente substitui o raio genérico |
df-messenger-message-bot-border-bottom-right-radius |
Opcional | 8px | O raio da borda inferior à direita para mensagens do agente (modifica o raio genérico) |
df-messenger-message-user-border-top-left-radius |
Opcional | 8px | O raio da borda no canto superior esquerdo das mensagens dos usuários substitui o raio genérico |
df-messenger-message-user-border-top-right-radius |
Opcional | 8px | O raio da borda no canto superior direito das mensagens do usuário substitui o raio genérico |
df-messenger-message-user-border-bottom-left-radius |
Opcional | 8px | O raio da borda no canto inferior esquerdo das mensagens do usuário substitui o raio genérico |
df-messenger-message-user-border-bottom-right-radius |
Opcional | 8px | O 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 | O raio da borda no canto superior esquerdo para as mensagens consecutivas do agente, substitui o raio do canto superior esquerdo do agente |
df-messenger-message-bot-stack-border-top-right-radius |
Opcional | 8px | Raio da borda no canto superior direito para mensagens consecutivas do agente, modifica o raio superior direito do agente |
df-messenger-message-bot-stack-border-bottom-left-radius |
Opcional | 8px | O raio da borda no canto inferior esquerdo para as mensagens consecutivas do agente, substitui o raio do canto inferior esquerdo do agente |
df-messenger-message-bot-stack-border-bottom-right-radius |
Opcional | 8px | O raio da borda inferior à direita para mensagens consecutivas do agente, substitui o raio inferior à direita do agente |
df-messenger-message-user-stack-border-top-left-radius |
Opcional | 8px | O raio da borda no canto superior esquerdo para as mensagens consecutivas do usuário modifica o raio do canto superior esquerdo do usuário |
df-messenger-message-user-stack-border-top-right-radius |
Opcional | 8px | O raio da borda no canto superior direito para mensagens consecutivas do usuário substitui o raio do canto superior direito do usuário |
df-messenger-message-user-stack-border-bottom-left-radius |
Opcional | 8px | O raio da borda no canto inferior esquerdo para as mensagens consecutivas do usuário substitui o raio do canto inferior esquerdo do usuário |
df-messenger-message-user-stack-border-bottom-right-radius |
Opcional | 8px | O raio da borda no canto inferior direito para mensagens consecutivas do usuário substitui o raio do canto inferior direito do usuário |
df-messenger-message-user-writing-image-width |
Opcional | 24px | Largura da imagem mostrada enquanto o agente está gravando. Ela será ativada 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 enquanto o agente está gravando |
df-messenger-message-bot-writing-font-weight |
Opcional | normal | Espessura da fonte do texto mostrado enquanto o agente está escrevendo |
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 exibida enquanto o agente está gravando |
df-messenger-message-bot-writing-background |
Opcional | #ecf3fe | Segundo plano da mensagem mostrada enquanto o agente está gravando |
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 mensagem anterior |
df-messenger-chat-scroll-button-enabled-display |
Opcional | nenhum | Define a exibição do botão "Ir para o fim", definido como flex para ativar o botão. |
df-messenger-chat-scroll-button-align |
Opcional | centro | Alinhamento do botão "Pular para baixo". Os valores permitidos incluem flex-start, center e flex-end. |
df-messenger-chat-scroll-button-container-padding |
Opcional | 8px | Padding do contêiner ao redor do botão "Ir para o fim" |
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 ocultar o texto. |
df-messenger-chat-scroll-button-font-size |
Opcional | 14px | Tamanho do texto do botão "Ir para o fim" |
df-messenger-chat-scroll-button-font-color |
Opcional | branco | Cor do texto do botão "Ir 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 | O raio da borda do botão "Ir para o fim" |
df-messenger-chat-messagelist-scroll-shadow-background |
Opcional | radial-gradiente(maior lado a 50% 100%, rgba(0,0,0,.2), transparente) inferior |
Sombra mostrada na parte de baixo da lista de mensagens quando a lista não é rolada até a parte de baixo, definida como none para desativar. |
Estilo para imagens de atores
As imagens de ator são as que aparecem junto com as 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 usuário e as mensagens |
df-messenger-message-bot-actor-order |
Opcional | linha | Ordem da imagem e das mensagens dos atores. Use row para colocar a imagem do ator à esquerda e as mensagens à direita ou row-reverse para colocar a imagem do ator à direita e as mensagens à esquerda. |
df-messenger-message-user-actor-order |
Opcional | linha-reversa | Ordem da imagem e das mensagens dos atores. Use row-reverse para colocar a imagem do ator à direita e as mensagens à esquerda ou row para colocar a imagem do ator à 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 | Flex para início | Alinhamento do ator em relação às mensagens. Use flex-start para colocar a imagem do ator na parte de cima, center para centralizar a imagem ou flex-end para centralizar a imagem do ator na parte inferior. |
df-messenger-message-actor-border-radius |
Opcional | 999px | O 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 | Offset 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 | Offset 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 | Segundo plano 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 (sem incluir 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á em foco |
df-messenger-input-box-border-radius |
Opcional | 0 | O 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 enquanto o foco está em foco |
df-messenger-input-gutter |
Opcional | estável | Gutter da barra 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 definido como block, uma mensagem de aviso vai aparecer 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 | Segundo plano 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 | O raio da borda do botão de autenticação |
Estilo do feedback
Quando o recurso de feedback de resposta está ativado, as seguintes variáveis CSS 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 "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 sobre eles |
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 dos 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 detalhado |
df-messenger-message-rich-feedback-border-radius |
Opcional | 0 | O raio da borda do feedback detalhado |
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 |