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 estilização:
| 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 a ser usada 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 a ser usada em todo o widget |
df-messenger-primary-color |
Opcional | #0b57d0 | Cor primária para elementos em todo o widget (como plano de fundo da barra de título, plano de fundo 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 ao redor dos elementos quando dentro de um elemento 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 | 16px | Distância entre o balão e a janela de 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 de conversa. |
df-messenger-chat-bubble-close-icon-size |
Opcional | 24px | Tamanho do ícone de fechamento do balão de chat. |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opcional | -90deg | Rotação do ícone de fechamento do balão de chat, que gira para 0 grau ao fechar o chat. |
df-messenger-chat-bubble-icon-color |
Opcional | branco | Cor do ícone e do ícone de fechamento do balão de chat. |
df-messenger-chat-bubble-size |
Opcional | 64px | Tamanho do balão de chat |
df-messenger-chat-bubble-background |
Opcional | #0b57d0 | Segundo plano do balão de diálogo |
df-messenger-chat-bubble-border-radius |
Opcional | 32px | Raio da borda do balão de chat |
df-messenger-chat-bubble-border |
Opcional | nenhum | Borda do balão de diálogo |
df-messenger-chat-border-minimized |
Opcional | nenhum | Borda do chat minimizado. |
df-messenger-chat-border-radius-minimized |
Opcional | 0 | Raio da borda do chat 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 | Segundo plano 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 | Parte de baixo da borda da barra de título |
df-messenger-titlebar-title-align |
Opcional | start | Alinhamento do texto 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 | Peso 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 | Peso 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 | Ordena os elementos na barra de título. Os valores permitidos são row ou row-reverse. Esse valor só será efetivo 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 | 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 de diálogo do agente |
df-messenger-message-bot-background |
Opcional | #ecf3fe | Contexto 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 para mensagens, aplicado a todos os cantos |
df-messenger-message-bot-border-top-left-radius |
Opcional | 8px | Raio da borda superior esquerda para mensagens do agente, substitui o raio genérico. |
df-messenger-message-bot-border-top-right-radius |
Opcional | 8px | Raio da borda superior direita para mensagens do agente, substitui o raio genérico. |
df-messenger-message-bot-border-bottom-left-radius |
Opcional | 8px | Raio da 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 superior esquerda para mensagens do usuário, substitui 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, substitui 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 superior esquerdo da borda para mensagens consecutivas do agente. 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, substitui 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. Substitui 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. Substitui o raio inferior direito do agente. |
df-messenger-message-user-stack-border-top-left-radius |
Opcional | 8px | Raio da borda superior esquerda para mensagens consecutivas do usuário, substitui o raio superior esquerdo do usuário. |
df-messenger-message-user-stack-border-top-right-radius |
Opcional | 8px | Raio superior direito da borda para mensagens consecutivas do usuário. Substitui o raio superior direito do usuário. |
df-messenger-message-user-stack-border-bottom-left-radius |
Opcional | 8px | Raio da borda inferior esquerda para mensagens consecutivas do usuário. Substitui o raio inferior esquerdo do usuário. |
df-messenger-message-user-stack-border-bottom-right-radius |
Opcional | 8px | Raio inferior direito da borda para mensagens consecutivas do usuário. 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á escrevendo, só ativa se bot-writing-image estiver definido |
df-messenger-message-bot-writing-image-height |
Opcional | 24px | Altura da imagem mostrada enquanto o agente está escrevendo. Só fica ativa se bot-writing-image estiver definido. |
df-messenger-message-bot-writing-font-color |
Opcional | #1f1f1f | Cor do texto mostrado enquanto o agente está escrevendo |
df-messenger-message-bot-writing-font-weight |
Opcional | normal | Peso 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á escrevendo |
df-messenger-message-bot-writing-border |
Opcional | nenhum | Borda da mensagem mostrada enquanto o agente está escrevendo |
df-messenger-message-bot-writing-background |
Opcional | #ecf3fe | Segundo plano da mensagem mostrada enquanto o agente está escrevendo |
df-messenger-message-bot-writing-padding |
Opcional | 12px | Padding da mensagem mostrada enquanto o agente está escrevendo |
df-messenger-message-bot-writing-spacing |
Opcional | 10px | 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 a parte de baixo". Defina como flex para ativar o botão. |
df-messenger-chat-scroll-button-align |
Opcional | centro | Alinhamento do botão "Ir para a parte de 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 a parte de baixo". |
df-messenger-chat-scroll-button-text-display |
Opcional | inline | Exibição do texto ao lado do ícone no botão "Ir para a parte de baixo". Use none para ocultar o texto. |
df-messenger-chat-scroll-button-font-size |
Opcional | 14px | Tamanho do texto do botão "Ir para a parte de baixo" |
df-messenger-chat-scroll-button-font-color |
Opcional | branco | Cor do texto do botão "Ir para a parte de baixo" |
df-messenger-chat-scroll-button-background |
Opcional | #0b57d0 | Segundo plano do botão "Ir para a parte de baixo" |
df-messenger-chat-scroll-button-border-radius |
Opcional | 999px | Raio da borda do botão "Ir para a parte de baixo". |
df-messenger-chat-messagelist-scroll-shadow-background |
Opcional | radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom |
Sombra mostrada na parte de baixo da lista de mensagens quando ela não é rolada até o fim. Defina como none para desativar. |
Estilo para imagens de atores
As imagens do ator são as que aparecem 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 | 16px | Distância entre a imagem do ator e as mensagens |
df-messenger-message-bot-actor-order |
Opcional | linha | Ordem da imagem do ator e das mensagens. 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 | row-reverse | Ordem da imagem do ator e das mensagens. 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 | Deve ser o oposto de df-messenger-message-bot-actor-order e df-messenger-message-user-actor-order. Use column quando eles forem baseados em row ou row quando forem baseados em column. |
df-messenger-message-actor-align |
Opcional | flex-start | Alinhamento do ator em relação às mensagens. Use flex-start para colocar a imagem do ator na parte de cima, center para centralizar ou flex-end para colocar na parte de baixo. |
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 | Deslocamento 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 quando passa o cursor sobre ele. |
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 (sem incluir o botão de envio de mensagem) e o contêiner. |
df-messenger-input-border |
Opcional | nenhum | Borda da entrada do usuário. |
df-messenger-input-border-top |
Opcional | 1px solid #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 ela está em foco. |
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 enquanto ela está em foco |
df-messenger-input-gutter |
Opcional | estável | Margem da barra de rolagem da entrada do usuário |
df-messenger-input-info-font-size |
Opcional | 14px | Tamanho do texto das mensagens informativas na entrada do usuário |
df-messenger-input-info-font-weight |
Opcional | normal | Espessura da fonte das 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, vai mostrar uma mensagem de aviso quando a entrada exceder 256 caracteres. Ativo somente se o atributo max-query-length for maior (por exemplo, desativado). Documentação adicional. |
df-messenger-input-warning-background |
Opcional | #fef7e0 | Contexto 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 | Contexto 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 a 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, .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 | Raio da borda do botão de autenticação. |
Estilo do feedback
Quando o recurso de feedback da 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 estão 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 | Contexto dos botões "Gostei" e "Não gostei" |
df-messenger-message-feedback-icon-background-hover |
Opcional | nenhum | Segundo plano 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 dos elementos no feedback detalhado |
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 da 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 |