Personalizar canais de chat usando JavaScript

Você pode personalizar o chat ao vivo Agentes e contatos interagem em tempo real e as mensagens de chat 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.

Ver exemplos

The Jungle, uma subsidiária da Classics, Inc., administra uma loja de presentes como parte de seu site. O administrador, Mowgli Kipling, configurou as seguintes chamadas de API para ajudar seus agentes de chat a trabalhar com clientes de lojas de presentes:

• As variáveis personalizadas do visitante coletam informações sobre as cores dos itens que o contato visualiza nas páginas da loja de presentes. Essas informações ficam disponíveis para o agente quando o contato inicia um chat.
• Os eventos de visitantes personalizados são registrados para cada produto em que um contato clica. Após cinco cliques no produto e nenhum clique no botão Comprar , uma mensagem proativa "Tendo problemas para decidir?" pop-up oferece ao contato um chat.

Você pode personalizar estes aspectos de seus canais 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:

• Comportamento de chat: Personalize como a janela de chat se comporta. Isso inclui abrir e fechar a janela de chat ou ativar o modo de jogo. O modo de jogo permite que os clientes joguem o jogo Snake enquanto esperam por um agente.
• Informação de chat: Personalize as informações exibidas na janela de chat. Isso inclui coisas como o nome do cliente, a imagem do agente ou o status da atividade.
• Campos, rótulos e frases personalizados: Defina campos personalizados ou personalize rótulos de campos. Você também pode configurartexto alternativo para as mensagens automatizadas mostradas aos contatos.
• Aparência da janela de chat: Personalize a aparência da janela de chat. Você pode alterar coisas como o tamanho e a posição da janela na página da web.
• CSS personalizado: Defina CSS personalizado para a janela de chat.
• Ações proativas: Personalize a experiência com ações proativas baseadas no comportamento do cliente.
• Outras funções: Outras coisas que você pode configurar incluem:
  • Ter o ambiente hostescute certos eventos.
  • Integrar canais de chat digital em aplicativos iOS ou Android.
  • Habilitar a autenticação OAuth.

            cxone('chat','enableChatAlwaysOnline');

            brandembassy('enableChatAlwaysOnline');

Adicionar chamadas 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.

1. Clique no seletor de aplicativo e selecione ACD.

2. Vá para Digital >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 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.

   Ver imagem

   

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 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('chat','enableChatAlwaysOnline');

Persistir campos personalizados do chat anterior

Você pode escolher se quer que os campos personalizados persistam ou sejam eliminados do armazenamento local após a interação ter sido iniciada. Isso permite selecionar quais campos personalizados continuarão a aparecer em todas as interações com um contato. O “field_id” refere-se ao valor do campo Ident quando um campo personalizado é criado.

        cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');

Enviar dados de postback do Cartão adaptável

Studio ações e bots pode enviar elementos de Cartão adaptável para contatos via chat. Para o chat digital enviar dados de postback para o Studio ou um bot, você precisa ativar um handler. Um manipulador de Cartão adaptável funciona no bot ou na ação Studio para gerenciar e responder a engajamentos com elementos de Cartão adaptável. O manipulador é ativado quando um usuário interage com componentes de um Cartão adaptável, como ao clicar em um botão ou selecionar uma opção em um menu suspenso. O handler decifra a entrada do usuário e determina a resposta ou ação apropriada a ser adotada. Adicione o comando handler padrão e o comando send message, para que o Studio ou os bots possam responder adequadamente ou armazenem os dados do Cartão adaptável para fins de geração de relatórios. Você também pode substituir o handler padrão por um comando handler personalizado.

Ver exemplo

							<script>
								(function (i, s, o, r, g, v, a, m) {
								g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;
								i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i[r].u = g;
								a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;
								a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m);
								})(window, document, 'script', 'cxone', 'https://web-modules-de-na1.staging.niceincontact.com/loader/1/loader.js');

								cxone('init', '1032');
								cxone('chat', 'init', 1032, 'chat_5184dc2e-0c75-4265-8a2b-4221c5aebfe1');
    
								cxone('chat', ‘adaptiveCardOnExecuteAction’, 'button1Submit', (action, chatSdkInstance) => {
								let messageContent = {
								type: "TEXT",
								payload: {
								text: action.title
								},
								postback: action.id
								}
      
								chatSdkInstance.sendMessage(messageContent)
								});
							</script>

Adicionar o comando de manipulador Cartão adaptável padrão:

            adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)

