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 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 a ser usada no widget. |
df-messenger-font-size |
Opcional | 14px | Tamanho do texto a ser usado no widget. |
df-messenger-font-color |
Opcional | #1f1f1f | Cor do texto a ser usada em todo o widget. |
df-messenger-primary-color |
Opcional | #0b57d0 | Cor principal dos elementos do widget (como o plano de fundo da barra de título, o 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 pai com uma cor 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 | É a 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 de diálogo 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 do chat. |
df-messenger-chat-bubble-close-icon-size |
Opcional | 24px | Tamanho do ícone "Fechar" do balão do chat. |
df-messenger-chat-bubble-close-icon-transform-rotate |
Opcional | -90deg | Rotação do ícone "Fechar" do balão do chat, que gira para 0 grau ao fechar o chat. |
df-messenger-chat-bubble-icon-color |
Opcional | branco | Cor do ícone e do ícone "Fechar" do 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 | 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 minimizado. |
df-messenger-chat-border-radius-minimized |
Opcional | 0 | Raio da borda do chat na forma minimizada. |
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 | 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 as 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 | A 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 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 | É a 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 as letras do texto do subtítulo na barra de título. |
df-messenger-titlebar-title-order |
Opcional | linha | Elementos de pedido na barra de título. Os valores permitidos são row ou row-reverse. Esse valor só será válido 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 | Plano de 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", 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 de diálogo do agente. |
df-messenger-message-bot-background |
Opcional | #ecf3fe | Plano de fundo 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 | Plano de fundo 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 das mensagens, que se aplica 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. Aplica-se apenas à primeira mensagem em uma pilha. |
df-messenger-message-bot-border-top-right-radius |
Opcional | 8px | Raio da borda superior direita para mensagens do agente, que substitui o raio genérico. Aplica-se apenas à primeira mensagem em uma pilha. |
df-messenger-message-bot-border-bottom-left-radius |
Opcional | 8px | Raio da borda inferior esquerda para mensagens do agente, substitui o raio genérico. Aplica-se apenas à última mensagem de uma pilha. |
df-messenger-message-bot-border-bottom-right-radius |
Opcional | 8px | Raio da borda inferior direita para mensagens do agente, substitui o raio genérico. Aplica-se apenas à última mensagem de uma pilha. |
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. Aplica-se apenas à primeira mensagem em uma pilha. |
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. Aplica-se apenas à primeira mensagem em uma pilha. |
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. Aplica-se apenas à última mensagem de uma pilha. |
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. Só fica ativo se user-actor-image estiver definido. Aplica-se apenas à última mensagem de uma pilha. |
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, que substitui o raio superior esquerdo do agente. Só fica ativo se bot-actor-image estiver definido. Aplica-se apenas à primeira mensagem em uma pilha. |
df-messenger-message-bot-stack-border-top-right-radius |
Opcional | 8px | Raio da borda superior direita para mensagens consecutivas do agente, substituindo o raio superior direito do agente. Só fica ativo se bot-actor-image estiver definido. Aplica-se apenas à primeira mensagem em uma pilha. |
df-messenger-message-bot-stack-border-bottom-left-radius |
Opcional | 8px | Raio da borda inferior esquerda para mensagens consecutivas do agente, que substitui o raio inferior esquerdo do agente. Só fica ativo se bot-actor-image estiver definido. Aplica-se apenas à última mensagem de uma pilha. |
df-messenger-message-bot-stack-border-bottom-right-radius |
Opcional | 8px | Raio da borda inferior direita para mensagens consecutivas do agente, substituindo o raio inferior direito do agente. Só fica ativo se bot-actor-image estiver definido. Aplica-se apenas à última mensagem de uma pilha. |
df-messenger-message-user-stack-border-top-left-radius |
Opcional | 8px | Raio da borda superior esquerda para mensagens consecutivas do usuário, substituindo o raio superior esquerdo do usuário. Só fica ativo se user-actor-image estiver definido. |
df-messenger-message-user-stack-border-top-right-radius |
Opcional | 8px | Raio da borda superior direita para mensagens consecutivas do usuário, substituindo o raio superior direito do usuário. Só fica ativo se user-actor-image estiver definido. Aplica-se apenas à primeira mensagem em uma pilha. |
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. Só fica ativo se user-actor-image estiver definido. Aplica-se apenas à última mensagem de uma pilha. |
df-messenger-message-user-stack-border-bottom-right-radius |
Opcional | 8px | Raio da borda inferior direita para mensagens consecutivas do usuário, que substitui o raio inferior direito do usuário. Só fica ativo se user-actor-image estiver definido. Aplica-se apenas à última mensagem de uma pilha. |
df-messenger-message-user-writing-image-width |
Opcional | 24px | Largura da imagem mostrada enquanto o agente está escrevendo, 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á 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 | 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á 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 | Plano de 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-message-bot-writing-border-radius |
Opcional | 8px | Raio da borda da mensagem mostrada enquanto o agente está escrevendo. |
df-messenger-chat-scroll-button-align |
Opcional | centro | Alinhamento do botão "Ir para o final". 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 final". |
df-messenger-chat-scroll-button-text-display |
Opcional | inline | Exibição do texto ao lado do ícone no botão "Ir para o final". Use none para ocultar o texto. |
df-messenger-chat-scroll-button-font-size |
Opcional | 14px | Tamanho do texto do botão "Ir para o final". |
df-messenger-chat-scroll-button-font-color |
Opcional | branco | Cor do texto do botão "Ir para o final". |
df-messenger-chat-scroll-button-background |
Opcional | #0b57d0 | Plano de fundo do botão "Ir para o final". |
df-messenger-chat-scroll-button-border-radius |
Opcional | 999px | É o raio da borda do botão "Ir para o final". |
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 aparecem ao lado das mensagens do bot ou do usuário. É possível fornecer as seguintes variáveis CSS para personalizar a aparência das imagens de atores:
| 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 ator. Use row para que a imagem do ator fique à esquerda e as mensagens à direita, ou row-reverse para que a imagem do ator fique à direita e as mensagens à esquerda. Essa flag só é usada se o atributo bot-actor-image estiver definido. |
df-messenger-message-user-actor-order |
Opcional | row-reverse | Ordem da imagem e das mensagens do ator. Use row-reverse para que a imagem do ator fique à direita e as mensagens à esquerda, ou row para que a imagem do ator fique à esquerda e as mensagens à direita. Essa flag só é usada se o atributo user-actor-image estiver definido. |
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 que a imagem do ator fique na parte de cima, center para que fique centralizada ou flex-end para que fique na parte de baixo. Essa flag só será usada se os atributos bot-actor-image ou user-actor-image estiverem definidos. |
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
Você pode fornecer as seguintes variáveis CSS para entrada do usuário:
| 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 horizontal do ícone "enviar" na entrada do usuário. |
df-messenger-send-icon-offset-y |
Opcional | -4px | Deslocamento vertical 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 de envio de 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 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 quando 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 | 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. Só fica ativo se o atributo max-query-length for maior (por exemplo, desativado). Documentação adicional. |
df-messenger-input-warning-background |
Opcional | #fef7e0 | Plano de fundo 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 | Plano de fundo 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, é possível fornecer as seguintes variáveis CSS para a sobreposição:
| Propriedades | Política de entrada | Valor padrão | Descrição |
|---|---|---|---|
df-messenger-auth-background |
Opcional | rgba(204, 204, 204, .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 do feedback
Quando o recurso de feedback de resposta está ativado, é possível fornecer as seguintes variáveis CSS 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 | 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 de 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 | Plano de fundo do feedback detalhado. |
df-messenger-message-rich-feedback-border-radius |
Opcional | 0 | Raio da borda do feedback detalhado. |
df-messenger-message-rich-feedback-border |
Opcional | nenhum | Borda do feedback detalhado. |
df-messenger-rich-feedback-offset-left |
Opcional | 0 | Deslocamento do feedback avançado no lado esquerdo. |