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:
|
|
| 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:
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:
|
|
| 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:
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:
|
|
| 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:
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