Pode personalizar o estilo da caixa de diálogo do chat definindo variáveis CSS.
Estilos gerais
As seguintes variáveis CSS oferecem opções de estilos gerais:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de tipos de letra a usar em todo o widget |
df-messenger-font-size |
Opcional | 14px | Tamanho do texto a usar em todo o widget |
df-messenger-font-color |
Opcional | #1f1f1f | Cor do texto a usar em todo o widget |
df-messenger-primary-color |
Opcional | #0b57d0 | Cor principal para elementos no widget (como o fundo da barra de título, o fundo do botão de ação e muito mais) |
df-messenger-focus-color |
Opcional | #1e88e5 | Cor do anel de foco à volta dos elementos |
df-messenger-focus-color-contrast |
Opcional | branco | Cor do anel de foco à volta dos elementos quando estão num elemento principal com uma cor de fundo (como a barra de título) |
df-messenger-chat-border |
Opcional | nenhum | Limite da caixa de diálogo |
df-messenger-chat-border-radius |
Opcional | 0 | Raio do limite da caixa de diálogo |
Estilo para df-messenger-chat-bubble
Quando usar o elemento df-messenger-chat-bubble, pode fornecer as seguintes variáveis CSS:
| Propriedades | Política de introdução | Valor predefinido | 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 caixa da janela de chat |
df-messenger-chat-collapse-icon-size |
Opcional | não definido | Tamanho do ícone do botão de recolher na barra de título |
df-messenger-chat-bubble-icon-size |
Opcional | 36px | Tamanho do ícone do balão de chat |
df-messenger-chat-bubble-close-icon-size |
Opcional | 24px | Tamanho do ícone de fechar do balão de chat |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opcional | -90deg | Rotação do ícone de fechar do balão de chat, que roda para 0 graus quando o chat é fechado |
df-messenger-chat-bubble-icon-color |
Opcional | branco | Cor do ícone e do ícone de fechar 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 | Fundo do balão de chat |
df-messenger-chat-bubble-border-radius |
Opcional | 32px | Raio do limite do balão de chat |
df-messenger-chat-bubble-border |
Opcional | nenhum | Borda do balão de chat |
df-messenger-chat-border-minimized |
Opcional | nenhum | Limite do chat na forma minimizada |
df-messenger-chat-border-radius-minimized |
Opcional | 0 | Raio do limite do chat na forma minimizada |
Estilos para a barra de título
Para a barra de título, podem ser fornecidas as seguintes variáveis CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-titlebar-background |
Opcional | #0b57d0 | Fundo da barra do título |
df-messenger-titlebar-padding |
Opcional | 0 15px | Preenchimento da barra de título |
df-messenger-titlebar-border |
Opcional | nenhum | Limite da barra de título |
df-messenger-titlebar-border-bottom |
Opcional | nenhum | Limite inferior da barra de título |
df-messenger-titlebar-title-align |
Opcional | iniciar | 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 | 18px | 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 tipos de letra do texto do título na barra de título |
df-messenger-titlebar-title-font-weight |
Opcional | 400 | Espessura do tipo de letra 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 | 18px | 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 tipos de letra do texto do subtítulo na barra de título |
df-messenger-titlebar-subtitle-font-weight |
Opcional | 400 | Espessura do tipo de letra do texto do subtítulo na barra de título |
df-messenger-titlebar-subtitle-line-height |
Opcional | normal | Altura das linhas 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. Este valor só é eficaz se o atributo chat-title-icon tiver sido especificado. |
df-messenger-titlebar-icon-width |
Opcional | 18px | A largura do ícone na barra de título. Este valor só é aplicado se o chat-title-icon tiver sido especificado. |
df-messenger-titlebar-icon-height |
Opcional | 18px | A altura do ícone na barra de título. Este valor só é aplicado se o chat-title-icon tiver sido especificado. |
df-messenger-titlebar-icon-padding |
Opcional | 0 12px 0 0 | O preenchimento em torno do ícone na barra de título. Este valor só é aplicado se o chat-title-icon tiver sido especificado. |
Estilo da janela de chat
Para a janela de chat, podem ser fornecidas as seguintes variáveis CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-chat-background |
Opcional | #fafafa | Fundo da caixa de diálogo do agente onde as mensagens são apresentadas |
df-messenger-chat-padding |
Opcional | 10px | Espaçamento da caixa de diálogo do agente onde as mensagens são apresentadas |
df-messenger-messagelist-border |
Opcional | nenhum | Limite da lista de mensagens |
df-messenger-message-border |
Opcional | nenhum | Limite 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 tipos de letra das mensagens da caixa de diálogo do agente |
df-messenger-message-font-weight |
Opcional | normal | Espessura do tipo de letra das mensagens da caixa de diálogo do agente |
df-messenger-message-bot-background |
Opcional | #ecf3fe | Fundo das mensagens enviadas pelo agente |
df-messenger-message-bot-border |
Opcional | nenhum | Limite 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 do tipo de letra das mensagens enviadas pelo agente |
df-messenger-message-user-background |
Opcional | #e1e3e1 | Fundo das mensagens enviadas pelo utilizador |
df-messenger-message-user-border |
Opcional | nenhum | Borda das mensagens enviadas pelo utilizador |
df-messenger-message-user-font-color |
Opcional | #1f1f1f | Cor do texto das mensagens enviadas pelo utilizador |
df-messenger-message-user-font-weight |
Opcional | normal | Espessura do tipo de letra das mensagens enviadas pelo utilizador |
df-messenger-message-spacing |
Opcional | 10px | Espaço entre duas mensagens |
df-messenger-message-border-radius |
Opcional | 8px | Raio do limite para mensagens, aplica-se a todos os cantos |
df-messenger-message-bot-border-top-left-radius |
Opcional | 8px | Raio do canto superior esquerdo para mensagens do agente, substitui o raio genérico |
df-messenger-message-bot-border-top-right-radius |
Opcional | 8px | Raio do limite superior direito para mensagens do agente, substitui o raio genérico |
df-messenger-message-bot-border-bottom-left-radius |
Opcional | 8px | Raio do canto inferior esquerdo para mensagens do agente, substitui o raio genérico |
df-messenger-message-bot-border-bottom-right-radius |
Opcional | 8px | Raio do limite inferior direito para mensagens do agente, substitui o raio genérico |
df-messenger-message-user-border-top-left-radius |
Opcional | 8px | Raio do limite superior esquerdo para mensagens do utilizador, substitui o raio genérico |
df-messenger-message-user-border-top-right-radius |
Opcional | 8px | Raio do canto superior direito para mensagens do utilizador, substitui o raio genérico |
df-messenger-message-user-border-bottom-left-radius |
Opcional | 8px | Raio inferior esquerdo do limite para mensagens do utilizador, substitui o raio genérico |
df-messenger-message-user-border-bottom-right-radius |
Opcional | 8px | Raio do canto inferior direito para mensagens do utilizador, 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 do limite superior esquerdo para mensagens consecutivas do agente, substitui o raio superior esquerdo do agente |
df-messenger-message-bot-stack-border-top-right-radius |
Opcional | 8px | Raio do canto superior direito para mensagens de agente consecutivas, substitui o raio do canto superior direito do agente |
df-messenger-message-bot-stack-border-bottom-left-radius |
Opcional | 8px | Raio do limite inferior esquerdo para mensagens consecutivas do agente, substitui o raio inferior esquerdo do agente |
df-messenger-message-bot-stack-border-bottom-right-radius |
Opcional | 8px | Raio do canto inferior direito para mensagens consecutivas do agente, substitui o raio inferior direito do agente |
df-messenger-message-user-stack-border-top-left-radius |
Opcional | 8px | Raio do canto superior esquerdo para mensagens consecutivas do utilizador, substitui o raio do canto superior esquerdo do utilizador |
df-messenger-message-user-stack-border-top-right-radius |
Opcional | 8px | Raio do canto superior direito para mensagens consecutivas do utilizador, substitui o raio do canto superior direito do utilizador |
df-messenger-message-user-stack-border-bottom-left-radius |
Opcional | 8px | Raio do canto inferior esquerdo para mensagens consecutivas do utilizador, substitui o raio inferior esquerdo do utilizador |
df-messenger-message-user-stack-border-bottom-right-radius |
Opcional | 8px | Raio do canto inferior direito para mensagens consecutivas do utilizador, substitui o raio inferior direito do utilizador |
df-messenger-message-user-writing-image-width |
Opcional | 24px | Largura da imagem apresentada enquanto o agente está a escrever, apenas ativa se bot-writing-image estiver definido |
df-messenger-message-bot-writing-image-height |
Opcional | 24px | Altura da imagem apresentada enquanto o agente está a escrever, só ativa se bot-writing-image estiver definido |
df-messenger-message-bot-writing-font-color |
Opcional | #1f1f1f | Cor do texto apresentado enquanto o agente escreve |
df-messenger-message-bot-writing-font-weight |
Opcional | normal | Espessura do tipo de letra do texto apresentado enquanto o agente escreve |
df-messenger-message-bot-writing-font-size |
Opcional | 14px | Tamanho do texto apresentado enquanto o agente escreve |
df-messenger-message-bot-writing-border |
Opcional | nenhum | Borda da mensagem apresentada enquanto o agente está a escrever |
df-messenger-message-bot-writing-background |
Opcional | #ecf3fe | Fundo da mensagem apresentada enquanto o agente está a escrever |
df-messenger-message-bot-writing-padding |
Opcional | 12px | Espaçamento da mensagem apresentada enquanto o agente está a escrever |
df-messenger-message-bot-writing-spacing |
Opcional | 10px | Espaço entre a mensagem apresentada enquanto o agente está a escrever e a mensagem anterior |
df-messenger-chat-scroll-button-enabled-display |
Opcional | nenhum | Define a apresentação do botão "Ir para a parte inferior", definido como flex para ativar o botão |
df-messenger-chat-scroll-button-align |
Opcional | centro | Alinhamento do botão "Ir para a parte inferior". Os valores permitidos incluem flex-start, center e flex-end |
df-messenger-chat-scroll-button-container-padding |
Opcional | 8px | Preenchimento do contentor em torno do botão "Ir para a parte inferior" |
df-messenger-chat-scroll-button-text-display |
Opcional | intercalado | A apresentação do texto junto ao ícone no botão "Ir para a parte inferior", 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 inferior" |
df-messenger-chat-scroll-button-font-color |
Opcional | branco | Cor do texto do botão "Ir para a parte inferior" |
df-messenger-chat-scroll-button-background |
Opcional | #0b57d0 | Fundo do botão "Ir para a parte inferior" |
df-messenger-chat-scroll-button-border-radius |
Opcional | 999px | Raio do limite do botão "Ir para a parte inferior" |
df-messenger-chat-messagelist-scroll-shadow-background |
Opcional | radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), transparent) bottom |
Sombra apresentada na parte inferior da lista de mensagens quando a lista não é deslocada até à parte inferior, definida como none para desativar |
Estilo para imagens de atores
As imagens do ator são as imagens apresentadas juntamente com as mensagens do bot ou do ator. Para essas imagens de atores, podem ser fornecidas as seguintes variáveis CSS:
| Propriedades | Política de introdução | Valor predefinido | 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 estes 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 ter a imagem do ator na parte superior, center para ter a imagem do ator centrada ou flex-end para ter a imagem do ator na parte inferior. |
df-messenger-message-actor-border-radius |
Opcional | 999px | Raio do limite da imagem do ator |
df-messenger-message-actor-padding |
Opcional | 8px | Espaçamento 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 | 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 | Desvio para mover a imagem do ator do agente |
df-messenger-message-user-actor-background |
Opcional | branco | Fundo da imagem do ator do utilizador |
df-messenger-message-user-actor-border |
Opcional | nenhum | Borda da imagem do ator do utilizador |
df-messenger-message-user-actor-offset |
Opcional | 0 | Desvio para mover a imagem do ator do utilizador |
Estilos para a introdução do utilizador
Para a entrada do utilizador, podem ser fornecidas as seguintes variáveis de CSS:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-send-icon-color |
Opcional | #0b57d0 | Cor do ícone "enviar" na entrada do utilizador |
df-messenger-send-icon-color-hover |
Opcional | #0b57d0 | Cor do ícone "enviar" na entrada do utilizador quando o cursor passa sobre o mesmo |
df-messenger-send-icon-color-active |
Opcional | #0b57d0 | Cor do ícone "enviar" na entrada do utilizador quando é possível enviar texto |
df-messenger-send-icon-offset-x |
Opcional | 0 | Desvio vertical do ícone "enviar" na entrada do utilizador |
df-messenger-send-icon-offset-y |
Opcional | -4px | Desvio horizontal do ícone "enviar" na entrada do utilizador |
df-messenger-input-background |
Opcional | branco | Contexto da entrada do utilizador |
df-messenger-input-padding |
Opcional | 8px | Preenchimento geral entre o campo de introdução do utilizador (incluindo o botão de envio de mensagens) e o contentor. |
df-messenger-input-inner-padding |
Opcional | 0px 48px 0px 0 | Preenchimento interior entre o campo de introdução do utilizador (não incluindo o botão de envio de mensagens) e o contentor. |
df-messenger-input-border |
Opcional | nenhum | Limite da entrada do utilizador |
df-messenger-input-border-top |
Opcional | 1px solid #e0e0e0 | Limite superior da entrada do utilizador |
df-messenger-input-border-bottom |
Opcional | nenhum | Borda inferior do campo de texto da entrada do utilizador |
df-messenger-input-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de tipos de letra da entrada do utilizador |
df-messenger-input-font-color |
Opcional | #1f1f1f | Cor do texto da entrada do utilizador |
df-messenger-input-font-size |
Opcional | 14px | Tamanho do texto da entrada do utilizador |
df-messenger-input-font-weight |
Opcional | normal | Espessura do tipo de letra da entrada do utilizador |
df-messenger-input-box-border |
Opcional | nenhum | Limite da caixa de entrada do utilizador |
df-messenger-input-box-focus-border |
Opcional | nenhum | Limite da caixa de entrada do utilizador enquanto está focada |
df-messenger-input-box-border-radius |
Opcional | 0 | Raio do limite da caixa de entrada do utilizador |
df-messenger-input-box-padding |
Opcional | 12px 0 | Preenchimento da caixa de entrada do utilizador |
df-messenger-input-box-focus-padding |
Opcional | 12px 0 | Preenchimento da caixa de entrada do utilizador enquanto está focada |
df-messenger-input-gutter |
Opcional | estável | Barra de deslocamento da entrada do utilizador |
df-messenger-input-info-font-size |
Opcional | 14px | Tamanho do texto das mensagens informativas na entrada do utilizador |
df-messenger-input-info-font-weight |
Opcional | normal | Espessura do tipo de letra das mensagens informativas na introdução do utilizador |
df-messenger-input-info-padding |
Opcional | 14px 16px | Preenchimento de mensagens informativas na entrada do utilizador |
df-messenger-input-info-line-height |
Opcional | 20px | Altura da linha das mensagens informativas na entrada do utilizador |
df-messenger-input-long-text-warning-display |
Opcional | nenhum | Se for definida como block, é apresentada uma mensagem de aviso quando a entrada excede os 256 carateres. Só está ativo se o atributomax-query-length for superior (por exemplo, desativado). Documentação adicional. |
df-messenger-input-warning-background |
Opcional | #fef7e0 | Fundo da mensagem de aviso na introdução do utilizador |
df-messenger-input-warning-color |
Opcional | #410e0b | Cor do texto da mensagem de aviso na entrada do utilizador |
df-messenger-input-warning-icon-color |
Opcional | #e37400 | Cor do ícone na mensagem de aviso na introdução do utilizador |
df-messenger-input-error-background |
Opcional | #f9dedc | Contexto da mensagem de erro na entrada do utilizador |
df-messenger-input-error-color |
Opcional | #410e0b | Cor do texto da mensagem de erro na entrada do utilizador |
df-messenger-input-error-icon-color |
Opcional | #b3261e | Cor do ícone na mensagem de aviso na introdução do utilizador |
Estilos para a sobreposição de autenticação
Quando usa uma configuração autenticada, pode fornecer as seguintes variáveis CSS para a sobreposição:
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-auth-background |
Opcional | rgba(204, 204, 204, .8) | Fundo da caixa de diálogo do agente quando a autenticação é apresentada |
df-messenger-auth-button-background |
Opcional | #0b57d0 | Fundo do botão de autenticação |
df-messenger-auth-button-font-family |
Opcional | "Google Sans", "Helvetica Neue", sans-serif | Família de tipos de letra 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 | Limite do botão de autenticação |
df-messenger-auth-button-border-radius |
Opcional | 8px | Raio do limite do botão de autenticação |
Estilos de feedback
Quando a funcionalidade de feedback de respostas está ativada, é possível fornecer as seguintes variáveis CSS para os controlos de feedback.
| Propriedades | Política de introdução | Valor predefinido | Descrição |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
Opcional | 8px | Distância entre os botões Gosto e Não gosto |
df-messenger-message-feedback-icon-font-color |
Opcional | #444746 | Cor dos botões Gosto e Não gosto |
df-messenger-message-feedback-icon-font-color-active |
Opcional | #444746 | Cor dos botões Gosto e Não gosto quando estão ativos |
df-messenger-message-feedback-icon-border |
Opcional | nenhum | Limite dos botões Gosto e Não gosto |
df-messenger-message-feedback-icon-border-radius |
Opcional | 0 | Raio do limite dos botões Gosto e Não gosto |
df-messenger-message-feedback-icon-background |
Opcional | nenhum | Fundo dos botões Gosto e Não gosto |
df-messenger-message-feedback-icon-background-hover |
Opcional | nenhum | Fundo dos botões Gosto e Não gosto quando passa o cursor do rato sobre eles |
df-messenger-message-feedback-icon-padding |
Opcional | 0 | Preenchimento dos botões Gosto e Não gosto |
df-messenger-message-rich-feedback-spacing |
Opcional | 10px | Espaçamento dos elementos no feedback formatado |
df-messenger-message-rich-feedback-padding |
Opcional | 0 | Preenchimento do feedback útil |
df-messenger-message-rich-feedback-background |
Opcional | nenhum | Contexto do feedback detalhado |
df-messenger-message-rich-feedback-border-radius |
Opcional | 0 | Área do limite do feedback útil |
df-messenger-message-rich-feedback-border |
Opcional | nenhum | Limite do feedback avançado |
df-messenger-rich-feedback-offset-left |
Opcional | 0 | Desvio no lado esquerdo |