Você pode personalizar o estilo da caixa de diálogo de chat definindo variáveis CSS.
Estilo geral
As variáveis CSS a seguir oferecem opções de estilo gerais:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-font-family |
Opcional | "Google Sans", "Helvetica Neue", sem serifa | 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 em volta 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, é 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 | Distância entre a bolha de chat e a janela de chat |
df-messenger-chat-window-box-shadow |
Opcional | nenhum | Sombra da janela de chat |
df-messenger-chat-collapse-icon-size |
Opcional | indefinido | Tamanho do ícone do botão de redução 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 de diálogo |
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 na forma minimizada |
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 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", 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 de título |
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", sem serifa | Família de fontes do texto da legenda na barra de título |
df-messenger-titlebar-subtitle-font-weight |
Opcional | 400 | Peso da fonte do texto da legenda 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 | Ordena 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 para a 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 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", sem serifa | Família de fontes das mensagens 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 | 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 para 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 mensagens do agente substitui 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 substitui o raio genérico |
df-messenger-message-bot-border-bottom-left-radius |
Opcional | 8px | O raio da borda na parte de baixo à esquerda para mensagens do agente substitui o raio genérico. |
df-messenger-message-bot-border-bottom-right-radius |
Opcional | 8px | O raio da borda no canto inferior direito para mensagens do agente substitui o raio genérico |
df-messenger-message-user-border-top-left-radius |
Opcional | 8px | O raio da borda no canto superior esquerdo para mensagens do usuário substitui o raio genérico |
df-messenger-message-user-border-top-right-radius |
Opcional | 8px | O raio da borda no canto superior direito para mensagens do usuário substitui o raio genérico |
df-messenger-message-user-border-bottom-left-radius |
Opcional | 8px | O raio da borda na parte de baixo à esquerda para mensagens do usuário substitui o raio genérico. |
df-messenger-message-user-border-bottom-right-radius |
Opcional | 8px | O raio da borda no canto inferior direito 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 mensagens de agentes consecutivas substitui o raio do agente no canto superior esquerdo |
df-messenger-message-bot-stack-border-top-right-radius |
Opcional | 8px | O raio da borda no canto superior direito para mensagens consecutivas do agente substitui o raio do agente no canto superior direito |
df-messenger-message-bot-stack-border-bottom-left-radius |
Opcional | 8px | O raio da borda no canto inferior esquerdo para mensagens de agentes consecutivas substitui o raio do agente no canto inferior esquerdo |
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 | O raio da borda no canto superior esquerdo para mensagens consecutivas do usuário substitui o raio do usuário no canto superior esquerdo |
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 | 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á escrevendo. Só fica ativo se bot-writing-image estiver definido |
df-messenger-message-bot-writing-image-height |
Opcional | 24px | Altura da imagem mostrada enquanto o agente está escrevendo, 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á 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 | Fundo 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 o fim", definido como 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 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 | Fundo do botão "Ir para o fim" |
df-messenger-chat-scroll-button-border-radius |
Opcional | 999px | Raio da borda do botão "Ir para o fim" |
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é 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 ator, 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 ter a imagem do ator à esquerda e as mensagens à direita ou row-reverse para ter 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 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 | 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 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 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 o cursor passa por cima |
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 | O 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", sem serifa | 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 enquanto ela 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 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 | Preenchimento 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. Somente ativo 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, 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", sem serifa | 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 "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" quando o cursor passa por 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 detalhado |
df-messenger-message-rich-feedback-padding |
Opcional | 0 | Padding do feedback detalhado |
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 à esquerda |