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 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 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, é possível fornecer as seguintes variáveis CSS:
| 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 | 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 de chat |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opcional | -90 graus | Rotação do ícone de fechamento do balão de chat, que gira para 0 graus 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 | Plano de fundo do balão de diálogo |
df-messenger-chat-bubble-border-radius |
Opcional | 32px | Raio da borda do balão de diálogo |
df-messenger-chat-bubble-border |
Opcional | nenhum | Borda do balão do chat |
df-messenger-chat-border-minimized |
Opcional | nenhum | Borda do chat em forma minimizada |
df-messenger-chat-border-radius-minimized |
Opcional | 0 | Raio da borda do chat minimizado |
Estilo para a 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 | start | Alinhamento de texto dos textos de 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", sem serifa | 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 as 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 em volta 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 | Fundo 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 de caixa de diálogo do agente |
df-messenger-message-font-size |
Opcional | 14px | Tamanho do texto das mensagens de diálogo do agente |
df-messenger-message-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de fontes das mensagens 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 para mensagens, aplicado a todos os cantos |
df-messenger-message-bot-border-top-left-radius |
Opcional | 8px | Raio de borda na parte superior esquerda 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 da borda superior esquerda para mensagens consecutivas do agente, modifica 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 | O raio da borda no canto inferior direito para mensagens consecutivas do agente substitui o raio do canto 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 | 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 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 | 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 | 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á digitando |
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 exibida durante a gravação do agente |
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 | 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 "Ir para o fim", definido como flex para ativar o botão. |
df-messenger-chat-scroll-button-align |
Opcional | centro | Alinhamento de "Ir para o fim" botão, 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 da opção "Pular para baixo" botão |
df-messenger-chat-scroll-button-text-display |
Opcional | in-line | Exibição do texto ao lado do ícone na seção "Ir para o fim" botão, 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 de "Pular para o fim" botão |
df-messenger-chat-scroll-button-border-radius |
Opcional | 999 px | Raio da borda da opção "Pular para baixo" botão |
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. Defina como none para desativar. |
Estilo para imagens de atores
As imagens do ator são as imagens exibidas 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 | 16px | 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 | row-reverse | Ordem da imagem do ator e das mensagens. Use row-reverse para ter a imagem do ator à direita e as mensagens à esquerda ou row para ter 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 | O 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 do ator ou flex-end para colocar a imagem do ator na parte de baixo. |
df-messenger-message-actor-border-radius |
Opcional | 999 px | 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 usuário |
df-messenger-message-bot-actor-background |
Opcional | branco | Fundo da imagem do ator do agente |
df-messenger-message-bot-actor-border |
Opcional | nenhum | Borda da imagem do usuário 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 campo "enviar" ícone na entrada do usuário |
df-messenger-send-icon-color-hover |
Opcional | #0b57d0 | Cor do ícone "enviar" na entrada do usuário quando o cursor passa por cima |
df-messenger-send-icon-color-active |
Opcional | #0b57d0 | Cor do campo "enviar" ícone 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 de "send" ícone 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 de enviar 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 quando 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 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 das 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. Somente ativo 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 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, 0,8) | Plano de fundo da caixa de diálogo do agente quando a autenticação é mostrada |
df-messenger-auth-button-background |
Opcional | #0b57d0 | Plano de fundo 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 de 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 "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 de 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 detalhado |
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 |