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'});

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};');

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

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);