Personalizar canais de chat usando JavaScript

Você pode personalizar o chat ao vivoFechado Agentes e contatos interagem em tempo real e as mensagens de chatFechado Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta com JavaScript. O CXone fornece personalizações padrão e suas chamadas de API JavaScript correlacionadas. Você precisa incluir essas chamadas de API com a tag do script que adiciona o chat ao seu site. Para adicionar esses recursos, você precisa de acesso ao código do seu site. Esta página explica onde adicionar o JavaScript e as linhas exatas de código a serem incluídas. Você também precisa ter familiaridade com JavaScript ou desenvolvimento na web para usar com confiança as informações desta página.

Você pode personalizar estes aspectos de seus canaisFechado Uma maneira de os contatos interagirem com agentes ou bots. Um canal pode ser voz, e-mail, chat, mídia social e assim por diante. de chat:

Atualmente, todas as APIs JavaScript usam um carregador Brand Embassy para cada chamada. Algumas chamadas aceitam um novo carregador CXone. Em algum momento, todas as APIs JavaScript para chat usarão o carregador CXone em vez do Brand Embassy.

Adicionar chamadas de JavaScript a um canal de chat

Se ainda não o fez, configure um canal de chat ao vivo ou de mensagens de chat. Teste o canal para garantir que ele funcione com as configurações padrão antes de adicionar personalizações. Configure as personalizações de chat em um ambiente de teste antes de liberá-las em seu ambiente de produção. Isso ajudará a minimizar as interrupções para os visitantes do seu site. Isso também ajudará a garantir que suas personalizações funcionem conforme o esperado.

Copie o script e as chamadas de API exatamente como mostrado. Quaisquer mudanças inesperadas podem causar mau funcionamento do seu canal.

  1. Clique no seletor de aplicativo e selecione ACD.
  2. Vá para Digital Experience >Pontos de Contato Digital.

  3. Em Seus canais, clique em Script do site.
  4. Copie o código JavaScript da página e cole-o em um programa de edição de texto como o Notepad++. Você não precisa incluir as tags <script> de abertura e fechamento.
  5. No Notepad++, logo acima da tag de fechamento </script> do código que você colou, adicione as chamadas de JavaScript que deseja usar. Na imagem de exemplo a seguir, o comentário indica onde adicionar chamadas. As chamadas com suporte que você pode usar são descritas no restante desta página.

  6. Copie e cole todo o script, incluindo as tags <script> de abertura e fechamento, no cabeçalho de uma página do seu site.

  7. Visite a página modificada e envie mensagens de chat de teste para garantir que suas personalizações funcionem conforme o esperado.

  8. Quando estiver totalmente testado e funcionando conforme o esperado, copie o script final no cabeçalho de cada página que deve ter o widget de chat.

Chamadas de JavaScript de comportamento de chat

As chamadas nesta seção permitem que você altere o comportamento das janelas de chat.

Abrir a janela de chat

Abre uma janela de chat automaticamente. O comportamento padrão é que as janelas de chat sejam abertas quando um contato clica no ícone de chat.


            brandembassy('openChatWindow');

Fechar janela de chat

Fecha uma janela de chat automaticamente. O comportamento padrão é que as janelas de chat fechem quando um contato clica no ícone de chat.


            brandembassy('hideChatWindow');

Chat sempre online

Exibe a janela de chat como se houvesse agentes disponíveis, mesmo quando nenhum agente estiver online.


            brandembassy('enableChatAlwaysOnline');

Definir código de autorização

Define um código de autorização para um fluxo OAuth. OAuth é um protocolo de autenticação. Ele permite que um aplicativo interaja com outro em seu nome sem fornecer suas senhas. Isso deve ser chamado antes da inicialização do chat.


            brandembassy('setAuthorizationCode', 'authorization_code');

Iniciar automaticamente uma nova sessão de chat

Cria uma nova sessão de mensagens de chatFechado Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta ou chat ao vivoFechado Agentes e contatos interagem em tempo real se nenhuma estiver em andamento. Use esta chamada em páginas de baixo tráfego do seu site para evitar sobrecarregar seus agentes com contatos.

