HELP FILE

InstantChat.css Classes and Styles

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:
  • -webkit-appearance: none ensures that Instant Chat runs on Safari (for example, for iPhone).
  • overflow: hidden ensures that Instant Chat runs on Opera.
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:
  • -webkit-appearance: none ensures that Instant Chat runs on Safari (for example, for iPhone).
  • overflow: hidden ensures that Instant Chat runs on Opera.
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:
  • -webkit-appearance: none ensures that Instant Chat runs on Safari (for example, for iPhone).
  • overflow: hidden ensures that Instant Chat runs on Opera.
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:
  • -webkit-appearance: none ensures that Instant Chat runs on Safari (for example, for iPhone).
  • overflow: hidden ensures that Instant Chat runs on Opera.
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:
  • -webkit-appearance: none ensures that Instant Chat runs on Safari (for example, for iPhone).
  • overflow: hidden ensures that Instant Chat runs on Opera.
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:
  • -webkit-appearance: none ensures that Instant Chat runs on Safari (for example, for iPhone).
  • overflow: hidden ensures that Instant Chat runs on Opera.
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.