Sample CSS on Zoho SalesIQ [Old]

Sample CSS on Zoho SalesIQ [Old]

Custom CSS - an Overview

From the SalesIQ dashboard, when you navigate to Settings > Brands > Personalisation, you will 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 code instead of using our custom design controls. In this case, you can upload your Custom CSS file in the Change Chat Window Appearance with Custom CSS File section, which can be found in the Chat Window sections.

Warning
Note: The below sample CSS is for old SalesIQ live chat. 

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. 


Chat window Header

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

CSS:
  1. header
  2. {
  3. }

Example:

  1. header {
  2. height: 80px !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. 

CSS:
  1. .siq-company-logo
  2. {
  3. }

Example:

  1. .siq-company-logo {
  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.

CSS:
  1. .siq-chat-attender-name 
  2. {
  3. }

Example:

  1. .siq-chat-attender-name {
  2. color: black !important;
  3. }

Chat attender description

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

CSS:
  1. .siq-about-me
  2. {
  3. }

Example:

  1. .siq-about-me { 
  2. color: darkgray !important;
  3. }

Chat window - closing icon

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

CSS:
  1. .siq-close-icon:before
  2. {
  3. }

Example:

  1. .siq-close-icon:before { 
  2. color: black !important;
  3. }

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

CSS:
  1. footer
  2. {
  3. }

Example:

  1. footer {
  2. background-color: lightgray !important;
  3. }

Message Sending button 

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

CSS:
  1. .siq-send-button,
  2. .siq-send-button:before{
  3. }

Example:

  1. .siq-send-button,
  2. .siq-send-button:before {
  3. color: green !important;
  4. }

Chat window - Minimize icon

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

CSS:
  1. .siq-minimize-icon:before
  2. {
  3. }

Example:

  1. .siq-minimize-icon:before { 
  2. color: black !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.

CSS:
  1. .siq-newsletter
  2. {
  3. }

Example:

  1. .siq-newsletter {
  2. background: #ccc !important;
  3. }

Check box - Subscribing to Newsletter section

You can change the style, appearance, color of the subscribe to newsletter section's - check box in the chat window using this CSS.

CSS:
  1. .siq-checkbox
  2. {
  3. }

Example:

  1. .siq-checkbox {
  2. color: cadetblue !important;
  3. }

Label - Subscribing to Newsletter section

You can change the style and font of the subscribe to newsletter section's - label in the chat window using this CSS.

CSS:
  1. .siq-checkbox-label em
  2. {
  3. }

Example:

  1. .siq-checkbox-label em {
  2. color: red !important;
  3. }

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. 

CSS:
  1. .siq_content
  2. {
  3. }

Example:

  1. .siq_content {
  2. background: #dedede57 !important;
  3. }

Visitor text message typing area

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

CSS:
  1. .siq-message-textarea
  2. {
  3. }

Example:

  1. .siq-message-textarea {
  2. background: #eee !important;
  3. }

Operator typing status

Using this CSS, you can modify the operator typing status that will be displayed to the visitors in the chat window.

CSS:
  1. .siq-typing-message
  2. {
  3. }

Example:

  1. .siq-typing-message {
  2. color: darkgray !important;
  3. }

Messaging area - Menu

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

CSS:
  1. .siq-menu:before
  2. {
  3. }

Example:

  1. .siq-menu:before {
  2. color: gray !important;
  3. }

Visitor chat ending button

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

CSS:
  1. .siq-end-chat-button:before
  2. {
  3. }

Example:

  1. .siq-end-chat-button:before {
  2. color: gray !important;
  3. }

Emojis section

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

CSS:
  1. .siq-smileys-section
  2. {
  3. }

Example:

  1. .siq-smileys-section { 
  2. background: #eee !important;
  3. }

Individual emoji

You can change the appearance of individual emoji in the input area of the chat window using this CSS.

CSS:
  1. .siq-smileys
  2. {
  3. }

Example:

  1. .siq-smileys { 
  2. background: #eee !important;
  3. }

Emoji icon

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

CSS:
  1. .siq-smiley-icon
  2. {
  3. }

Example:

  1. .siq-smiley-icon { 
  2. box-shadow: 0 0 1px !important;
  3. border-radius: 5px !important;
  4. }

URL sharing section

You can modify the URL sharing section look and feel, font, font-size and much more here.

CSS:
  1. .siq-share-url
  2. {
  3. }

Example:

  1. .siq-share-url { 
  2. color: red !important;
  3. }

Visitor input area

You can change the visitor input area like the drop-down and the text box here.



Drop down - Visitor input area

You can change the appearance of the choosing department drop-down field in the visitor input area using this CSS.

CSS:
  1. .siq-dropdown
  2. {
  3. }

Example:

  1. .siq-dropdown {
  2. background-color: #d6c8c8 !important;
  3. }

Text box - Visitor input area

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

CSS:
  1. .siq-input-text-box
  2. {
  3. }

Example:

  1. .siq-input-text-box {
  2. color: darkgray !important;
  3. }

Text message field -  Visitor input area

You can change appearance, look and feel, font, and font size of the text message field in the visitor input area using this CSS.

CSS:
  1. .siq-message-area
  2. {
  3. }

Example:

  1. .siq-message-area {
  2. border-radius: 30px !important;
  3. overflow: hidden !important;
  4. }

Cancel button - Visitor input area

You can change the appearance and color of the cancel button in the visitor input area of the chat window using this CSS.

CSS:
  1. .siq-cancel-button
  2. {
  3. }

Example:

  1. .siq-cancel-button { 
  2. background-color: red !important;
  3. color: #fff !important;
  4. }

Update button - Visitor input area

You can change the appearance, text and color of the update button in the visitor input area of the chat window using this CSS.

CSS:
  1. .siq-update-button
  2. {
  3. }

Example:

  1. .siq-update-button { 
  2. background-color: green !important;
  3. }

Mandatory fields option - Visitor input area

You can modify the mandatory option in the visitor input section of the chat window using this CSS.

CSS:
  1. .siq-required
  2. {
  3. }

Example:

  1. .siq-required { 
  2. border-color: green !important;
  3. }

Rating and feedback section

You can modify the rating and feedback section look and feel, font, buttons and much more here.

CSS:
  1. .siq-feedback-section
  2. {
  3. }

Example:

  1. .siq-feedback-section { 
  2. background: #eee !important;
  3. }

Chat rating icon

You can modify the appearance of the chat rating icon using this CSS.

CSS:
  1. body .reaction_ico {}

Example:

  1. body .reaction_ico {
  2.     background-image: url (https://img.zohocdn.com/salesiq/images/reactions_36f94_.png) !important;
  3. }
  4. .sad_icon {
  5.     background-position: 0 0 !important;
  6. }
  7. .happy_icon {
  8.     background-position: -88px 0 !important;
  9. }
  10. .neutral_icon {
  11.     background-position: -44px 0 !important;
  12. }


Feedback text area

You can modify the feedback section's text area look and feel, font, buttons and much more here.

CSS:
  1. .siq-feedback-textarea
  2. {
  3. }

Example:

  1. .siq-feedback-textarea { 
  2. box-shadow: 0 0 13px #c7a8a8 !important;
  3. }

Information banner

You can change the appearance, font and color of the information banner in the chat window using this CSS.

CSS:
  1. .siq-info-banner
  2. {
  3. }

Example:

  1. .siq-info-banner { 
  2. color: red !important;
  3. }

Timer - information banner

You can change the appearance of the information banner - timer in the chat window using this CSS.

CSS:
  1. .siq-info-timer,
  2. .siq-info-timer:before {
  3. }

Example:

  1. .siq-info-timer,
  2. .siq-info-timer:before {
  3. color: gray !important;
  4. }

Info banner in the messaging area

You can change the look and feel, borders and text of the info banner that appears in the messaging area of the chat window using this CSS.

CSS:
  1. .siq-info-message
  2. {
  3. }

Example:

  1. .siq-info-message { 
  2. color: darkgray !important;
  3. }

Send e-mail section

You can change the appearance, font, font style and color of the send email section available in the menus of the chat window using this CSS.

CSS:
  1. .siq-send-email-section
  2. {
  3. }

Example:

  1. .siq-send-email-section { 
  2. box-shadow: 0 0 20px #988d8d !important;
  3. }

Send e-mail - text input field

You can change the appearance, font, font-size and color of the menu - send e-mail - text input field in the chat window using this CSS.

CSS:
  1. .siq-send-email-input
  2. {
  3. }

Example:

  1. .siq-send-email-input { 
  2. color: #7d2222 !important;
  3. }

Operator message section

You can change the look and feel, font, font-size and color of the operator message section in the chat window using this CSS.

CSS:
  1. .siq-agntmsg
  2. {
  3. }

Example:

  1. .siq-agntmsg { 
  2. background: #eee !important;
  3. border-radius: 10px !important;
  4. }

Operator name - message section

You can change the look and feel, font, font-size and color of the operator name in the message section of the chat window using this CSS.

CSS:
  1. .siq-user-name
  2. {
  3. }

Example:

  1. .siq-user-name { 
  2. color: darkgray !important;
  3. }

Operator message

You can change the look and feel, font, font-size and color of the operator message in the chat window using this CSS.

CSS:
  1. .siq-user-message
  2. {
  3. }

Example:

  1. .siq-user-message { 
  2. color: #00b3ff !important;
  3. }

Visitor message section

You can change the look and feel, font, font-size and color of the visitor message section in the chat window using this CSS.

CSS:
  1. .siq-visitmsg
  2. {
  3. }

Example:

  1. .siq-visitmsg { 
  2. background-color: #eee !important;
  3. }

Visitor's messaging time

You can modify the appearance of the visitor's message time in the messaging area of the chat window using this CSS.

CSS:
  1. .siq-message-time
  2. {
  3. }

Example:

  1. .siq-message-time { 
  2. color: #312727 !important;
  3. }

Visitor name - message section

You can change the look and feel, font, font-size and color of the visitor's name in the message section of the chat window using this CSS.

CSS:
  1. .siq-visitor-name
  2. {
  3. }

Example:

  1. .siq-visitor-name { 
  2. color: darkgray !important;
  3. }

Visitor message

You can change the look and feel, font, font-size and color of the visitor message in the chat window using this CSS.

CSS:
  1. .siq-visitor-message
  2. {
  3. }

Example:

  1. .siq-visitor-message { 
  2. color: aqua !important;
  3. }

Attachment section

You can change the look and feel, borders of the attachment section in the chat window using this CSS.

CSS:

  1. .siq-file-attach
  2. {
  3. }

Example:

  1. .siq-file-attach { 
  2. height: 100px;
  3. }

File attached in the chat window

You can change the look and feel, borders of the file attached in the chat window using this CSS.

CSS:
  1. .siq-file-icon
  2. {
  3. }

Example:

  1. .siq-file-icon { 
  2. background-color: #5d8db3 !important;
  3. }

Image attached in the chat window

You can change the look and feel, borders of the image attached in the chat window using this CSS.

CSS:
  1. .siq-attach_image
  2. {
  3. }

Example:

  1. .siq-attach_image { 
  2. filter: grayscale(1) !important;
  3. }

Image drag-drop section

You can modify the appearance of the image drag-drop section here.

CSS:
  1. .siq-dragdrop-mask
  2. {
  3. }

Example:

  1. .siq-dragdrop-mask { 
  2. background-color: #eee !important;
  3. padding-top: 8px !important;
  4. }

Image preview - comment section

You can modify the appearance of the image preview - comment section using this CSS.

CSS:
  1. .siq-comment-textarea
  2. {
  3. }

Example:

  1. .siq-comment-textarea { 
  2. background-color: #eee !important;
  3. }

Image preview section

You can modify the appearance of the image preview section using this CSS.

CSS:
  1. .siq-image-preview
  2. {
  3. }

Example:

  1. .siq-image-preview { 
  2. box-shadow: 0 0 21px #a2a2a2 !important;
  3. }

Attachment uploading in the chat window

You can change the look and feel, borders of the image/file attachment upload progressing in the chat window using this CSS.

CSS:
  1. .siq-file-progress
  2. {
  3. }

Example:

  1. .siq-file-progress { 
  2. box-shadow: 0px 0 21px #e0b8b8 !important;
  3. }