Classes e Estilos InstantChat.css
Os artigos relacionados a personalização são redigidos para um público técnico com experiência em desenvolvimento web. É necessário ter conhecimento de HTML, CSS e JavaScript.
Para mudar os estilos, copie o arquivo CSS padrão para seu diretório público em seu servidor web e edite as especificações de estilo conforme necessário.
Observação:: Recursos de imagens para o Chat instantâneo auto-hospedado estão disponíveis para download em um único arquivo comprimido.
| # | Nome do estilo | Tipo | Descrição ou aparência |
|---|---|---|---|
| 1 | ic_htmlbody | O |
|
| 2 | ic_área corporal | O layout da janela personalizada que contém a janela de Instant Chat. |
|
| 3 | sombra_do_gelo | Define a sombra da janela personalizada que contém a janela de Instant Chat. A sombra aparece enquanto a janela de Instant Chat está sendo carregada.  |
|
| 4 | ic_loader_animation | A animação é reproduzida enquanto a janela de Instant Chat está carregando.  |
|
| 5 | ic_maincontentarea | O layout da janela de Instant Chat.  |
|
| 6 | ic_statusicon_espera | O ícone do cliente enquanto espera por um técnico. .ic_statusicon_waiting aparece durante toda a sessão sempre que o cliente está esperando o técnico.  |
|
| 7 | ic_statusicon_chat | O ícone do técnico que está conversando com o cliente.  |
|
| 8 | ic_statusicon_rc | O ícone do técnico que controla remotamente o computador do cliente.  |
|
| 9 | ic_statusicon_disconnect | O ícone do técnico quando ele é desconectado da sessão Rescue.  |
|
| 10 | ic_statusicon_hold | O ícone do técnico quando o cliente é colocado em espera.  |
|
| 11 | ic_statusicon_transferência | O ícone do técnico enquanto a sessão do cliente está em transferência para outro técnico.  |
|
| 12 | ic_statusicon_typing | O ícone do técnico que está digitando uma mensagem para o cliente.  |
|
| 13 | ic_statustext | O layout da área de texto que informa o cliente sobre seu status e o do técnico. Por exemplo, Você está conversando com John Doe.  |
|
| 14 | ic_contentor_de_janela | A área de texto do título da janela de Instant Chat. |
|
| 15 | ic_windowtitle | O título da janela de Instant Chat.  |
|
| 16 | ic_fontchange_small | O ícone que o cliente usa para mudar para fontes pequenas.  |
|
| 17 | ic_fontchange_border_pequeno_fronteira | A borda do pequeno ícone da fonte.  |
|
| 18 | ic_fontchange_medium | O ícone que o cliente usa para mudar para fontes de tamanho médio.  |
|
| 19 | ic_fontchange_medium_border | A borda do ícone da fonte de tamanho médio.  |
|
| 20 | ic_fontchange_large | O ícone que o cliente usa para mudar para fontes grandes.  |
|
| 21 | ic_fontchange_large_border | A borda do ícone da fonte grande.  |
|
| 22 | ic_chatlog | O layout do pequeno painel de chatlog em tamanho de fonte, que é a parte superior da janela do Instant Chat.  |
|
| 23 | ic_chatlog_big | O layout do pequeno painel de chatlog em tamanho de fonte quando o painel de mensagens não está disponível.  |
|
| 24 | ic_chatlog_medium | O layout do painel de chatlog de tamanho médio de fonte.  |
|
| 25 | ic_chatlog_medium_big | O layout do painel de chatlog de tamanho médio da fonte quando o painel de mensagens não está disponível.  |
|
| 26 | ic_chatlog_large | O layout do grande painel de chatlog em tamanho de fonte.  |
|
| 27 | ic_chatlog_large_big | O layout do painel de chatlog de tamanho de fonte grande quando o painel de mensagens não está disponível.  |
|
| 28 | ic_text_chatline | O texto das linhas de chat no painel de chatlog.  Observação:: Use .ic_text_chatline_tc e .ic_text_chatline_client em vez de .ic_text_chatline para diferenciar entre o estilo das linhas de bate-papo de clientes e técnicos. |
|
| 29 | ic_text_chattable | A tabela que contém o carimbo da hora e o nome da pessoa que enviou a mensagem de bate-papo.  Observação:: O motor de bate-papo instantâneo inclui a tela : inline-block para garantir que o Instant Chat seja executado no Safari. |
|
| 30 | ic_text_chattable_tr | A linha da tabela que contém o carimbo da hora e o nome da pessoa que enviou a mensagem de bate-papo. É essencialmente o mesmo que ic_text_chattable.  |
|
| 31 | ic_text_chattable_td1 | O layout do carimbo da hora das mensagens de bate-papo.  |
|
| 32 | ic_text_chattable_td2_client | O layout do nome do cliente no painel de chatlog.  |
|
| 33 | ic_text_chattable_td2_tc | O layout do nome do técnico no painel de chatlog.  |
|
| 34 | ic_text_chatcontent | O layout da mensagem do bate-papo.  |
|
| 35 | ic_control_chatline | Uma linha no painel de chatlog, incluindo o carimbo da hora, o nome do remetente e a mensagem do chat.  |
|
| 36 | ic_control_chattime | O layout do carimbo da hora das mensagens do sistema no painel de chatlog.  |
|
| 37 | ic_control_chatcontent | O layout das mensagens do sistema no painel de chatlog.  |
|
| 38 | ic_link_chatcontent | O layout dos links nas mensagens do sistema no painel de chatlog.  |
|
| 39 | ic_linkhover_chatcontent | O layout dos links nas mensagens do sistema no painel de chatlog quando o cliente passa o mouse sobre o link.  |
|
| 40 | ic_complementer | A área do grande painel de chatlog que é reservada para o painel de mensagens quando este é ativado. |
|
| 41 | ic_chatdisconnected | O painel de mensagens da janela de Instant Chat quando o cliente é desconectado.  |
|
| 42 | ic_filesend_button | O botão Enviar arquivo.  |
|
| 43 | ic_filesend_button_hover | O botão Enviar arquivo quando o cliente passa o mouse sobre o botão.  |
|
| 44 | ic_filesend_button_pressed | O botão Enviar arquivo quando o cliente clica nele.  |
|
| 45 | ic_filesend_button_disabled | O botão Enviar arquivo quando estiver desativado.  |
|
| 46 | ic_disconnect_button | O botão Desconectar.  |
|
| 47 | ic_disconnect_button_hover | O botão Desconecte quando o cliente passar o mouse sobre o botão.  |
|
| 48 | ic_disconnect_button_pressed | O botão Desconectar quando o cliente clicar nele.  |
|
| 49 | ic_disconnect_button_disabled | O botão Desconecte quando estiver desativado.  |
|
| 50 | ic_send_button | O botão Enviar.  |
|
| 51 | ic_send_button_hover | O botão Enviar quando o cliente passar o mouse sobre o botão.  |
|
| 52 | ic_send_button_pressed | O botão Enviar quando o cliente clicar nele.  |
|
| 53 | ic_send_button_disabled | O botão Enviar quando estiver desativado.  |
|
| 54 | ic_lang_container | A lista suspensa do seletor de idiomas.  |
|
| 55 | ic_lang_menuitem | Itens na lista suspensa de idiomas.  |
|
| 56 | ic_lang_menuitem_hover | Um item na lista suspensa de idiomas quando o cliente passa por cima do item do menu que move aquele item.  |
|
| 57 | ic_lang_menuitem_selected | O item da lista suspensa de idiomas que está atualmente selecionado.  |
|
| 58 | ic_lang_select | O controle seletor de idiomas.  |
|
| 59 | ic_lang_select_text | O texto no controle seletor de idioma.  |
|
| 60 | ic_lang_select_text_tr | O texto no controle seletor de idioma.  |
|
| 61 | ic_lang_select_text_td | O texto no controle seletor de idioma.  |
|
| 62 | ic_lang_select_arrowimg | O botão de seta do controle seletor de idioma.  |
|
| 63 | ic_chattext | <área de texto> < d> | A área de texto do painel de mensagens na janela de bate-papo instantâneo quando o cliente está digitando uma fonte de tamanho pequeno.  Observação:: O mecanismo de bate-papo instantâneo suporta os seguintes navegadores da web:
|
| 64 | ic_chattext_first | <área de texto> < d> | A área de texto do painel de mensagens na janela de bate-papo instantâneo antes que o cliente comece a digitar.  Observação:: O mecanismo de bate-papo instantâneo suporta os seguintes navegadores da web:
Dica: Para deixar a caixa de bate-papo vazia: oLangChatModeArray["TYPE_HERE"] = ""; |
| 65 | ic_chattext_medium | <área de texto> < d> | A área de texto do painel de mensagens na janela de bate-papo instantâneo quando o cliente está digitando em tamanho de fonte médio.  Observação:: O mecanismo de bate-papo instantâneo suporta os seguintes navegadores da web:
|
| 66 | ic_chattext_medium_first | <área de texto> < d> | A área de texto do painel de mensagens na janela de bate-papo instantâneo antes que o cliente comece a digitar.  Observação:: O mecanismo de bate-papo instantâneo suporta os seguintes navegadores da web:
Dica: Para deixar a caixa de bate-papo vazia: oLangChatModeArray["TYPE_HERE"] = ""; |
| 67 | ic_chattext_large | <área de texto> < d> | A área de texto do painel de mensagens na janela de bate-papo instantâneo quando o cliente está digitando uma fonte de tamanho grande.  Observação:: O mecanismo de bate-papo instantâneo suporta os seguintes navegadores da web:
|
| 68 | ic_chattext_large_first | <área de texto> < d> | A área de texto do painel de mensagens na janela de bate-papo instantâneo antes que o cliente comece a digitar.  Observação:: O mecanismo de bate-papo instantâneo suporta os seguintes navegadores da web:
Dica: Para deixar a caixa de bate-papo vazia: oLangChatModeArray["TYPE_HERE"] = ""; |
| 69 | ic_custom_logo | O logotipo da empresa do técnico.  |
|
| 70 | ic_custom_icon | O ícone da empresa do técnico.  |
|
| 71 | ic_dialog_box | O diálogo de chatlog que você pode trazer à tona pressionando CTRL-ALT-L.  |
|
| 72 | ic_dialog_box_textarea | <área de texto> < d> | A área de texto do diálogo do chatlog. |
| 73 | ic_dialog_box_button1 | O Copy to clipboard botão do diálogo do chatlog. |
|
| 74 | ic_dialog_box_button2 | O botão Cancelar se o diálogo do chatlog. |
|
| 75 | ic_progressbars | As barras de progresso durante o envio ou recebimento de um arquivo.  |
|
| 76 | ic_progressbars_chatbottom | O fundo do painel de chatlog quando as barras de progresso estão ativas.  |
|
| 77 | ic_progressbar_instância | O layout das barras de progresso individuais.  |
|
| 78 | ic_progressbar_inner | O indicador do progresso da barra de progresso.  |
|
| 79 | ic_progressbar_title | O rótulo da barra de progresso.  |
|
| 80 | ic_progressbar_cancelbutton | Os botões de cancelamento à direita das barras de progresso.  |
|
| 81 | ic_progressbar_cancelbutton_hover | Os botões de cancelamento à direita das barras de progresso, quando o cliente passa o mouse sobre os botões.  |
|
| 82 | ic_progressbar_cancelbutton_pressed | Os botões de cancelamento à direita das barras de progresso, quando o cliente clica nos botões.  |
|
| 83 | ic_progressbar_cancelbutton_disabled | Os botões de cancelamento à direita das barras de progresso quando os botões são desativados.  |
Os estilos 84-88 não são visíveis na interface padrão de Instant Chat. Os itens 84 e superiores estão disponíveis na última versão de InstantChat.css:
| # | Nome do estilo | Tipo | Descrição ou aparência |
|---|---|---|---|
| 84 | ic_technicianname | Mostra o nome do técnico. | |
| 85 | ic_sessionend_button | Mostra um botão que o cliente pode clicar para encerrar a sessão. | |
| 86 | ic_sessionend_button_hover | O botão de fim de sessão quando o cliente passa o mouse sobre o botão. | |
| 87 | ic_sessionend_button_pressed | O botão de fim de sessão quando o cliente clica no botão. | |
| 88 | ic_sessionend_button_disabled | O botão de fim de sessão quando o botão é desativado. |
Os estilos 89-127 são aplicados às mensagens do sistema. Por padrão, todas as mensagens do sistema são comunicadas ao cliente no Log do Chat. Para evitar que uma mensagem seja exibida, mude a tela : bloco; a display: nenhuma;
Para uma descrição completa de cada classe, veja Relação entre as Classes de Controle de Gelo e os Nós de Idioma.
| # | Nome do estilo | Tipo | Descrição ou aparência |
|---|---|---|---|
| 89 | ic_control_chatline_CLIENT_CONNECTING | A mensagem do sistema quando o cliente está se conectando com o técnico. | |
| 90 | ic_control_chatline_CLIENT_CONNECTED | A mensagem do sistema confirmando que o cliente está conectado ao técnico. | |
| 91 | ic_control_chatline_CLIENT_END | A mensagem do sistema confirmando que o cliente terminou a sessão. | |
| 92 | ic_control_chatline_CLIENT_DISCONNECTED | A mensagem do sistema confirmando que o cliente está desconectado da sessão. | |
| 93 | ic_control_chatline_CLIENT_CLIENT_CANNOTSTART | A mensagem do sistema confirmando que o cliente não pode iniciar uma sessão por algum motivo. Para informações sobre os possíveis erros, ver Relação entre as Classes de Controle de GIC e os Nós de Idioma. | |
| 94 | ic_control_chatline_CLIENT_CLIENT_TIMEOUT | Esta mensagem do sistema não está em uso. | |
| 95 | ic_control_chatline_CLIENT_CLIENT_REQUESENTFILE | A mensagem do sistema confirmando que uma solicitação é enviada para o Applet para abrir a caixa de diálogo Browse. | |
| 96 | ic_control_chatline_CLIENT_CLIENT_ REQUESTSENTCANCELFILE | A mensagem do sistema confirmando que uma solicitação é enviada para o Applet para parar de enviar um arquivo. | |
| 97 | ic_control_chatline_TC_CONNECTED | A mensagem do sistema confirmando que a conexão é estabelecida com um Console Técnico específico. | |
| 98 | ic_control_chatline_TC_HOLD | A mensagem do sistema confirmando que o técnico colocou a sessão em espera. | |
| 99 | ic_control_chatline_TC_TRANSFER | A mensagem do sistema confirmando que o técnico transferiu a sessão para outro técnico ou canal. | |
| 100 | ic_control_chatline_TC_END | A mensagem do sistema confirmando que o técnico terminou a sessão. | |
| 101 | ic_control_chatline_TC_EXIT | A mensagem do sistema confirmando que o técnico deixou a sessão. | |
| 102 | ic_control_chatline_TC_DISCONNECTED | A mensagem do sistema confirmando que o técnico perdeu a conexão com o servidor web e o cliente não pode se comunicar com o técnico. | |
| 103 | ic_control_chatline_TC_START_APPLET | O link para iniciar o download do applet ou do arquivo de configuração do iPhone. | |
| 104 | ic_control_chatline_TC_SHOWSURVEY | A mensagem do sistema pedindo ao cliente que preencha uma pesquisa após o término da sessão. | |
| 105 | ic_control_chatline_TC_URLPUSH | A mensagem do sistema confirmando que o técnico enviou um URL pré-definido ao cliente. | |
| 106 | ic_control_chatline_APPLET_CONNECTING_GW | A mensagem do sistema confirmando que o portal Rescue estabeleceu uma conexão com o portal Rescue. | |
| 107 | ic_control_chatline_APPLET_AUTOPROXYLOOKUP | ||
| 108 | ic_control_chatline_APPLET_FX_START | A mensagem do sistema confirmando que o técnico iniciou o gerenciador de arquivos. | |
| 109 | ic_control_chatline_APPLET_FX_END | A mensagem do sistema confirmando que o técnico parou o gerenciador de arquivos. | |
| 110 | ic_control_chatline_APPLET_SENDINGLOGFILE | ||
| 111 | ic_control_chatline_APPLET_PRINT | ||
| 112 | ic_control_chatline_APPLET_DROPPED | A mensagem do sistema confirmando que a conexão foi abandonada. | |
| 113 | ic_control_chatline_APPLET_DISCONNECTING | A mensagem do sistema confirmando que a sessão está se desconectando. | |
| 114 | ic_control_chatline_APPLET_RECONNECTING | A mensagem do sistema confirmando que Rescue tenta reconectar a sessão. | |
| 115 | ic_control_chatline_APPLET_ERROR | A mensagem do sistema confirmando que houve um erro no Applet. | |
| 116 | ic_control_chatline_APPLET_DISCONNECTED | A mensagem do sistema confirmando que o applet foi desconectado. | |
| 117 | ic_control_chatline_APPLET_FX_NOTIFY | ||
| 118 | ic_control_chatline_APPLET_REBOOTING | A mensagem do sistema confirmando que o técnico reinicializou o computador do cliente. | |
| 119 | ic_control_chatline_APPLET_DV_START | A mensagem do sistema confirma que o técnico iniciou uma sessão de visualização da área de trabalho e compartilha sua tela com o cliente. | |
| 120 | ic_control_chatline_APPLET_DV_END | A mensagem do sistema confirma que o técnico iniciou uma sessão de visualização da área de trabalho e compartilha sua tela com o cliente. | |
| 121 | ic_control_chatline_APPLET_RC_START | A mensagem do sistema confirmando que o técnico iniciou uma sessão de controle remoto. | |
| 122 | ic_control_chatline_APPLET_RC_END | A mensagem do sistema confirmando que o técnico terminou uma sessão de controle remoto. | |
| 123 | ic_control_chatline_APPLET_CONNECTED | A mensagem do sistema confirmando que uma sessão foi iniciada. | |
| 124 | ic_control_chatline_APPLET_COMPLETED | ||
| 125 | ic_control_chatline_APPLET_CANCELLLED | A mensagem do sistema confirmando que a sessão foi cancelada. | |
| 126 | ic_text_chatline_tc | Define o formato da linha do técnico na janela de Instant Chat.  |
|
| 127 | ic_text_chatline_cliente | Define o formato da linha do cliente na janela de Instant Chat.  |
|
| 128 | tempo_de_espera | Use isto para mostrar o tempo de espera estimado em minutos. .ic_waitingtime aparece apenas uma vez por sessão. Por exemplo, .ic_waitingtime não aparece durante a reconexão. .ic_statusicon_waiting aparece durante toda a sessão sempre que o cliente está esperando o técnico. Observação:: Este estilo não é visível na interface padrão de Instant Chat. |
|
| 129 | ic_queueposição | Use isto para mostrar a posição do cliente na fila de espera de clientes. .ic_queueposition aparece apenas uma vez por sessão. Por exemplo, .ic_queueposition não aparece durante a reconexão. .ic_statusicon_waiting appears throughout the session whenever the customer is waiting for the technician. Observação:: Este estilo não é visível na interface padrão de Instant Chat. |
Article last updated: 27 September, 2022