Engajamento digital 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 cliente quando a sessão de bate-papo é iniciada. Isso diminui a quantidade de tempo que os contatos esperam por um agente iniciando o processo mais cedo. As sessões de bate-papo começam quando um contato clica no ícone de bate-papo para iniciar uma conversa ou quando a janela de bate-papo é aberta para sessões de bate-papo iniciadas automaticamente. Embora a mensagem inicial esteja oculta do cliente, o agente pode vê-la.

Você pode personalizar o texto da mensagem inicial, oculta .

O início automático de uma sessão de chat ignora o formulário de pesquisa pré-contato. Por isso, você precisa usar outros métodos para coletar informações sobre os contatos. Por exemplo, você pode fazer com que os agentes insiram as informações manualmente no cartão do cliente . Você também pode configurar a autenticação do cliente usando uma integração OAuth.

O roteamento para casos autoiniciados ocorre de acordo com as filas de roteamentoFechado O sistema usa filas de roteamento para determinar para quais agentes rotear os casos. O administrador do sistema cria filas de roteamento para que certos casos sejam roteados para agentes com experiência nesse tipo de caso. configuradas no Digital Experience. Para sessões de chat ao vivo, se nenhum agente estiver disponível, a janela de chat exibirá uma mensagem Aguardando agente disponível.

Para iniciar automaticamente uma sessão de chat, use estas chamadas na ordem mostrada:


            brandembassy('openChatWindow');

brandembassy('autoStartSession');

Se você adicionar chamadas adicionais ao script, autoStartSession sempre deverá ser a última chamada no script. Por exemplo:


            // set customer name (as this is required field)
brandembassy('setCustomerName', 'Elizabeth');

// open chat window so user can start to chat
brandembassy('openChatWindow');

// and finally start the new chat session (without the pre-chat form)
brandembassy('autoStartSession');

Personalize a mensagem de contato automatizada inicial

Engajamento digital 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 cliente quando a sessão de bate-papo é iniciada. Isso diminui a quantidade de tempo que os contatos esperam por um agente iniciando o processo mais cedo. As sessões de bate-papo começam quando um contato clica no ícone de bate-papo para iniciar uma conversa ou quando a janela de bate-papo é aberta para sessões de bate-papo iniciadas automaticamente. Embora a mensagem inicial esteja oculta do cliente, 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.

                brandembassy('sendFirstMessageAutomatically', 'Hello');
  • Altere a mensagem inicial dinamicamente.

                brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

Tornar a mensagem automatizada inicial visível para os contatos

Se você quiser que o contato veja a mensagem automática inicial, adicione esta chamada ao seu script:


            brandembassy('hideFirstSentMessage', false);

Atrasar Criação de Caso

Engajamento digital 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 cliente quando a sessão de bate-papo é iniciada. Isso diminui a quantidade de tempo que os contatos esperam por um agente iniciando o processo mais cedo. As sessões de bate-papo começam quando um contato clica no ícone de bate-papo para iniciar uma conversa ou quando a janela de bate-papo é aberta para sessões de bate-papo iniciadas automaticamente. Embora a mensagem inicial esteja oculta do cliente, o agente pode vê-la.

Você pode configurarEngajamento digital esperar pela primeira mensagem real do contato antes de criar um caso usando esta chamada:


            brandembassy('sendFirstMessageAutomatically', false);

Habilitar modo de jogo