Comando send message:

            sendMessage(messageContent: MessageContent)

Criar comando handler personalizado:

					{
					"acType": "Action.Execute", // type of action Action.Execute or Action.Submit
					"acVerb": "null|string", // only if `verb` is provided in the Action
					"acActionId": "null|string" // only if id is provided in the Action
					"acData": { // `data` are provided in Action
					"firstName": "John",
					"lastName": "Doe",
					"_messageText": "Submitted something for you"
					}
			}

Ver exemplo de mensagem de entrada

							{
							...,
							"messageContent": {
							"type": "TEXT",
							"payload": {
							"text": "Submitted something for you", // use Action.Title if _messageText is not provided (in case Action.Title is not provided, send Action.type)
							},
							"postback": "{\"acType\":\"Action.Execute\",\"acData\":{\"firstName\":\"John\",\"lastName\":\"Doe\",\"_messageText\":\"Submitted something for you\"}}"
							}
							}
					}

Ver exemplo de mensagem de saída

							{
							"thread": {
							"idOnExternalPlatform": "788a67af-263d-48b1-b67e-eb75838c6509"
							},
							"messageContent": {
							"type": "ADAPTIVE_CARD",
							"payload": {
							"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
							"type": "AdaptiveCard",
							"version": "1.4",
							"body": [
							{
							"type": "TextBlock",
							"text": "Present a form and submit it back to the originator"
							},
							{
							"type": "Input.Text",
							"id": "firstName",
							"label": "What is your first name?"
							},
							{
							"type": "Input.Text",
							"id": "lastName",
							"label": "What is your last name?"
							}
							],
							"actions": [
							{
							"type": "Action.Execute",
							"title": "Fire!",
							"data": {
							"_messageText": "Submitted something for you"
							}
							}
							]
							}
							}
					}

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 chat Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta ou chat ao vivo 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.

Digital Experience 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.

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

Ativar sessões de chat simultâneas

Você pode permitir que os contatos iniciem várias sessões de chat no mesmo navegador. Se eles estiverem em um chat ativo em uma guia do navegador, isso permitirá que o contato inicie um segundo chat em uma nova guia ou janela do navegador.

Para ativar esse comportamento, você precisa especificar como os dados de chat são armazenados. Você tem duas opções:

• localStorage: Os dados persistem no navegador depois que a guia ou janela for fechada. Esse é o método de armazenamento padrão. Se várias sessões de chat forem abertas simultaneamente em guias diferentes, todas serão consideradas a mesma interação. A conversa e a experiência de chat são as mesmas em todas as guias.

• sessionStorage: Os dados são armazenados para a guia ou janela individual e, em seguida, apagados quando a guia ou janela é fechada. O usuário pode criar várias sessões de chat em diferentes guias ou janelas. A sessão de chat em cada guia é considerada uma interação única.

Para ativar sessões de chat simultâneas, adicione a chave storageType com um valor de sessionStorage, como mostrado no exemplo a seguir.

Se você usar a opção localStorage e ainda quiser limpar o histórico de conversas, poderá criar um ouvinte de eventos que remova o customerID após o término do chat.

brandembassy(
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'sessionStorage',
	},
);

Limpar histórico de conversas

Remove o histórico de conversas após o término de uma conversa de chat. Isso pode ser útil se você usar a opção de armazenamento padrão do chat, armazenamento local. Essa opção de armazenamento armazena dados mesmo após o fechamento das instâncias do navegador. Nesse caso, você pode remover especificamente o histórico de conversas limpando o customerID do armazenamento local. O exemplo a seguir cria um ouvinte de evento para escutar o evento caseStatusChanged do chat. Isso indica que uma sessão de chat terminou. Depois disso, o comando removeItem é chamado, o que remove o customerID do armazenamento local do navegador.

brandembassy('onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { 
	if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { 
		return; 
	}  
	const { status } = pushUpdatePayload.data.case || {};   
	if (typeof status === 'undefined') { 
		return; 
	}   
	// When a previous case has been closed, this will set the custom fields again. 
	if (status === 'closed') { 
		localStorage.removeItem('_BECustomerID') 
		); 
	} 
}); 

Personalize a mensagem de contato automatizada inicial

Digital Experience 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');

• Altere o texto da mensagem noPágina de traduções.

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

Digital Experience 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 configurarDigital Experience 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 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 chat 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');

Silenciar áudio de notificação de chat

