Custom CSS

You can add Custom CSS to your chat widget on the Settings page, under Styling -> Custom CSS.

You should pre-pend your CSS selectors with #FluentChatContainer to make sure your CSS doesn’t affect other elements on the page.

In some cases, you might have to use !important after CSS properties.

  1. .FluentChatCover

    element: The chat widget cover
    example: to increase the shadow of the widget, use this CSS:

    #FluentChatContainer .FluentChatCover {
      box-shadow: 0px 0px 8px #555 !important;
    }
    
  2. .ActiveChatsToolbar / .AllChatsToolbar

    element: That chat window header(s)
    example: to change the background color of the toolbar, use this CSS:

    #FluentChatContainer .ActiveChatsToolbar,
    #FluentChatContainer .AllChatsToolbar {
      background: black !important;
    }
    
  3. .ChatListItem

    element: Chat row on the All Chats list
    example: to give the chat list item more padding, use this CSS:

    #FluentChatContainer .FluentChatCover .ChatListItem {
      padding: 1.2em;
    }
    
  4. .OperatorImage

    element: Display icon for the operator
    example: to remove operator images from the list, use this CSS:

    #FluentChatContainer .ChatListItem .OperatorImage {
      display: none;
    }
    
  5. .UnreadCount

    element: Unread messages count indicator (for individual chats on the All Chats window)
    example: to hide unread count, use this CSS:

    #FluentChatContainer .UnreadCount {
      display: none !important;
    }
    
  6. .TotalUnread

    element: Unread messages count indicator (displayed when the chat dialog is hidden)
    example: to hide unread count, use this CSS:

    #FluentChatContainer .TotalUnread {
      display: none !important;
    }
    
  7. .Message

    element: Message element
    example: to increase the font-size of customer-sent messages, use this CSS:

    #FluentChatContainer .Customer .Message {
      font-size: 1.2em !important;
    }
    

    example: to increase the font-size of operator-sent messages, use this CSS:

    #FluentChatContainer .Operator .Message {
      font-size: 1.2em !important;
    }
    
  8. .MessageFooter

    element: Message footer element
    example: to hide message footer, use this CSS:

    #FluentChatContainer .MessageFooter {
      display: none !important;
    }
    
  9. .ChatInputField

    element: Message input element
    example: to increase the font-size of message input, use this CSS:

    #FluentChatContainer .ChatInputField {
      font-size: 1.2em !important;
    }
    
  10. .SharedImage

    element: Inline image displayed with the message
    example: to increase the maximum width of the inline image, use this CSS:

    #FluentChatContainer .SharedImage {
      max-width: 100% !important;
    }