Permite que os contatos joguem o jogo Snake enquanto esperam por um agente.


            brandembassy('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.


            brandembassy('automatedSatisfactionSurveyModal', 'true');
brandembassy('automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'

Chamadas de JavaScript de informações de chat

Essas chamadas permitem que você personalize as informações que estão disponíveis para os contatos durante uma sessão de chat.

Obter ID de identidade do cliente

Retorna o identificador exclusivo do cliente no chat.


            brandembassy('getCustomerIdentityId');

Ocultar formulário de pesquisa de pré-contato

O formulário de pesquisa de pré-contato aparece no início de uma sessão de mensagens de chatFechado Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta. Ele coleta informações sobre o contato, como seu nome. Se desejar, você pode ocultar o formulário de pesquisa de pré-contato e fazer com que a janela de chat apareça assim que um contato iniciar uma sessão de mensagens de chat.


            brandembassy('hidePreSurvey');

Ocultar contador de filas

O contador de filas permite que um contato 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 contato 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 contatos percebam.


            brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');

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. Isso pode ser útil porque as mensagens de chat são uma forma assíncrona de chat, portanto, os contatos podem ter que esperar para ouvir um agente.


            brandembassy('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, Engajamento digital 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ê quer que o chat use.


            brandembassy('setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');

Definir  ID do cliente

Define um identificador exclusivo para o cliente no chat.


            brandembassy('setCustomerId', 'customer_id');

Definir o nome do cliente

Nome do cliente é um campo no formulário de pesquisa de pré-contato, que os contatos devem preencher antes de conversar com um agente em um canal de mensagens de chatFechado Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta. Essa chamada preenche o campo dinamicamente.


            brandembassy('setCustomerName', 'Elizabeth');

Definir formato de data

Pode ser definido para usar o formato de data absoluta (03/12/2035) ou formato de data relativa (hoje, segunda-feira).


            brandembassy('setDateFormat', 'date_format');
// date_format can be 'absolute' or 'relative'

Definir local

Define a localidade para traduções na janela de chat.


            brandembassy('setLocale', 'locale');

Mostrar informações do caso

Apenas para canais de mensagens de chatFechado Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta. Mostra informações do caso para o contato.


            brandembassy('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 contatos enviem a transcrição do chat para si mesmos. Configure esta opção para mensagens de chat ou chat ao vivo.


            brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');

Mostrar/ocultar mensagens do sistema

Mostra ou oculta mensagens do sistema, como histórico de atribuição de agentes.


            brandembassy('hideSystemMessages');
brandembassy('showSystemMessages');

Termos de uso

Você pode disponibilizar um documento de termos de uso para os contatos 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 contatos clicam nele. A ação ao clicar pode mostrar os termos de uso como:

  • Uma janela interna
  • Um link externo

            // Internal Modal Window
brandembassy('showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

// External Link
brandembassy('showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

// If you want to explicitely disable this feature, you can use
brandembassy('hideTermsOfUse');

Para personalizar a aparência do botão ou da janela interna, use as chamadas de API CSS descritas neste tópico.

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 em cartão de clientes. Se você usar essas chamadas antes de abrir uma janela de chat, os campos no formulário de pré-contato serão preenchidos com os dados incluídos na chamada de JavaScript.

Para definir o valor de um campo personalizado de caso:


            brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

Para definir o valor de um campo personalizado do cartão de cliente:


            brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

Personalize rótulos e frases de chat

Você pode personalizar muitos dos rótulos e frases que canais de chat digital usam, bem como definir as personalizações. Se você precisar alterar dinamicamente as frases ou os rótulos de tela, use estas chamadas de JavaScript.

Para alterar uma única mensagem ou marcador:


            brandembassy('setTranslation', 'key', 'your translation');

Para alterar várias mensagens ou marcadores:


            brandembassy('setTranslations', {
   key1: 'your custom label',
   key2: 'your custom message'
});

Traduzir campos personalizados

Você pode traduzir campos personalizados exibidos na janela de chat.


            brandembassy('chat', 'setCustomTranslations', {
    myCustomFieldATranslationKey: "Custom field value A",
    myCustomFieldBTranslationKey: "Custom field value B",
});

Chamadas de aparência da janela de chat

Você pode modificar a aparência da janela de chat.

Ícone Fechar chat

Quando definido como true, um ícone X é exibido na janela em vez da opção Encerrar chat no menu de configurações.


            brandembassy('enableCloseIcon', true);

Ocultar agente atribuído


            brandembassy('hideAssignedAgent');

Ocultar Cabeçalho


            brandembassy('hideHeader');

Esconder Pop-Ups


            brandembassy('hidePopups');

Mostrar avatar do cliente


            brandembassy('showCustomerAvatar');

Mostrar o botão Enviar


            brandembassy('showSendButton');

Tamanho

Personaliza a largura e a altura da janela de chat. Você pode usar unidades absolutas ou relativas suportadas pela especificação CSS.


            brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

Modo de exibição total


            brandembassy('setFullDisplay');
// OR
brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

Posição e Offset

osetPositionX call define o lado esquerdo ou direito da tela como a posição inicial. As chamadas setOffsetX e setOffsetY definem quantos pixels a janela de chat é deslocada horizontalmente e verticalmente do ponto inicial, respectivamente.


            // set horizontal starting position
brandembassy('setPositionX', 'right');
													
// set horizontal and vertical offset
brandembassy('setOffsetX', '40'); // default = 20
brandembassy('setOffsetY', '40'); // default = 20

Definir limite de caracteres para caixa de resposta


            brandembassy('setReplyBoxLimit', '280'); // default = null

CSS personalizado com seletores de dados

Você pode personalizar a aparência da janela de chat adicionando seu próprio CSS. Especifique a parte da janela de chat que você deseja estilizar com um atributo data-selector. O menu suspenso abaixo contém uma lista de todos os componentes que você pode selecionar com o atributo data-selector. Os seletores de dados permitem que você especifique a parte da janela de chat à qual deseja aplicar o CSS personalizado. Depois de data-selector, adicione sua estilização entre chaves. Você deve adicionar todo o seu CSS em uma única chamada de JavaScript.

Para adicionar CSS personalizado com seletores de dados, use esta chamada de JavaScript como referência:


            brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important} 
	[data-selector="CONTENT"] {background: green !important}`);

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

Os componentes da janela podem consistir em vários blocos aninhados. Os seletores de componentes listados nesta seção nomeiam a raiz de cada componente. Se você deseja aplicar CSS a um dos blocos aninhados de um componente, use o console do desenvolvedor para inspecionar o componente e selecionar o bloco correto.

Ações proativas

As chamadas nesta seção permitem que você envolva os clientes de forma proativa em um chat com base em seu comportamento.

Executar gatilho

Inicia o gatilho Automação do fluxo de trabalho definido pelo trigger_id.


            brandembassy('executeTrigger', 'trigger_id');

Definir evento do visitante

Armazena o comportamento do cliente definido (o evento) para fins de relatório. Quando esta chamada é usada com o CXone Mobile SDK, event_type é alterado para custom_event_type.


            brandembassy('setVisitorEvent', 'event_type', 'custom_event_data');

Definir variável do visitante

Armazena as informações do cliente definidas para fins de relatório.


            brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');

Armazenar conversão

Armazena o comportamento do cliente como uma conversão para fins de relatório.


            brandembassy('storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 
// conversion_date is optional, default is now

Tags de visitantes da Web

O conteúdo desta seção é para um produto ou recurso em versão controlada (CR). Se você não faz parte do grupo CR e deseja obter mais informações, entre em contato com o seu Representante de Contas do CXone.

Você pode marcar contatos que exibem certos comportamentos em seu site. Este recurso usa tags do Digital Experience e requer o Guia.

Para adicionar uma tag a um contato:


            brandembassy('assignTag', 'tagID');

Para remover uma tag de um contato:


            brandembassy('removeTag', 'tagID');

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


            brandembassy('getOngoingThreads');

Reconhecer o contato contínuo na janela de chat


            brandembassy('getOngoingContact')

Receber notificações via push para eventos de chat específicos

Para receber uma notificação para um evento de chat:


            brandembassy('onPushUpdate', 'event', callback);

Para receber uma notificação para mais de um evento de chat:


            brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);

Para receber uma notificação de todos os eventos de chat:


            brandembassy('onAnyPushUpdate', callback);

Integrar a aplicativos Android ou iOS

Você pode integrar o chat digital em aplicativos Android ou iOS. O aplicativo nativo deve usar WebView onde o código de inicialização JavaScript é adicionado. Este código de exemplo usa chamadas de JavaScript desta página para modificar a aparência e o comportamento da função de chat:


            <script async type=”text/javascript”>
  (function(i,s,o,r,g,v,a,m){g=v?g+'?v='+v:g;i['BrandEmbassy']=r;
    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();
    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;
    a.src=g+'?'+Math.round(Date.now()/1000/3600);m.parentNode.insertBefore(a,m)
  })(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');

  //init of Livechat
  brandembassy(‘init’, BRAND_HASH);

  // hiding unwanted UI elements
  brandembassy('hideHeader');
  brandembassy('hidePopups');
 
  // stretching livechat to full width and height
  brandembassy('setFullDisplay');

  // Customer's name
  brandembassy('setCustomerName', 'CUSTOMER_NAME');

  // Other optional Custom Fields
  brandembassy('setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');
    
  // Start Chat
  brandembassy('openChatWindow');
  brandembassy('autoStartSession');

</script>