Permite desativar o som de notificação de chat. O som de notificação de chat é ativado por padrão. Isso precisa ser configurado independentemente de outras configurações de som do chat. Você pode alterar o valor para “false”, para reativar o áudio de notificação de chat.

            brandembassy('muteAudioNotification', 'true');
// OR
brandembassy('muteAudioNotification');

Substituir traduções do navegador

Substitui as configurações de idioma do navegador do usuário ou uma localidade personalizada para configurar a tradução. Por exemplo, você pode garantir que determinado texto sempre apareça em inglês, independentemente das configurações de idioma do navegador do contato.

            brandembassy('init', 'brandId', 123, 'locale');

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, Digital Experience 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 chat 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 chat 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('chat','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 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 cartão de clientecampo personalizado do :

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

Clique para ver as mensagens e marcadores que você pode personalizar.

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.

Chave	Etiqueta/Mensagem padrão
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!
cancelar	Cancelar
número do processo	Caso # {caseNumber}
mudança	Alterar
conversou com	Você acabou de bater um papo com
commonErrorText	Ocorreu um erro inesperado. Tente novamente mais tarde.
pronto	Pronto
dragAndDropDropzone	Arraste e solte arquivos aqui para enviá-los
dragAndDropDropzoneRejected	Impossível fazer upload do arquivo :(
EmailLabel	E-mail
fim de papo	Terminar chat
endChatTitle	Tem certeza de que deseja encerrar esta conversa?
endGame	Finalizar o jogo
final	Encerrando chat ...
fileSendingFailed	Falha no envio do arquivo
getTranscriptDescription	Envie a transcrição desta conversa para o seguinte endereço de e-mail:
getTranscriptLink	Obtenha a transcrição do chat
invalidToken	Token inválido
ipAddressBlocked	O endereço IP está bloqueado
Carregando	Carregando...
loadPreviousButton	Carregar conversas anteriores
messageLabel	Mensagem
networkErrorText	Ocorreu um erro de rede. Tente novamente.
novo caso	Novo caso
noAgentOnlineForQueue	Nenhum agente está disponível para sua fila no momento.
desligada	Desligada
offlineFormDesc	Não estamos disponíveis no momento
offlineFormSuccessMsgHead	Obrigado!
offlineFormSuccessMsgSub	Seu e-mail foi enviado com sucesso. Retornaremos em breve.
conectados	Online
onlineFormText	Para iniciar um chat, diga-nos o seu nome. Um de nossos agentes começará a ajudá-lo imediatamente.
por favor selecione	Por favor selecione...
distribuído por	Alimentado por
preparando a sessão	Preparando sessão...
replyBoxPlaceholder	Escreva aqui, pressione <enter> para enviar
tentar novamente	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ê é o {queue} na fila.
startChatInPopup	Pergunte-nos!
startNewChat	Iniciar um novo chat
statusReconnecting	Tentando se conectar...
surveySuccesfullySent	Obrigado pelo seu feedback!
systemChattingWith	Agora você está batendo papo com {name}
tema	Tema
transciptSentFailed	O envio falhou.
transciptSuccesfullySent	Transcrição enviada com sucesso!
tryAgainButton	Tente novamente
erro inesperado	Erro inesperado.
validaçãoInvalidEmail	O endereço de email não é válido
validação obrigatória	Este campo é obrigatório
validationShorterName	Por favor, use um nome mais curto
validationShortMessage	Sua mensagem é muito curta
esperando	Esperando...
esperandoDescrição	Um de nossos agentes irá falar com você em breve.
esperandoFooter	Pressione <barra de espaço> para diminuir a espera.
WaitForAgent	Esperando agente ...
waitInQueue	Esperando pelo agente. Você está {queue} na fila.
yourNameLabel	Seu nome

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('chat','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('chat','setWindowWidth', '100%');
brandembassy('chat','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. Se quiser estilizar vários elementos, você deve adicionar todo o seu CSS em uma única chamada JavaScript. Se você usar a mesma chamada JavaScript várias vezes, a última chamada JavaScript substituirá todos os CSS anteriores. Você também pode personalizar o CSS para o chat diretamente no CXone.

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

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

Seletores de dados disponíveis

• 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

Veja um exemplo de chamada de API CSS personalizada

A seguinte chamada de JavaScript resulta em balões de chat com fundo preto e texto branco:

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

Esta imagem mostra os resultados da chamada de API de exemplo: 

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

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

Clique para ver eventos compatíveis

Use qualquer uma das seguintes entradas para substituir 'evento' 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:

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