product icon

Clases y estilos de InstantChat.css

    Los artículos relacionados con la personalización están redactados para una audiencia técnica con experiencia en el desarrollo web. Se requieren conocimientos de HTML, CSS y JavaScript.

    Para cambiar los estilos, copie el archivo CSS predeterminado en el directorio público de su servidor web y edite las especificaciones de estilo según sea necesario.

    Note: Los recursos de imagen para el chat instantáneo autoalojado están disponibles para su descarga en un único archivo comprimido.
    # Nombre del estilo Tipo Descripción o aspecto
    1 ic_htmlbody

    El elemento de la página (Instant Chat se ejecuta en un Iframe).

    2 ic_área_del_cuerpo El diseño de la ventana personalizada que contiene la ventana de chat instantáneo.
    3 ic_shadow Establece la sombra de la ventana personalizada que contiene la ventana de chat instantáneo. La sombra aparece mientras se carga la ventana de chat instantáneo.
    4 ic_loader_animation La animación que se reproduce mientras se carga la ventana de chat instantáneo.
    5 ic_maincontentarea El diseño de la ventana de chat instantáneo.
    6 ic_statusicon_waiting

    El icono del cliente mientras espera a un técnico.

    .ic_statusicon_waiting aparece durante toda la sesión cuando el cliente está esperando al técnico.


    7 ic_statusicon_chat Icono del técnico que charla con el cliente.
    8 ic_statusicon_rc El icono del técnico que controla a distancia el ordenador del cliente.
    9 ic_statusicon_disconnect Icono del técnico cuando se desconecta de la sesión Rescue.
    10 ic_statusicon_hold El icono del técnico cuando el cliente queda en espera.
    11 ic_statusicon_transfer El icono del técnico mientras la sesión del cliente está en transferencia a otro técnico.
    12 ic_statusicon_typing Icono del técnico que está escribiendo un mensaje al cliente.
    13 ic_statustext El diseño del área de texto que informa al cliente sobre su estado y el del técnico. Por ejemplo, Estás chateando con John Doe.
    14 ic_windowtitle_container El área de texto del título de la ventana de chat instantáneo.
    15 ic_windowtitle El título de la ventana de chat instantáneo.
    16 ic_fontchange_small El icono que utiliza el cliente para cambiar a fuentes pequeñas.
    17 ic_fontchange_small_border El borde del icono de la fuente pequeña.
    18 ic_fontchange_medium El icono que utiliza el cliente para cambiar a fuentes de tamaño medio.
    19 ic_fontchange_medium_border El borde del icono de fuente de tamaño medio.
    20 ic_fontchange_large El icono que utiliza el cliente para cambiar a fuentes grandes.
    21 ic_fontchange_large_border El borde del icono de fuente grande.
    22 ic_chatlog El diseño del panel de chatlog de tamaño de fuente pequeño, que es la parte superior de la ventana de chat instantáneo.
    23 ic_chatlog_big El diseño del panel de chatlog de tamaño de fuente pequeño cuando el panel de mensajes no está disponible.
    24 ic_chatlog_medium El diseño del panel de chatlog de tamaño de fuente medio.
    25 ic_chatlog_medium_big El diseño del panel de chatlog de tamaño de fuente medio cuando el panel de mensajes no está disponible.
    26 ic_chatlog_large La disposición del panel de chatlog con tamaño de fuente grande.
    27 ic_chatlog_large_big El diseño del panel de chatlog de tamaño de fuente grande cuando el panel de mensajes no está disponible.
    28 ic_text_chatline El texto de las líneas de chat en el panel de chatlog.
    Note: Utilice .ic_text_chatline_tc y .ic_text_chatline_client en lugar de .ic_text_chatline para diferenciar entre el estilo de las líneas de chat del cliente y del técnico.
    29 ic_text_chattable La tabla que contiene la marca de tiempo y el nombre de la parte que envió el mensaje de chat.
    Note: El motor de chat instantáneo incluye la visualización : inline-block para garantizar que Instant Chat funcione en Safari.
    30 ic_text_chattable_tr La fila de la tabla que contiene la marca de tiempo y el nombre de la parte que envió el mensaje de chat. Es esencialmente lo mismo que ic_text_chattable.
    31 ic_text_chattable_td1 La disposición de la marca de tiempo de los mensajes de chat.
    32 ic_text_chattable_td2_client El diseño del nombre del cliente en el panel de chatlog.
    33 ic_text_chattable_td2_tc La disposición del nombre del técnico en el panel de chatlog.
    34 ic_text_chatcontent El diseño del mensaje de chat.
    35 ic_control_chatline Una línea en el panel de chatlog que incluye la marca de tiempo, el nombre del remitente y el mensaje de chat.
    36 ic_control_chattime La disposición de la marca de tiempo de los mensajes del sistema en el panel de chatlog.
    37 ic_control_chatcontent La disposición de los mensajes del sistema en el panel de chatlog.
    38 ic_link_chatcontent La disposición de los enlaces en los mensajes del sistema en el panel de chatlog.
    39 ic_linkhover_chatcontent La disposición de los enlaces en los mensajes del sistema en el panel de chatlog cuando el cliente pasa el ratón por encima del enlace.
    40 ic_complementador El área del panel grande de chatlog que se reserva para el panel de mensajes cuando éste está activado.
    41 ic_chatdisconnected El panel de mensajes de la ventana de chat instantáneo cuando el cliente se desconecta.
    42 ic_filesend_button El botón Enviar archivo.
    43 ic_filesend_button_hover El botón Send File cuando el cliente pasa el ratón por encima del botón.
    44 ic_filesend_button_pressed El botón Enviar archivo cuando el cliente hace clic en él.
    45 ic_filesend_button_disabled El botón Enviar archivo cuando está desactivado.
    46 ic_disconnect_button El botón Desconectar.
    47 ic_disconnect_button_hover El botón Disconnect cuando el cliente pasa el ratón por encima del botón.
    48 ic_disconnect_button_pressed El botón Disconnect cuando el cliente hace clic en él.
    49 ic_disconnect_button_disabled El botón Desconectar cuando está desactivado.
    50 ic_send_button El botón Enviar.
    51 ic_send_button_hover El botón Enviar cuando el cliente pasa el ratón por encima del botón.
    52 ic_send_button_pressed El botón Enviar cuando el cliente hace clic en él.
    53 ic_send_button_disabled El botón Enviar cuando está desactivado.
    54 ic_lang_container La lista desplegable del selector de idioma.
    55 ic_lang_menuitem Elementos de la lista desplegable de idiomas.
    56 ic_lang_menuitem_hover Un elemento de la lista desplegable de idiomas cuando el cliente pasa el ratón por encima de ese elemento del menú.
    57 ic_lang_menuitem_selected El elemento de la lista desplegable de idiomas que está seleccionado actualmente.
    58 ic_lang_select El mando selector de idioma.
    59 ic_lang_select_text El texto del control de selección de idioma.
    60 ic_lang_select_text_tr El texto del control de selección de idioma.
    61 ic_lang_select_text_td El texto del control de selección de idioma.
    62 ic_lang_select_arrowimg El botón de flecha del mando selector de idioma.
    63 ic_chattext

    El área de texto del panel de mensajes en la ventana de chat instantáneo cuando el cliente está escribiendo en tamaño de fuente pequeño.


    Note: El motor de chat instantáneo es compatible con los siguientes navegadores web:
    • -apariencia webkit: none garantiza que Instant Chat funcione en Safari (por ejemplo, para iPhone).
    • desbordamiento: hidden garantiza que Instant Chat funcione en Opera.
    64 ic_chattext_first

    El área de texto del panel de mensajes de la ventana de chat instantáneo antes de que el cliente empiece a escribir.


    Note: El motor de chat instantáneo es compatible con los siguientes navegadores web:
    • -apariencia webkit: none garantiza que Instant Chat funcione en Safari (por ejemplo, para iPhone).
    • desbordamiento: hidden garantiza que Instant Chat funcione en Opera.
    Consejo: Para dejar el cuadro de chat vacío: oLangChatModeArray["TYPE_HERE"] = "";
    65 ic_chattext_medium

    El área de texto del panel de mensajes de la ventana de chat instantáneo cuando el cliente escribe en tamaño de fuente medio.


    Note: El motor de chat instantáneo es compatible con los siguientes navegadores web:
    • -apariencia webkit: none garantiza que Instant Chat funcione en Safari (por ejemplo, para iPhone).
    • desbordamiento: hidden garantiza que Instant Chat funcione en Opera.
    66 ic_chattext_medium_first

    El área de texto del panel de mensajes de la ventana de chat instantáneo antes de que el cliente empiece a escribir.


    Note: El motor de chat instantáneo es compatible con los siguientes navegadores web:
    • -apariencia webkit: none garantiza que Instant Chat funcione en Safari (por ejemplo, para iPhone).
    • desbordamiento: hidden garantiza que Instant Chat funcione en Opera.
    Consejo: Para dejar el cuadro de chat vacío: oLangChatModeArray["TYPE_HERE"] = "";
    67 ic_chattext_large

    El área de texto del panel de mensajes de la ventana de chat instantáneo cuando el cliente escribe en tamaño de fuente grande.


    Note: El motor de chat instantáneo es compatible con los siguientes navegadores web:
    • -apariencia webkit: none garantiza que Instant Chat funcione en Safari (por ejemplo, para iPhone).
    • desbordamiento: hidden garantiza que Instant Chat funcione en Opera.
    68 ic_chattext_large_first

    El área de texto del panel de mensajes de la ventana de chat instantáneo antes de que el cliente empiece a escribir.


    Note: El motor de chat instantáneo es compatible con los siguientes navegadores web:
    • -apariencia webkit: none garantiza que Instant Chat funcione en Safari (por ejemplo, para iPhone).
    • desbordamiento: hidden garantiza que Instant Chat funcione en Opera.
    Consejo: Para dejar el cuadro de chat vacío: oLangChatModeArray["TYPE_HERE"] = "";
    69 ic_custom_logo El logotipo de la empresa del técnico.
    70 ic_icono_personalizado El icono de la empresa del técnico.
    71 ic_dialog_box El diálogo de chatlog que puedes abrir pulsando CTRL-ALT-L.
    72 ic_dialog_box_textarea El área de texto del diálogo de chatlog.
    73 ic_dialog_box_button1 El botón Copiar al portapapeles del cuadro de diálogo del chatlog.
    74 ic_dialog_box_button2 El Cancelar botón si el chatlog diálogo.
    75 ic_barras_de_progreso Las barras de progreso durante el envío o la recepción de un fichero.
    76 ic_progressbars_chatbottom La parte inferior del panel de chatlog cuando las barras de progreso están activas.
    77 ic_progressbar_instance La disposición de cada una de las barras de progreso.
    78 ic_progressbar_inner El indicador de progreso de la barra de progreso.
    79 ic_progressbar_title La etiqueta de la barra de progreso.
    80 ic_progressbar_cancelbutton Los botones de cancelación a la derecha de las barras de progreso.
    81 ic_progressbar_cancelbutton_hover Los botones de cancelación a la derecha de las barras de progreso cuando el cliente pasa el ratón por encima de los botones.
    82 ic_progressbar_cancelbutton_pressed Los botones de cancelación a la derecha de las barras de progreso cuando el cliente hace clic en los botones.
    83 ic_progressbar_cancelbutton_disabled Los botones de cancelación a la derecha de las barras de progreso cuando los botones están desactivados.

    Los estilos 84-88 no son visibles en la interfaz estándar de Chat Instantáneo. Los elementos 84 y superiores están disponibles en la última versión de InstantChat.css:

    # Nombre del estilo Tipo Descripción o aspecto
    84 ic_technicianname Muestra el nombre del técnico.
    85 ic_sessionend_button Muestra un botón que el cliente puede pulsar para finalizar la sesión.
    86 ic_sessionend_button_hover El botón de fin de sesión cuando el cliente pasa el ratón por encima del botón.
    87 ic_sessionend_button_pressed El botón de fin de sesión cuando el cliente hace clic en el botón.
    88 ic_sessionend_button_disabled El botón de fin de sesión cuando el botón está desactivado.

    Los estilos 89-127 se aplican a los mensajes del sistema. Por defecto, todos los mensajes del sistema se comunican al cliente en el registro de chat. Para evitar que se muestre un mensaje, cambie la visualización de : block; to display: ninguna;

    Para obtener una descripción completa de cada clase, consulte Relationship between ic_control Classes and Language Nodes.

    # Nombre del estilo Tipo Descripción o aspecto
    89 ic_control_chatline_CLIENT_CONNECTING El mensaje del sistema cuando el cliente se conecta con el técnico.
    90 ic_control_chatline_CLIENT_CONNECTED El mensaje del sistema que confirma que el cliente está conectado con el técnico.
    91 ic_control_chatline_CLIENT_END Mensaje del sistema que confirma que el cliente ha finalizado la sesión.
    92 ic_control_chatline_CLIENT_DISCONNECTED El mensaje del sistema que confirma que el cliente se ha desconectado de la sesión.
    93 ic_control_chatline_CLIENT_CANNOTSTART El mensaje del sistema que confirma que el cliente no puede iniciar una sesión por algún motivo. Para obtener información sobre los posibles errores, consulte Relationship between ic_control Classes and Language Nodes.
    94 ic_control_chatline_CLIENT_TIMEOUT Este mensaje del sistema no está en uso.
    95 ic_control_chatline_CLIENT_REQUESTSENTFILE El mensaje del sistema que confirma que se ha enviado una solicitud al Applet para abrir el cuadro de diálogo Browse.
    96 ic_control_chatline_CLIENT_ REQUESTSENTCANCELFILE El mensaje del sistema que confirma que se ha enviado una solicitud al Applet para detener el envío de un archivo.
    97 ic_control_chatline_TC_CONNECTED El mensaje del sistema que confirma que se ha establecido la conexión con una Consola Técnica específica.
    98 ic_control_chatline_TC_HOLD El mensaje del sistema que confirma que el técnico ha puesto la sesión en espera.
    99 ic_control_chatline_TC_TRANSFER Mensaje del sistema que confirma que el técnico ha transferido la sesión a otro técnico o canal.
    100 ic_control_chatline_TC_END El mensaje del sistema que confirma que el técnico ha finalizado la sesión.
    101 ic_control_chatline_TC_EXIT El mensaje del sistema que confirma que el técnico ha abandonado la sesión.
    102 ic_control_chatline_TC_DISCONNECTED El mensaje del sistema que confirma que el técnico perdió la conexión con el servidor web y el cliente no puede comunicarse con el técnico.
    103 ic_control_chatline_TC_START_APPLET El enlace para empezar a descargar el applet o el archivo de configuración del iPhone.
    104 ic_control_chatline_TC_SHOWSURVEY El mensaje del sistema pide al cliente que rellene una encuesta una vez finalizada la sesión.
    105 ic_control_chatline_TC_URLPUSH El mensaje del sistema que confirma que el técnico ha enviado una URL predefinida al cliente.
    106 ic_control_chatline_APPLET_CONNECTING_GW Mensaje del sistema que confirma que el applet Rescue ha establecido una conexión con la puerta de enlace Rescue.
    107 ic_control_chatline_APPLET_AUTOPROXYLOOKUP
    108 ic_control_chatline_APPLET_FX_START El mensaje del sistema que confirma que el técnico ha iniciado el gestor de archivos.
    109 ic_control_chatline_APPLET_FX_END El mensaje del sistema que confirma que el técnico detuvo el administrador de archivos.
    110 ic_control_chatline_APPLET_SENDINGLOGFILE
    111 ic_control_chatline_APPLET_PRINT
    112 ic_control_chatline_APPLET_DROPPED El mensaje del sistema que confirma que se ha interrumpido la conexión.
    113 ic_control_chatline_APPLET_DISCONNECTING El mensaje del sistema que confirma la desconexión de la sesión.
    114 ic_control_chatline_APPLET_RECONNECTING El mensaje del sistema que confirma que Rescue intenta reconectar la sesión.
    115 ic_control_chatline_APPLET_ERROR El mensaje del sistema confirmando que hubo un error en el Applet.
    116 ic_control_chatline_APPLET_DISCONNECTED El mensaje del sistema que confirma que el applet se ha desconectado.
    117 ic_control_chatline_APPLET_FX_NOTIFY
    118 ic_control_chatline_APPLET_REBOOTING El mensaje del sistema que confirma que el técnico ha reiniciado el ordenador del cliente.
    119 ic_control_chatline_APPLET_DV_START El mensaje del sistema que confirma que el técnico ha iniciado una sesión de vista de escritorio y comparte su pantalla con el cliente.
    120 ic_control_chatline_APPLET_DV_END El mensaje del sistema que confirma que el técnico ha iniciado una sesión de vista de escritorio y comparte su pantalla con el cliente.
    121 ic_control_chatline_APPLET_RC_START El mensaje del sistema que confirma que el técnico ha iniciado una sesión de control remoto.
    122 ic_control_chatline_APPLET_RC_END El mensaje del sistema que confirma que el técnico ha finalizado una sesión de control remoto.
    123 ic_control_chatline_APPLET_CONNECTED El mensaje del sistema que confirma que se ha iniciado una sesión.
    124 ic_control_chatline_APPLET_COMPLETED
    125 ic_control_chatline_APPLET_CANCELLED El mensaje del sistema que confirma que se ha cancelado la sesión.
    126 ic_text_chatline_tc
    Establece el formato de la línea del técnico en la ventana de chat instantáneo.
    127 ic_text_chatline_client
    Establece el formato de la línea del cliente en la ventana de Chat Instantáneo.
    128 ic_waitingtime

    Sirve para mostrar el tiempo de espera estimado en minutos.

    .ic_waitingtime sólo aparece una vez por sesión.

    Por ejemplo, .ic_waitingtime no aparece durante la reconexión.

    .ic_statusicon_waiting aparece durante toda la sesión cuando el cliente está esperando al técnico.

    Note: Este estilo no es visible en la interfaz estándar del chat instantáneo.
    129 ic_queueposition

    Sirve para mostrar la posición del cliente en la cola de clientes en espera.

    .ic_queueposition sólo aparece una vez por sesión.

    Por ejemplo, .ic_queueposition no aparece durante la reconexión.

    .ic_statusicon_waiting appears throughout the session whenever the customer is waiting for the technician.

    Note: Este estilo no es visible en la interfaz estándar del chat instantáneo.
    Article last updated: 27 September, 2022