Sample CSS for SalesIQ Live Chat [New]

Sample CSS for SalesIQ Live Chat [New]

Overview of Custom CSS

From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalization, you will have plenty of customization options for your SalesIQ chat widget and window without touching a line of code. If you are a developer, however, you might prefer to write your own CSS instead of using our custom design controls. In this case, you can upload your Custom CSS file in the brand settings. From your SalesIQ dashboard, navigate to Settings > Brands > Select the brand > Personalization > Chat Window > Upload Custom CSS > Select "New" and upload the CSS file. It will apply to your chat window. 

Here, we have broken down all of the structural elements of the module and given you the field names and their CSS. Using which, you can apply CSS to individual parts of the module. For example, you could apply custom CSS directly to a header, or create your own footer in the Chat window using this CSS. 
Warning
Note: The below sample CSS is for the new SalesIQ live chat. 

Homepage

You can change the homepage color by adding a picture or patterns.

Example


Conversation page

You can default picture of conversation page. 

Example
  1. .widget_offline, .widget_online {
  2.     width: 360px;
  3.     height: 260px;
  4.     background-image: url(https://img.freepik.com/premium-vector/free-shipping-all-orders-tag-banner-design-template-store-marketing-background-modern-graphic_624773-45.jpg);
  5.     background-repeat: no-repeat;
  6.     background-size: cover;
  7. }



Chat window Header

You can change the look and feel of the chat window header.

Example:

  1. .siqcw-header {
  2. --header-height: 100px !important;
  3. }

You can use your company logo in the chat window header using this CSS. You can also customize the height and width of the logo to suit the chat window. 

Example:

  1. .embed-prof-cont {
  2. border-radius: 15px !important;
  3. }

Chat attender name

You can change the display, font and color of the Chat Attender name using this CSS.

Example:

  1. [data-zsqa="header_title"] {
  2.      color: #eba845 !important;
  3. }

Chat attender description

You can change the display, font and color of the chat attender description using this CSS.

Example:

  1. [data-zsqa="header_desc"] {
  2. color: #eba845 !important;
  3. }


Chat window - closing icon

You can change the look and feel of the chat window closing icon using this CSS.

Example:

  1. .chat-win-close:before {
  2. color: #eba845 !important;
  3. }

You can change the style, appearance, color of the chat window footer using this CSS.

Example:

  1. .footer-tab {
  2.     background-color: #eba845 !important;
  3. }

Message Sending button 

You can customize the message sending button according to your website design and needs using this CSS.

Example:

  1. .siqico-send {
  2.     background-color: #eba845 !important;
  3. }

Subscribing to Newsletter section

You can reform the section related to setting up the subscribe checkbox for subscribing Newsletters in the chat widget.

Example:

  1. [data-zsqa="Newsletter subscription"] {
  2.     background-color: #eba845 !important;
  3.     color: #fff !important;
  4. }

Messaging area

Modify the messaging area in the chat window. You can change the appearance of the text, include color to the text, font, font-size and much more using this CSS. 

Example:

  1. [data-zsqa="message_window"] {
  2.     background-color: #eba845 !important;
  3. }



Visitor text message typing area

Modify the visitor text typing area in the chat window using this CSS. 

Example:

  1. .scroll-txtarea {
  2.     background-color: #eba845 !important;
  3. }

Messaging area - Menu

You can change the appearance of the messaging area - menu in the chat window using this CSS.

Example:

  1. .siqcw-drpdwn-list {
  2.     background-color: #eba845 !important;
  3. }

Visitor chat ending button

You can modify the messaging area - visitor chat ending button using this CSS.

Example:

  1. [data-zsqa="endchat"] {
  2.     background-color: #eba845 !important;
  3. }

Emojis section

You can modify the emojis and smileys section in the text message area of the chat window using this CSS.

Example:

  1. .emoji_wrapper {
  2.     background-color: #eba845 !important;
  3. }


Emoji icon

You can change the appearance of the messaging area - emoji icon in the chat window using this CSS.

Example:

  1. .siqsy-cont {
  2.     box-shadow: 0 0 1px !important;
  3.     border-radius: 5px !important;
  4. }


Visitor input area

You can change the visitor input area or components such as the drop-down, text box and more here.

Text box - Visitor input area

You can change the appearance of the text box field in the visitor input area using this CSS.

Example:
  1. .siqcw-input-cont {
  2.     background-color: #eba845 !important;
  3. }