InstantChat.css Classes and Styles
Articles related to customization are written for a technical audience who have experience in web development. Knowledge of HTML, CSS, and JavaScript are required.
To change styles, copy the default CSS file to your public directory on your web server and edit the style specifications as required.
Note: Image resources for self-hosted Instant Chat are available for download in a single compressed file.
| # | Style name | Type | Description or appearance |
|---|---|---|---|
| 1 | ic_htmlbody | <body> | The <body> element of page (Instant Chat is running in an Iframe). |
| 2 | ic_bodyarea | <div> | The layout of the custom window that contains the Instant Chat window. |
| 3 | ic_shadow | <div> | Sets the shadow of the custom window that contains the Instant Chat window. The shadow appears while the Instant Chat window is loading.  |
| 4 | ic_loader_animation | <div> | The animation played while the Instant Chat window is loading.  |
| 5 | ic_maincontentarea | <div> | The layout of the Instant Chat window.  |
| 6 | ic_statusicon_waiting | <div> | The customer's icon while waiting for a technician. .ic_statusicon_waiting appears throughout the session whenever the customer is waiting for the technician.  |
| 7 | ic_statusicon_chat | <div> | The technician's icon who is chatting with the customer.  |
| 8 | ic_statusicon_rc | <div> | The technician's icon who remote controls the customer's computer.  |
| 9 | ic_statusicon_disconnect | <div> | The technician's icon when he is disconnected from the Rescue session.  |
| 10 | ic_statusicon_hold | <div> | The technician's icon when the customer is put on hold.  |
| 11 | ic_statusicon_transfer | <div> | The technician's icon while the customer's session is in transfer to another technician.  |
| 12 | ic_statusicon_typing | <div> | The technician's icon who is typing a message to the customer.  |
| 13 | ic_statustext | <div> | The layout of the text area that informs the customer about his and the technician's status. For example, You are chatting with John Doe.  |
| 14 | ic_windowtitle_container | <div> | The title text area of the Instant Chat window. |
| 15 | ic_windowtitle | <span> | The title of the Instant Chat window.  |
| 16 | ic_fontchange_small | <div> | The icon that the customer uses to switch to small fonts.  |
| 17 | ic_fontchange_small_border | <div> | The border of the small font icon.  |
| 18 | ic_fontchange_medium | <div> | The icon that the customer uses to switch to medium-size fonts.  |
| 19 | ic_fontchange_medium_border | <div> | The border of the medium-size font icon.  |
| 20 | ic_fontchange_large | <div> | The icon that the customer uses to switch to large fonts.  |
| 21 | ic_fontchange_large_border | <div> | The border of the large font icon.  |
| 22 | ic_chatlog | <div> | The layout of the small font size chatlog pane, which is the upper part of the Instant Chat window.  |
| 23 | ic_chatlog_big | <div> | The layout of the small font size chatlog pane when the message pane is not available.  |
| 24 | ic_chatlog_medium | <div> | The layout of the medium font size chatlog pane.  |
| 25 | ic_chatlog_medium_big | <div> | The layout of the medium font size chatlog pane when the message pane is not available.  |
| 26 | ic_chatlog_large | <div> | The layout of the large font size chatlog pane.  |
| 27 | ic_chatlog_large_big | <div> | The layout of the large font size chatlog pane when the message pane is not available.  |
| 28 | ic_text_chatline | <div> | The text of chat lines on the chatlog pane. 
Note: Use .ic_text_chatline_tc and .ic_text_chatline_client instead of .ic_text_chatline to differentiate between the style of customer and technician chat lines.
|
| 29 | ic_text_chattable | <table> | The table that contains the timestamp and the name of the party who sent the chat message. 
Note: The Instant Chat engine includes display: inline-block to ensure that Instant Chat will run on Safari.
|
| 30 | ic_text_chattable_tr | <tr> | The table row that contains the timestamp and the name of the party who sent the chat message. It is essentially the same as ic_text_chattable.  |
| 31 | ic_text_chattable_td1 | <td> | The layout of the timestamp of chat messages.  |
| 32 | ic_text_chattable_td2_client | <td> | The layout of the customer's name on the chatlog pane.  |
| 33 | ic_text_chattable_td2_tc | <td> | The layout of the technician's name on the chatlog pane.  |
| 34 | ic_text_chatcontent | <span> | The layout of the chat message.  |
| 35 | ic_control_chatline | <div> | A line in the chatlog pane including the timestamp, sender's name, and the chat message.  |
| 36 | ic_control_chattime | <span> | The layout of the timestamp of system messages in the chatlog pane.  |
| 37 | ic_control_chatcontent | <span> | The layout of system messages in the chatlog pane.  |
| 38 | ic_link_chatcontent | <span> | The layout of links in system messages in the chatlog pane.  |
| 39 | ic_linkhover_chatcontent | <span> | The layout of links in system messages in the chatlog pane when the customer hovers the mouse over the link.  |
| 40 | ic_complementer | <div> | The area of the large chatlog pane that is reserved for the message pane when that is enabled. |
| 41 | ic_chatdisconnected | <div> | The message pane of the Instant Chat window when the customer is disconnected.  |
| 42 | ic_filesend_button | <div> | The Send File button.  |
| 43 | ic_filesend_button_hover | <div> | The Send File button when the customer hovers the mouse over the button.  |
| 44 | ic_filesend_button_pressed | <div> | The Send File button when the customer clicks it.  |
| 45 | ic_filesend_button_disabled | <div> | The Send File button when it is disabled.  |
| 46 | ic_disconnect_button | <div> | The Disconnect button.  |
| 47 | ic_disconnect_button_hover | <div> | The Disconnect button when the customer hovers the mouse over the button.  |
| 48 | ic_disconnect_button_pressed | <div> | The Disconnect button when the customer clicks it.  |
| 49 | ic_disconnect_button_disabled | <div> | The Disconnect button when it is disabled.  |
| 50 | ic_send_button | <div> | The Send button.  |
| 51 | ic_send_button_hover | <div> | The Send button when the customer hovers the mouse over the button.  |
| 52 | ic_send_button_pressed | <div> | The Send button when the customer clicks it.  |
| 53 | ic_send_button_disabled | <div> | The Send button when it is disabled.  |
| 54 | ic_lang_container | <div> | The language selector drop-down list.  |
| 55 | ic_lang_menuitem | <div> | Items on the language drop-down list.  |
| 56 | ic_lang_menuitem_hover | <div> | An item on the language drop-down list when the customer hovers the mover that menu item.  |
| 57 | ic_lang_menuitem_selected | <div> | The item on the language drop-down list that is currently selected.  |
| 58 | ic_lang_select | <div> | The language selector control.  |
| 59 | ic_lang_select_text | <table> | The text in the language selector control.  |
| 60 | ic_lang_select_text_tr | <tr> | The text in the language selector control.  |
| 61 | ic_lang_select_text_td | <td> | The text in the language selector control.  |
| 62 | ic_lang_select_arrowimg | <div> | The arrow button of the language selector control.  |
| 63 | ic_chattext | <textarea> | The text area of the message pane in the Instant Chat window when the customer is typing in small font size. 
Note: The Instant Chat engine supports the following web browsers:
|
| 64 | ic_chattext_first | <textarea> | The text area of the message pane in the Instant Chat window before the customer starts typing. 
Note: The Instant Chat engine supports the following web browsers:
Tip: To leave the chat box empty: oLangChatModeArray["TYPE_HERE"] = "";
|
| 65 | ic_chattext_medium | <textarea> | The text area of the message pane in the Instant Chat window when the customer is typing in medium font size. 
Note: The Instant Chat engine supports the following web browsers:
|
| 66 | ic_chattext_medium_first | <textarea> | The text area of the message pane in the Instant Chat window before the customer starts typing. 
Note: The Instant Chat engine supports the following web browsers:
Tip: To leave the chat box empty: oLangChatModeArray["TYPE_HERE"] = "";
|
| 67 | ic_chattext_large | <textarea> | The text area of the message pane in the Instant Chat window when the customer is typing in large font size. 
Note: The Instant Chat engine supports the following web browsers:
|
| 68 | ic_chattext_large_first | <textarea> | The text area of the message pane in the Instant Chat window before the customer starts typing. 
Note: The Instant Chat engine supports the following web browsers:
Tip: To leave the chat box empty: oLangChatModeArray["TYPE_HERE"] = "";
|
| 69 | ic_custom_logo | <img> | The logo of the technician's company.  |
| 70 | ic_custom_icon | <img> | The icon of the technician's company.  |
| 71 | ic_dialog_box | <div> | The chatlog dialog that you can bring up by pressing CTRL-ALT-L.  |
| 72 | ic_dialog_box_textarea | <textarea> | The text area of the chatlog dialog. |
| 73 | ic_dialog_box_button1 | <div> | The Copy to clipboard button of the chatlog dialog. |
| 74 | ic_dialog_box_button2 | <div> | The Cancel button if the chatlog dialog. |
| 75 | ic_progressbars | <div> | The progress bars while sending or receiving a file.  |
| 76 | ic_progressbars_chatbottom | <div> | The bottom of the chatlog pane when the progress bars are active.  |
| 77 | ic_progressbar_instance | <div> | The layout of the individual progress bars.  |
| 78 | ic_progressbar_inner | <div> | The progress indicator of the progress bar.  |
| 79 | ic_progressbar_title | <div> | The label of the progress bar.  |
| 80 | ic_progressbar_cancelbutton | <div> | The cancel buttons on the right of the progress bars.  |
| 81 | ic_progressbar_cancelbutton_hover | <div> | The cancel buttons on the right of the progress bars when the customer hovers the mouse over the buttons.  |
| 82 | ic_progressbar_cancelbutton_pressed | <div> | The cancel buttons on the right of the progress bars when the customer clicks the buttons.  |
| 83 | ic_progressbar_cancelbutton_disabled | <div> | The cancel buttons on the right of the progress bars when the buttons are disabled.  |
Styles 84-88 are not visible in the standard Instant Chat interface. Items 84 and higher are available in the latest version of InstantChat.css:
| # | Style name | Type | Description or appearance |
|---|---|---|---|
| 84 | ic_technicianname | <div> | Shows the Technician Name. |
| 85 | ic_sessionend_button | <div> | Shows a button that the customer can click to end the session. |
| 86 | ic_sessionend_button_hover | <div> | The end session button when the customer hovers the mouse over the button. |
| 87 | ic_sessionend_button_pressed | <div> | The end session button when the customer clicks the button. |
| 88 | ic_sessionend_button_disabled | <div> | The end session button when the button is disabled. |
Styles 89-127 are applied to system messages. By default, all system messages are communicated to the customer in the Chat Log. To prevent a message from being displayed, change display: block; to display: none;
For a complete description of each class, see Relationship between ic_control Classes and Language Nodes.
| # | Style name | Type | Description or appearance |
|---|---|---|---|
| 89 | ic_control_chatline_CLIENT_CONNECTING | <div> | The system message when the customer is connecting to the technician. |
| 90 | ic_control_chatline_CLIENT_CONNECTED | <div> | The system message confirming that the customer is connected to the technician. |
| 91 | ic_control_chatline_CLIENT_END | <div> | The system message confirming that the customer has ended the session. |
| 92 | ic_control_chatline_CLIENT_DISCONNECTED | <div> | The system message confirming that the customer is disconnected from the session. |
| 93 | ic_control_chatline_CLIENT_CANNOTSTART | <div> | The system message confirming that the customer cannot start a session for some reason. For information on the possible errors, see Relationship between ic_control Classes and Language Nodes. |
| 94 | ic_control_chatline_CLIENT_TIMEOUT | <div> | This system message is not in use. |
| 95 | ic_control_chatline_CLIENT_REQUESTSENTFILE | <div> | The system message confirming that a request is sent to the Applet to open the Browse dialog box. |
| 96 | ic_control_chatline_CLIENT_ REQUESTSENTCANCELFILE | <div> | The system message confirming that a request is sent to the Applet to stop sending a file. |
| 97 | ic_control_chatline_TC_CONNECTED | <div> | The system message confirming that connection is established with a specific Technician Console. |
| 98 | ic_control_chatline_TC_HOLD | <div> | The system message confirming that the technician has put the session on hold. |
| 99 | ic_control_chatline_TC_TRANSFER | <div> | The system message confirming that the technician transferred the session to another technician or channel. |
| 100 | ic_control_chatline_TC_END | <div> | The system message confirming that the technician has ended the session. |
| 101 | ic_control_chatline_TC_EXIT | <div> | The system message confirming that technician left the session. |
| 102 | ic_control_chatline_TC_DISCONNECTED | <div> | The system message confirming that the technician lost the connection with the web server and the customer cannot communicate with the technician. |
| 103 | ic_control_chatline_TC_START_APPLET | <div> | The link to start downloading the applet or iPhone configuration file. |
| 104 | ic_control_chatline_TC_SHOWSURVEY | <div> | The system message asking the customer to fill in a survey after the session ended. |
| 105 | ic_control_chatline_TC_URLPUSH | <div> | The system message confirming that technician sent a pre-defined URL to the customer. |
| 106 | ic_control_chatline_APPLET_CONNECTING_GW | <div> | The system message confirming that the Rescue Applet established a connection to the Rescue Gateway. |
| 107 | ic_control_chatline_APPLET_AUTOPROXYLOOKUP | <div> | |
| 108 | ic_control_chatline_APPLET_FX_START | <div> | The system message confirming that the technician started the file manager. |
| 109 | ic_control_chatline_APPLET_FX_END | <div> | The system message confirming that the technician stopped the file manager. |
| 110 | ic_control_chatline_APPLET_SENDINGLOGFILE | <div> | |
| 111 | ic_control_chatline_APPLET_PRINT | <div> | |
| 112 | ic_control_chatline_APPLET_DROPPED | <div> | The system message confirming that the connection was dropped. |
| 113 | ic_control_chatline_APPLET_DISCONNECTING | <div> | The system message confirming that the session is disconnecting. |
| 114 | ic_control_chatline_APPLET_RECONNECTING | <div> | The system message confirming that Rescue attempts to reconnect the session. |
| 115 | ic_control_chatline_APPLET_ERROR | <div> | The system message confirming that there was an error in the Applet. |
| 116 | ic_control_chatline_APPLET_DISCONNECTED | <div> | The system message confirming that the applet was disconnected. |
| 117 | ic_control_chatline_APPLET_FX_NOTIFY | <div> | |
| 118 | ic_control_chatline_APPLET_REBOOTING | <div> | The system message confirming that the technician rebooted the customer's computer. |
| 119 | ic_control_chatline_APPLET_DV_START | <div> | The system message confirming that the technician started a desktop view session and shares his screen with the customer. |
| 120 | ic_control_chatline_APPLET_DV_END | <div> | The system message confirming that the technician started a desktop view session and shares his screen with the customer. |
| 121 | ic_control_chatline_APPLET_RC_START | <div> | The system message confirming that the technician started a remote control session. |
| 122 | ic_control_chatline_APPLET_RC_END | <div> | The system message confirming that the technician ended a remote control session. |
| 123 | ic_control_chatline_APPLET_CONNECTED | <div> | The system message confirming that a session is started. |
| 124 | ic_control_chatline_APPLET_COMPLETED | <div> | |
| 125 | ic_control_chatline_APPLET_CANCELLED | <div> | The system message confirming that the session was cancelled. |
| 126 | ic_text_chatline_tc | <div> | Sets the format of the technician's line in the Instant Chat window.  |
| 127 | ic_text_chatline_client | <div> | Sets the format of the customer's line in the Instant Chat window.  |
| 128 | ic_waitingtime | <div> | Use this to show the estimated waiting time in minutes. .ic_waitingtime only appears once per session. For example, .ic_waitingtime does not appear during reconnection. .ic_statusicon_waiting appears throughout the session whenever the customer is waiting for the technician.
Note: This style is not visible in the standard Instant Chat interface.
|
| 129 | ic_queueposition | <div> | Use this to show the customer's position in the queue of waiting customers. .ic_queueposition only appears once per session. For example, .ic_queueposition does not appear during reconnection. .ic_statusicon_waiting appears throughout the session whenever the customer is waiting for the technician.
Note: This style is not visible in the standard Instant Chat interface.
|
Article last updated: 27 September, 2022