Personalizar canais de bate-papo usando JavaScript

Você pode personalizar chat ao vivo Agentes e contatos interagem em tempo real e mensagens de bate-papo Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta com JavaScript. O CXone Mpower 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 os seguintes aspectos do seu chat 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.:

Comportamento de chat: Personalizar 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ções de chat: Personalizar 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: Personalizar 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: Personalizar 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.

Atualmente, todos os JavaScript API suportam um carregador de Brand Embassy para cada chamada. Se você usar o chat CXone Mpower autônomo no seu site, todas essas chamadas também aceitarão um novo carregador CXone Mpower. Em algum momento, todas as APIs JavaScript para chat usarão o carregador CXone Mpower em vez do Brand Embassy.

A estrutura da chamada de JavaScript é diferente dependendo do carregador usado. Você não pode usar as duas estruturas ao mesmo tempo. Use apenas um ou outro dependendo de qual carregador você usa.

Se você usar CXone Mpower Guide para implementar o bate-papo em seu site, use o carregador de CXone Mpower. Nem todas as chamadas nesta página são aceitas no Guide, mas a Guidedocumentação do lista todas as chamadas JavaScript aceitas.

Se você usar o carregador de CXone Mpower, seja por chat digital ou Guide, estruture as chamadas assim:


            cxone('chat','enableChatAlwaysOnline');

Se você usar o carregador de Brand Embassy, estruture as chamadas assim:


            brandembassy('enableChatAlwaysOnline');

Adicionar chamadas de JavaScript a um canal de bate-papo

Se você ainda não tiver feito isso, configure um canal de bate-papo em tempo real ou mensagens de bate-papo. 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 API chamadas exatamente como mostrado. Quaisquer mudanças inesperadas podem causar mau funcionamento do seu canal.

Clique no seletor de aplicativo e selecioneACD.
Vá para Digital > Pontos de Contato Digital.
Em Seus canais, clique em Script do site.
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.
No Notepad ++, logo acima da </script> tag de fechamento 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
Copie e cole todo o script, incluindo as tags de abertura e fechamento <script> , no cabeçalho de uma página do seu site.
Visite a página modificada e envie mensagens de chat de teste para garantir que suas personalizações funcionem conforme o esperado.
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.

Chat Comportamento JavaScript Calls

As chamadas nesta seção permitem que você altere como as janelas de bate-papo se comportam.

Abrir janela de bate-papo

Abre uma janela de bate-papo 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 bate-papo

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


            brandembassy('hideChatWindow');

Chat Always Online

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


            brandembassy('chat','enableChatAlwaysOnline');

Persista Campos Personalizados do bate-papo anterior

Você pode escolher se deseja 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 de Adaptive Card

Studio ações e bots podem enviar Adaptive Card 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 Adaptive Card funciona no bot ou na ação Studio para gerenciar e responder a engajamentos com elementos de Adaptive Card. O manipulador é ativado quando um usuário interage com componentes de um Adaptive Card, 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 Adaptive Card para fins de geração de relatórios. Você também pode substituir o handler padrão por um comando handler personalizado.

View example


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

Add default Adaptive Card handler command:


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

Send message command:


            sendMessage(messageContent: MessageContent)

Create custom handler command:


					{
					"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"
					}
			}

View example of inbound message


							{
							...,
							"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\"}}"
							}
							}
					}

View example of outbound message


							{
							"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"
							}
							}
							]
							}
							}
					}

Set Authorization Code

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

Definir pré-contato Pesquisa pré-preenchido Campos

Permite que valores de campos personalizados inseridos anteriormente apareçam como uma opção de preenchimento automático em campos ou interações posteriores. IDs específicos informam à janela de chat quais valores de campos personalizados salvar. Quando um contato inicia uma nova conversa, esses campos personalizados de conversas anteriores ficam automaticamente disponíveis. Isso ajuda a economizar tempo caso um contato precise inserir as mesmas informações em uma nova sessão de chat que inseriu em uma sessão de chat anterior, como um endereço de e-mail. Se houver vários campos que você deseja que apareçam como opções de preenchimento automático, inclua-os todos no mesmo API chamada.


            cxone('chat', setPrecontactSurveyPrefilledFields', ['fieldIdent1', 'fieldIdent2']);

Iniciar automaticamente uma nova sessão de bate-papo

Cria uma nova sessão de mensagens de bate-papo Chat assíncrono no qual os contatos enviam uma mensagem de chat a qualquer momento e aguardam uma resposta ou bate-papo ao vivo Agentes e contatos interagem em tempo real se uma não estiver em andamento no momento. 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.

Você pode personalizar o texto da mensagem inicial oculta.

O início automático de uma sessão de bate-papo 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 iniciados automaticamente 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 em 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:

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 chat simultâneo Sessões

Você pode permitir que os contatos iniciem várias sessões de bate-papo 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 habilitar esse comportamento, você deve 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 é 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, limpos 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 habilitar sessões de chat simultâneas, adicione a chave storageType com um valor de sessionStorage, conforme 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',
	},
);

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

Personalizar o Mensagem Contato Automatizado Inicial

A mensagem padrão é o texto no 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 na página Traduções.

Tornar a Mensagem automatizada inicial visível para os contatos

Se quiser que o contato possa ver a mensagem automatizada inicial, adicione esta chamada ao seu script:


            brandembassy('hideFirstSentMessage', false);

Retardo Criação de caso

Você pode configurar Digital Experience para aguardar a primeira mensagem real do contato antes de criar um caso usando esta chamada:


            brandembassy('sendFirstMessageAutomatically', false);

Ativar o Modo de Jogo

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


            brandembassy('allowGameMode');

Satisfação automatizada Pesquisa

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 Informação de bate-papo

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

