Skip to main content

Styles

Properties related to chat styling.

style | chatStyle​

Styling for the chat's container element.
It can either be defined via the style attribute or a chatStyle property that accepts an object. Both of these have the SAME outcome and are to be chosen by developer preference or framework compatibility.

Example​

<deep-chat style="background-color: #f7f7f7; border-radius: 8px"></deep-chat>

<deep-chat chatStyle='{"backgroundColor": "#f7f7f7", "borderRadius": "8px"}'></deep-chat>

attachmentContainerStyle​

Object containing CSS styling properties for the element containing files attachments ready to be sent with the message.

Example​

<deep-chat attachmentContainerStyle='{"backgroundColor": "#b2e1ff57"}'></deep-chat>

dropupStyles​

Configuration for the dropup button and its menu element styles.

Example​

<deep-chat
  dropupStyles='{
    "button": {
      "styles": {
        "container": {
          "default": {"backgroundColor": "#eff8ff"},
          "hover": {"backgroundColor": "#e4f3ff"},
          "click": {"backgroundColor": "#d7edff"}
        }
      }
    },
    "menu": {
      "container": {
        "boxShadow": "#e2e2e2 0px 1px 3px 2px"
      },
      "item": {
        "hover": {
          "backgroundColor": "#e1f2ff"
        },
        "click": {
          "backgroundColor": "#cfeaff"
        }
      },
      "iconContainer": {
        "width": "1.8em"
      },
      "text": {
        "fontSize": "1.05em"
      }
    }
  }'
></deep-chat>

inputAreaStyle​

Styling for the chat view's bottom area dedicated for text input and file buttons.

Example​

<deep-chat inputAreaStyle='{"backgroundColor": "#ebf5ff"}'></deep-chat>

textInput​

Custom details for the chat's text input.
styles object defines the styling for the text element and its box container. The focus property is used to set the container style when it is focused.
placeholder object's text property is the initial text that is displayed on the input before the user makes any actions and style can be used to customize it. Use setPlaceholderText to change it dynamically.
characterLimit is the maximum number of charactes that can be inserted into the text input.
disabled is used to prevent the user from inserting text. This also comes with its own custom styling.

Generic example​

<deep-chat
  textInput='{
    "styles": {
      "text": {"color": "black"},
      "container": {"maxHeight": "50px", "backgroundColor": "#f5f9ff"},
      "focus": {"border": "2px solid #a2a2ff"}
    },
    "placeholder": {"text": "Insert text here...", "style": {"color": "#4459a4"}},
    "characterLimit": 10
  }'
></deep-chat>

Disabled example​

<deep-chat
  textInput='{
    "disabled": true,
    "placeholder": {
      "text": "Text not allowed..."
  }}'
></deep-chat>

auxiliaryStyle​

  • Type: string

This value uses CSS syntax as an alternative way to define styling in Deep Chat.
It can be used to configure Webkit CSS which cannot be added through component's style properties. A great example of this is the ::-webkit-scrollbar pseudo element which affects the style of the component's scrollbar.
It can also be used to add custom styling to html messages and override Deep Chat CSS.

Example​

<deep-chat
  auxiliaryStyle="
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #54a7ff;
      border-radius: 5px;
    }"
></deep-chat>
danger

Webkit CSS is not standardised across all browsers, make sure to check the browser support for the property you are using.

Types​

Types shared by styles properties:

CustomStyle​

Object containing properties defined in the CSSStyleDeclaration specification as optionals. A TypeScript example can be found in this link.

StatefulStyles​

Object defining styling properties for different mouse states on the element.