product icon

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:
    • -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.
    Article last updated: 27 September, 2022