Obter Identidade do Cliente ID

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 bate-papo 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 fila

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

Silêncio Áudio Notificação bate-papo

Permite desativar o som de notificação de bate-papo. 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 Idioma navegador

substitui as configurações de idioma do navegador do usuário ou uma localidade personalizada para definir 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 da 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 de Cliente

Define um identificador exclusivo para o cliente no chat.


            brandembassy('setCustomerId', 'customer_id');

Definir Nome do cliente

Nome do cliente é um campo no formulário pesquisa pré-contato que os contatos devem preencher antes de conversar com um agente em um canal 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 localidade

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


            brandembassy('setLocale', 'locale');

Mostrar Caso Informação

Somente para canais 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 visível o botão Enviar transcrição , 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 System Mensagens

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 o CSS API chamadas descrito nesta página.

Campos Personalizados, Rótulos e Frases

Criar e preencher Campos Personalizados

Os campos personalizados que você pode usar com essa chamada são os mesmos que você pode usar em Cartão de cliente. 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 campo personalizado de cartão de cliente:


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

Personalizar Rótulos de bate-papo e frases

Você pode personalizar muitos dos rótulos e frases que os 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 rótulo:


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

Para alterar várias mensagens ou rótulos:


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

Clique para exibir as mensagens e os rótulos 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	Rótulo padrão/Mensagem
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 bate-papo!
cancel	Cancel
caseNumber	Case #{caseNumber}
change	Change
chattedWith	Você acabou de conversar com
commonErrorText	Houve um erro inesperado. Tente novamente mais tarde.
done	Pronto
dragAndDropDropzone	Arraste & solte arquivos aqui, para enviá-los
dragAndDropDropzoneRejected	Impossível carregar arquivo :(
EmailLabel	E-mail
endChat	End chat
endChatTitle	Tem certeza de que deseja encerrar esta conversa?
endGame	Fim de jogo
Final	Fim de conversa...
fileSendingFailed	File sending failed
getTranscriptDescription	Envie a transcrição desta conversa para o seguinte endereço de e-mail:
getTranscriptLink	Get chat transcript
invalidToken	Invalid token
ipAddressBlocked	O endereço IP está bloqueado
loading	Loading ...
loadPreviousButton	Carregar conversas anteriores
messageLabel	Mensagem
networkErrorText	Ocorreu um erro de rede. Tente novamente.
newCase	New case
noAgentOnlineForQueue	Nenhum agente está disponível para sua fila no momento.
offline	Offline
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 bate-papo, diga-nos seu nome. Um de nossos agentes começará a ajudá-lo imediatamente.
pleaseSelect	Por favor, selecione...
poweredBy	Powered by
preparingSession	Preparando a sessão...
replyBoxPlaceholder	Escreva aqui, pressione<enter> para enviar
repetir	Repetir
sendFileTextSize	Carregue arquivos menores que os formatos suportados por {filesize}
sendFileTextSupportedFormat	suportados.
sendFileTextSupportedFormatDesc	Images, Videos, {fileFormats}
sendMessageButton	Send message
sendNewEmail	Send new email
sendTranscript	Send transcript
snakeWaiting	Você está {fila} na fila.
startChatInPopup	Pergunte-nos!
iniciarNovoChat	Iniciar um novo chat
statusReconectando	Tentando conectar...
surveySuccesfullySent	Obrigado pelo seu feedback!
systemChattingWith	Agora você está conversando com {name}
topic	tema
transciptSentFailed	Send falhou.
transciptSuccesfullySent	Transcrição enviada com sucesso!
tryAgainButton	Tente novamente
unexpectedError	Erro inesperado.
validationInvalidEmail	E-mail endereço não é válido
validaçãoObrigatório	Este campo é obrigatório
validationShorterName	Por favor, use nome mais curto
validationShortMessage	Sua mensagem é muito curta
esperando	Em espera...
aguardandoDescrição	Um de nossos agentes falará com você em breve.
waitingFooter	Clique <spacebar> para encurtar a espera.
waitingForAgent	Em espera for agent...
waitingInQueue	Em espera para agente. Você é o {queue} na fila.
yourNameLabel	Your name

Translate Custom campos

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

Você pode modificar a aparência da janela de bate-papo.

Fechar Chat Ícone

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 Cabeçalho


            brandembassy('hideAssignedAgent');

Ocultar agente atribuído


            brandembassy('hideHeader');

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

Modo de exibição completa

Posição e deslocamento

A chamada setPositionX 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 Responder Box


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

CSS personalizado com seletores de dados

Você pode personalizar a aparência da janela de bate-papo 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 Mpower.

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 { fundo: vermelho; }

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.

Gatilho de execução

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


            brandembassy('executeTrigger', 'trigger_id');

Definir Evento Visitante

Armazena o comportamento do cliente definido (o evento) para fins de relatório. Quando esta chamada é usada com o 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');

Conversão da loja

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

Visitante da Web Tags

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.

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

Para adicionar uma tag a um contato:


            brandembassy('assignTag', 'tagID');

Para remover uma tag de um contato:


            brandembassy('removeTag', 'tagID');

Integração com aplicativos de terceiros

As chamadas nesta seção permitem que você receba notificações por push quando ocorrerem determinados eventos de bate-papo.

Reconhecer threads ativos na janela de bate-papo


            brandembassy('getOngoingThreads');

Reconhecer contato em andamento na janela de bate-papo


            brandembassy('getOngoingContact')

Receber Notificação por push para eventos de bate-papo 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 para todos os eventos de chat:


            brandembassy('onAnyPushUpdate', callback);

Integrar a aplicativos Android ou iOS

Você pode integrar o bate-papo 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 o JavaScript desta página para modificar a aparência e o comportamento do chat function:


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