Personalizar chat do Guide usando APIs
Você pode personalizar a aparência e o comportamento do chat implementado com o Guide usando estas APIs relacionadas a chat.
Chamadas de API de comportamento de chat
As chamadas nesta seção permitem que você altere o comportamento das janelas de chat do Guide.
Definir código de autorização
Define um código de autorização para o fluxo oAuth. OAuth é um protocolo de autenticação. Ele permite que um aplicativo interaja com outro em seu nome sem fornecer suas senhas. Deve ser chamado antes da inicialização do chat.
cxone('chat','setAuthorizationCode', 'authorization_code');
Personalize a mensagem de contato automatizada inicial
Quando um chat começa no Guide, um novo caso A conversa inteira com um agente por meio de um canal. Por exemplo, uma interação pode ser uma chamada de voz, e-mail, chat ou conversa de mídia social. é criado e adicionado à fila quando a primeira mensagem da sessão de chat é enviada. Uma mensagem oculta e automatizada é enviada em nome do visitante quando a sessão de chat é iniciada. Isso diminui o tempo que os visitantes esperam por um agente. Embora a mensagem inicial esteja oculta do contato, o agente pode vê-la.
A mensagem padrão é o texto do botão em que o cliente clica para iniciar a conversa. Você pode personalizar o texto da mensagem inicial automatizada de três maneiras:
-
Substitua o texto do botão padrão.
cxone('chat','sendFirstMessageAutomatically', 'Hello');
-
Altere a mensagem inicial dinamicamente.
cxone('chat','setFirstAutomatedMessageContent', 'Hello, I have a question');
-
Altere o texto da mensagem na página de traduções.
Tornar a mensagem automatizada inicial visível para os contatos
Se você quiser que o visitante veja a mensagem automática inicial, adicione esta chamada ao seu script:
cxone('chat','hideFirstSentMessage', false);
Atrasar Criação de Caso
Guide cria um novo caso e o adiciona à fila quando a primeira mensagem da sessão de chat é enviada. Uma mensagem oculta e automatizada é enviada em nome do visitante quando a sessão de chat é iniciada. Isso diminui o tempo que os visitantes esperam por um agente. As sessões de chat começam quando um visitante clica no ícone de chat para iniciar uma conversa. Embora a mensagem inicial esteja oculta do visitante, o agente pode vê-la.
Você pode configurar o Guide para esperar pela primeira mensagem real do contato antes de criar um caso usando esta chamada:
cxone('chat','sendFirstMessageAutomatically', false);
Habilitar modo de jogo
Permite que os visitantes joguem o jogo Snake enquanto esperam por um agente.
cxone('chat','allowGameMode');
Pesquisa de satisfação automatizada
Uma pesquisa de satisfação pode ser detectada automaticamente e exibida em um pop-up. Isso habilita ou desabilita a detecção e exibição ou não.
cxone('chat','automatedSatisfactionSurveyModal', 'false');
Chamadas de API de informações do chat
Essas chamadas permitem que você personalize as informações que estão disponíveis para os visitantes durante uma sessão de chat.
Obter ID de identidade do cliente
Retorna o identificador exclusivo do visitante no chat.
cxone('chat','getCustomerIdentityId');
Definir ID do cliente
Define um identificador exclusivo para o visitante no chat.
cxone('chat','setCustomerId', 'customer_id');
Ocultar contador de filas
O contador de filas permite que um visitante saiba em quanto tempo um agente poderá ajudá-lo com base em onde ele está na fila do agente. Você pode ocultar o contador de filas após o visitante ter sido roteado com sucesso para um agente. Isso permite que os agentes removam cartões de clientes de sua caixa de entrada sem que os visitantes percebam.
cxone('chat','hideQueueCounterAfterAssignment');
Definir status de atividade
Altera a mensagem na barra de atividades. Por exemplo, você pode usá-lo para comunicar seu tempo de resposta para uma sessão de mensagens de chat Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta. Isso pode ser útil porque as mensagens de chat são uma forma assíncrona de chat, portanto, os visitantes podem ter que esperar para ouvir um agente.
cxone('chat','setStatusMessage', 'We typically reply within 3 hours.');
Definir imagem do agente
Altera dinamicamente a imagem do agente exibida na janela de chat. Por padrão, Guide usa a imagem no perfil do agente. Quando você inclui essa chamada em seu script, ela usa a imagem especificada pela URL no snippet de código. Substitua o URL de exemplo pelo URL da imagem que você deseja que o chat use.
cxone('chat','setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');
Definir o nome do cliente
Nome do cliente é um campo no formulário de pesquisa pré-contato, que os visitantes devem preencher antes de conversar com um agente em um canal de mensagens de chat Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta. Essa chamada de API preenche o campo dinamicamente.
cxone('chat','setCustomerName', 'Elizabeth');
Definir formato de data
Define o formato como data absoluta (01/01/2022) ou data relativa (hoje, segunda-feira).
cxone('chat','setDateFormat', 'date_format');
Definir local
Define a localidade para traduções na janela de chat.
cxone('chat','setLocale', 'locale');
Mostrar informações do caso
Apenas paramensagens de bate-papo Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta canais. Mostra informações do caso para o visitante.
cxone('chat','showCaseInfo');
Mostrar / ocultar o botão Enviar transcrição
Se você tornar o botão Enviar transcrição visível, deverá configurar o canal de chat para permitir que os visitantes enviem a transcrição do chat para si mesmos. Configure esta opção para mensagens de chat ou chat ao vivo.
cxone('chat','showSendTranscript');
cxone('chat','hideSendTranscript');
Mostrar/ocultar mensagens do sistema
Mostra ou oculta mensagens do sistema, como histórico de atribuição de agentes.
cxone('chat','showSystemMessages');
cxone('chat','hideSystemMessages');
Termos de uso
Permite disponibilizar um documento de termos de uso para os visitantes na janela de chat. Esta função adiciona um botão à janela. Você pode personalizar o rótulo e o estilo do botão e o que acontece quando os visitantes clicam nele. A ação ao clicar pode mostrar os termos de uso como uma janela interna ou um link externo.
Uma janela interna:
cxone('chat','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');
Um link externo:
cxone('chat','showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');
Para desativar o recurso:
cxone('chat','hideTermsOfUse');
Campos, rótulos e frases personalizados
Criar e preencher campos personalizados
Os campos personalizados que você pode usar com esta chamada são os mesmos que você pode usar no Cartão de Cliente. Se você usar essas chamadas antes de abrir uma janela de chat, os campos no formulário pré-contato serão preenchidos com os dados incluídos na chamada da API.
Para definir o valor de um campo personalizado do caso:
cxone('chat','setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');
Para definir o valor de um campo personalizado do Cartão de Cliente:
cxone('chat','setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');
Personalizar rótulos e frases
Você pode personalizar muitos dos rótulos e frases que os canais de chat do Guide usam, bem como definir as personalizações. Se você precisar alterar dinamicamente as frases ou rótulos de tela, use estas chamadas de API.
Para alterar uma única mensagem ou marcador:
cxone('chat','setTranslation', 'key', 'your translation');
Para alterar várias mensagens ou marcadores:
cxone('chat','setTranslations', {key1: 'your custom label', key2: 'your custom message'});
![Fechado](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
Chaves indicam variáveis que o sistema substitui com dados reais. Por exemplo, {caseNumber} é substituído pelo número do caso da sessão de chat do contato.
|
Default label/Message |
---|---|
allAgentsForQueueAreBusy | Todos os nossos agentes dedicados à sua fila estão ocupados no momento. Há {queue, plural,one {} other {}} <strong>{queue, number}</strong> {queue, plural, one {pessoa} other {pessoas}} à sua frente na fila. |
beginButton |
Comece o chat! |
cancel | Cancelar |
caseNumber | Caso # {caseNumber} |
change | Alterar |
chattedWith | Você acabou de conversar com |
commonErrorText | Ocorreu um erro inesperado. Tente novamente mais tarde. |
done | Pronto |
dragAndDropDropzone | Arraste e solte arquivos aqui para enviá-los |
dragAndDropDropzoneRejected | Impossível fazer upload do arquivo :( |
EmailLabel | |
endChat | Terminar chat |
endChatTitle | Tem certeza de que deseja encerrar esta conversa? |
endGame | Finalizar o jogo |
ending | Encerrando o chat... |
fileSendingFailed | Falha no envio do arquivo |
getTranscriptDescription | Envie a transcrição desta conversa para o seguinte endereço de e-mail: |
getTranscriptLink | Obter transcrição do chat |
invalidToken | Token inválido |
ipAddressBlocked | O endereço IP está bloqueado |
loading | Carregando... |
loadPreviousButton | Carregar conversas anteriores |
messageLabel | Mensagem |
networkErrorText | Ocorreu um erro de rede. Tente novamente. |
newCase | Novo caso |
noAgentOnlineForQueue | Nenhum agente está disponível para sua fila no momento. |
offline | desligada |
offlineFormDesc | Não estamos disponíveis no momento |
offlineFormSuccessMsgHead | Obrigado! |
offlineFormSuccessMsgSub | Seu e-mail foi enviado com sucesso. Retornaremos em breve. |
online | Online |
onlineFormText | Para iniciar um chat, diga-nos o seu nome. Um de nossos agentes começará a ajudá-lo imediatamente. |
pleaseSelect | Por favor selecione... |
poweredBy | Alimentado por |
preparingSession | Preparando sessão... |
replyBoxPlaceholder | Escreva aqui, pressione <enter> para enviar |
retry | Tentar Novamente |
sendFileTextSize | Faça upload de arquivos menores que {filesize} |
sendFileTextSupportedFormat | formatos suportados. |
sendFileTextSupportedFormatDesc | Imagens, vídeos, {fileFormats} |
sendMessageButton | Enviar mensagem |
sendNewEmail | Enviar novo e-mail |
sendTranscript | Enviar transcrição |
snakeWaiting | Você está {queue} na fila. |
startChatInPopup | Pergunte-nos! |
startNewChat | Iniciar um novo chat |
statusReconnecting | Tentando se conectar... |
surveySuccesfullySent | Obrigado pelo seu feedback! |
systemChattingWith | Agora você está conversando com {name} |
topic | tema |
transciptSentFailed | O envio falhou. |
transciptSuccesfullySent | Transcrição enviada com sucesso! |
tryAgainButton | Tente novamente |
unexpectedError | Erro inesperado. |
validationInvalidEmail | O endereço de email não é válido |
validationMandatory | Este campo é obrigatório |
validationShorterName | Por favor, use um nome mais curto |
validationShortMessage | Sua mensagem é muito curta |
waiting | Esperando... |
waitingDescription | Um de nossos agentes irá falar com você em breve. |
waitingFooter | Pressione <barra de espaço> para diminuir a espera. |
waitingForAgent | Esperando agente ... |
waitingInQueue | Esperando pelo agente. Você está {queue} na fila. |
weAreOffline | No momento, estamos offline. |
weAreOnline | Estamos online |
yourNameLabel | Seu nome |
Chamadas de API de aparência da janela de chat
Você pode modificar a aparência da janela de chat usada pelo Guide.
Ocultar agente atribuído
cxone('chat','hideAssignedAgent');
Ocultar Cabeçalho
cxone('chat','hideHeader');
Mostrar avatar do cliente
cxone('chat','showCustomerAvatar');
Mostrar botão Enviar
cxone('chat','showSendButton');
Definir limite de caracteres para caixa de resposta
cxone('chat','setReplyBoxLimit', '280');
CSS personalizado com seletores de dados
Você pode personalizar a aparência das janelas de chat com CSS personalizado usando seletores de dados em suas chamadas de API. Os seletores de dados permitem que você especifique a parte da janela de bate-papo à qual deseja aplicar o CSS personalizado. Defina o seletor de dados usando o atributo data-selector . Defina-o igual ao nome do componente da janela de chat que você deseja modificar.
Para adicionar CSS personalizado com seletores de dados, use esta chamada de API como referência:
cxone('chat','setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');
![Fechado](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
-
ACTIVITY_BAR
-
AGENT_MESSAGE
-
AGENT_MESSAGE_BUBBLE
-
AVATAR
-
CONTENT
-
CUSTOMER_MESSAGE
-
CUSTOMER_MESSAGE_BUBBLE
-
DELIMITER
-
DROPDOWN_MENU
-
HEADER
-
INPUT
-
IS_TYPING
-
MESSENGER
-
POPUP
-
PRECONTACT_SURVEY
-
PRECONTACT_SURVEY_DESCRIPTION
-
PRIMARY_BUTTON
-
REPLY_BOX
-
SECONDARY_BUTTON
-
SEND_BUTTON
-
TEXTAREA
-
TEXT_BUTTON
-
WIDGET
-
WINDOW
Aplique componentes CSS personalizados usando apenas o atributo data-selector . Não o aplique a seletores de classe ou outras partes do código JavaScript, como neste exemplo:
.Widget__Widget___1qQCf { background: red; }
Integrar com aplicativos de terceiros
As chamadas nesta seção permitem que você receba notificações push quando ocorrerem determinados eventos de chat.
Reconhecer conversas ativas na janela de chat
cxone('chat','getOngoingThreads');
Reconhecer o contato contínuo na janela de chat
cxone('chat','getOngoingContact');
Receber notificações via push para eventos de chat específicos
![Fechado](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
Use qualquer uma das seguintes entradas para substituir “event” nos exemplos abaixo.
-
CaseToRoutingQueueAssignmentChanged
-
PageViewCreated
-
MessageCreated
-
MessageDeliveredToUser
-
MessageDeliveredToEndUser
-
MessageSeenByUser
-
MessageSeenByEndUser
-
MessageReadChanged
-
MessageAddedIntoCase
-
CaseInboxAssigneeChanged
-
CaseCreated
-
CaseStatusChanged
-
SenderTypingStarted
-
SenderTypingEnded
-
MessageNoteCreated
-
ContactRecipientsChanged
Para receber uma notificação para um evento de chat:
cxone('chat','onPushUpdate', 'event', callback);
Para receber uma notificação para mais de um evento de chat:
cxone('chat','onPushUpdate', ['event', 'event', 'event'], callback);
Para receber uma notificação de todos os eventos de bate-papo:
cxone('chat','onAnyPushUpdate', callback);