A Complete CSS Styling List for the Chat Widget

For How to Style the Chat Widget, please refer to the article below. This article is to point out all of the different CSS classes, and their scope. While the elements may have several CSS classes, or an identifier, the unique / main point is the highlight classes/identifiers.


At a high level, the Chat Widget consists of three major pieces, united in a parent class yappy-chatwidget-full-container:



There are several generic Yappy CSS classes, which control visibility and interaction:

  • yappy-hidden: used to generally hide HTML elements.
  • yappy-disabled: used to generically disable HTML elements.
  • yappy-clickable: used to generically show that a HTML element is clickable, but altering the cursor.


Yappy icons are linked to the following CSS classes:

  • yappy-fa-volume-up   yappy-fa-volume-up
  • yappy-fa-volume-off    yappy-fa-volume-off
  • yappy-fa-close  yappy-fa-close
  • yappy-fa-new    yappy-fa-new
  • yappy-fa-resize      yappy-fa-resize
  • yappy-fa-arrow-top-left     yappy-fa-arrow-top-left
  • yappy-fa-arrow-top-right     yappy-fa-arrow-top-right
  • yappy-fa-angle-down     yappy-fa-angle-down
  • yappy-fa-paperclip     yappy-fa-paperclip

Header area, yappy-chatwidget-full-top, breakdown:


The yappy-fa-arrow-top-left, yappy-fa-arrow-top-right, and yappy-fa-angle-down classes are in HTML element <i>, and are associated with the following additional styling classes:

  • yappy-fa
  • yappy-chatwidget-top-icons
  • yappy-clickable

The three <i> elements are nested under <div> styling elements, which use several of the following classes:

  • yappy-chatwidget-header-icon
  • yappy-chatwidget-header-anchor-right
  • yappy-chatwidget-header-anchor-left
  • yappy-conditional-hidden

Conversation area, yappy-chatwidget-full-body, breakdown:


All messages are wrapped in the “yappy-chatwidget-message-container” class, and an additional one, depending on their side: left, right, or middle.

As for the message itself, the “left” messages contains an avatar and name section, while the “middle” and “right” do not; the “left” is the agent, which is assumed to have an avatar and name. The “left” is the client, whom is not expected to have an avatar, or explicitly needed name. The “middle” messages are considered “system actions” which can be triggered by the agent, client, or bot.

Below is the breakdown of what would be under a “left,” or agent, chat message:


User actions area, yappy-chatwidget-full-bottom, breakdown:


The yappy-fa-paperclip HTML element <i> is primarily identified off the yappy-fa-paperclip class, which is source of the image. However, it contains the following ID, and CSS classes:

  • #yappy-chatwidget-full-bottom-attachment-icon
  • yappy-chatwidget-full-bottom-icon
  • yappy-clickable
  • yappy-fa


Leave A Comment?