Documentação SDK

Abaixo estão os eventos que podem ser executados através da biblioteca SDK que permitem a realização de diferentes tipos de ações com a janela de bate-papo. Por exemplo, abrir e minimizar a janela de bate-papo, rubricar propriedades do usuário que está interagindo com a janela de bate-papo, enviar uma mensagem/vistoria ao bot (para que ele responda), entre outras ações.

Além disso, também é possível inscrever-se em uma série de eventos a serem acionados depois que o usuário interage com a janela de bate-papo. Por exemplo, os clientes podem medir em sua própria ferramenta de dados cada vez que um usuário clica no botão iniciar.

Importante: Recomendamos que esta documentação seja lida e utilizada pelos desenvolvedores.

Para usar eventos SDK, recomenda-se utilizar o método ready do objeto $aivo:

$aivo.ready(function() { ... }).

Isto funcionará como uma chamada de retorno e acionará, imediatamente após o término das configurações iniciais da janela, os eventos dentro da função passada por parâmetro.

Abaixo está um exemplo de como seria a chamada. E abaixo, todos os eventos e as ações realizadas por cada um deles são detalhados.

Exemplo:

// include script without async attribute

$aivo.ready(function() {

$aivo.user.set("name", "Steven Paul Jobs");

$aivo.user.set("device", "iPhone");

$aivo.chat.open();

$aivo.chat.addMessage("Welcome, how can I help you?");

});

</script>

Ações na janela de chat

+ Maximizar a janela

Gera a janela de bate-papo maximizada.

Execução:

$aivo.chat.maximize();

+ Abrir a janela de chat:

Abre a janela de chat e oculta o botão de início.

Execução:

$aivo.chat.open();

+ Fechar a sessão e a janela de chat:

Minimiza a janela de chat e encerra a sessão. Volta a mostrar o botão de início.

Execução:

$aivo.chat.close();

+ Fechar a janela de chat (minimizar)

Minimizar a janela de bate-papo e mostrar o botão de início.

Execução:

$aivo.chat.minimize()

+ Ajustar a estética e a funcionalidade da janela de bate-papo para Apps

Quando este comando é executado, a janela de chat sofre as seguintes modificações:

As ações para maximizar, minimizar e fechar a janela não são exibidas.
Não é possível arrastar a janela.
A janela ocupa 100% da largura e altura disponíveis no caso de estar funcionando em um dispositivo móvel.

Execução:

$aivo.chat.embed();

+ Enviar uma mensagem para o usuário (como se fosse enviada pelo bot)

Adicione uma mensagem à janela de bate-papo, ela é exibida como uma mensagem do Bot.

Exemplo:

$aivo.chat.addMessage ("Olá cliente, sou AgentBot");

+ Enviar uma mensagem para o bot (como se fosse enviada pelo usuário)

Adicione uma mensagem à janela de bate-papo, ela é exibida como uma mensagem que o usuário teria enviado.

Exemplo:

$aivo.chat.sendMessage("Olá, eu preciso de ajuda");

+ Ocultar o Botão de início

Esconde o botão home se ele for visível.

É importante notar que se a janela de bate-papo estiver visível, este evento não realiza nenhuma ação. A janela deve primeiro ser minimizada ou fechada (através dos eventos "fechar" ou "minimizar").

Execução:

$aivo.launcher.hide();

+ Ocultar a barra de minimização no mobile:

Ocultar a barra minimizadora no móvel

Execução:

Mostrar: $aivo.launcher.hideSticky(false)

Ocultar: $aivo.launcher.hideSticky(true)

+ Mostrar o Botão de início

Se o botão de início estava anteriormente oculto, ele é exibido novamente através deste evento.

Execução:

$aivo.launcher.show()

+ Eliminar e o Botão de início

Remove o botão de início permanentemente. Assim, para exibi-lo novamente, o script Aivo deve ser carregado novamente.

Execução:

$aivo.launcher.remove();

+ Mostrar ou ocultar o ícone de fechar o chat ( X )

Mostra e esconde o ícone Fechar na margem superior direita do Cabeçalho.

Execução:

$aivo.chat.showCloseIcon(true); (mostra o ícone)

$aivo.chat.showCloseIcon(false); (oculta o ícone)

Exemplo de embed:

showCloseIcon(true) Mostra o ícone

http://embed.agenbot.net/[name]/[token]?show_close_icon=true

showCloseIcon(false) Oculta o ícone

http://embed.agenbot.net/[name]/[token]?show_close_icon=false

+ Evento para enviar a Pesquisa de Satisfação:

O evento $aivo.chat.closeToSurvey() permite enviar para a pesquisa de satisfação nos casos em que a pesquisa está ativa e, além disso, exista interação com o bot.

É necessário configurar a pesquisa e ativá-la a partir da plataforma a fim de utilizar o evento. $aivo.chat.closeToSurvey(). Caso a pesquisa não esteja configurada, um aviso será exibido no console com o seguinte texto: “This action is not allowed because there is no survey configured“

Se o evento for chamado e não houver interação com o bot, ele não levará à pesquisa, em vez disso, um aviso será exibido no console com o seguinte texto:

“This action is not allowed because there is no interaction with the bot“

Execução:

$aivo.chat.closeToSurvey()

+ Configurar título no Header de Zendesk

O evento setHeaderZendesk permite que você adicione um texto no cabeçalho da janela de referência Zendesk. O conteúdo a ser incorporado deve ser especificado como um fio ao executar o evento. O texto se refere à ação de encerramento da derivação.

Execução:

$aivo.chat.setHeaderZendesk(“title”)

Propriedades de Usuário

+ Definir propriedades do usuário

Através do evento é possível definir as propriedades do usuário que está interagindo com a janela de bate-papo (nome, e-mail, etc.).

Há 2 maneiras de enviar os parâmetros do usuário:

Antiga
$aivo.user.set('nome',‘Pedro’)
$aivo.user.set('sobrenome', ‘Perez’)

Nova

$aivo.user.set({

'nome','Pedro',

'sobrenome': 'Perez'

})

+ Obter as propriedades do usuário

Temos 2 formas de obter parâmetros do usuário

Implementação:

$aivo.user.get(); // Retorna dados do localstorage

$aivo.user.get((data) => console.log(data)) // Retorna dados do localstorage + apiUser

+ Eliminar o usuário e criar um novo

O evento elimina o usuário (finalizando a sessão) e gera um novo usuário. Eliminando também todas as propriedades do usuário que foram configuradas.

Implementação:

$aivo.user.new();

+ Habilitar acesso a elementos HTML ( enabled/disabled Shadow Root )

Por meio deste evento poderemos habilitar ou desabilitar o acesso aos elementos HTML dentro da janela, esta ferramenta é dirigida principalmente aos clientes que desejam atualizar via css o aspecto da janela.

da janela. Para a implementação do evento deve ser feito fora dos $aivo.ready()

Exemplo do canal Web:

$aivo.shadowRoot(true): Mantém os elementos da janela bloqueados dentro do

DOM

$aivo.shadowRoot(false): Libera o acesso aos elementos da janela dentro do

DOM

let scriptAivo = document.createElement("script");

const token = '2fbb16f72fb124ecbf35452d54d9cc59'

scriptAivo.classList="script-aivo"

scriptAivo.type = "text/javascript";

scriptAivo.src = `https://cdn.agentbot.net/core/latest/core.js?Myjagsd4wLjY===`;

scriptAivo.onload = function() {

$aivo.run(token)

$aivo.shadowRoot(false)

}

setTimeout(() => {document.getElementsByTagName("head")[0].appendChild(scriptAivo)},500)

</script>

Exemplos de embed:

ShadowRoot(closed) Mantém os elementos da janela bloqueados dentro do

DOM: http://embed.agenbot.net/[name]/[token]?shadow-aivo=true’

ShadowRoot(open) Libera o acesso aos elementos da janela dentro do DOM: embed.agenbot.net/[name]/[token]?shadow-aivo=false

Template

Caso de uso - agregar novos estilos css

Requer inspeção prévia dos elementos disponíveis a fim de identificar o seletor de elementos a ser modificado.

// SNIPPET FOR ENABLED CUSTOM CSS UPDATES IN AGENTCORE

//example to keep text field locked indefinitely

We inspect the element that we want to modify and we find that it has the selector #agent-add-message

we define the variable with the necessary css instruction to achieve the expected behavior

// css-rules example

const BLOCKED_INPUT_CCS = `

#agent-add-message{

cursor: not-allowed;

pointer-events: none;

overflow: hidden;

opacity: .5;

}

//CDN AIVO

const SRC_AIVO = 'https://cdn.agentbot.net/core/latest/core.js?Myjagsd4wLjY==='

// web channel AIVO

const TOKEN_AIVO = 'add token, check your web channel with the aivo team'

create script and receive as parameter the callback to execute once the script is loaded

const createScriptAivo = function({callback = function(){},}){

const scriptAivo = document.createElement("script");

scriptAivo.src = SRC_AIVO;

scriptAivo.onload = callback

return scriptAivo

}

callback that runs sdk to enable css modifications

const openShadowDomUpdateStyle = function(){

try {

window.$aivo.run(TOKEN_AIVO)

window.$aivo.shadowRoot(false)

const style = document.createElement( 'style' )

style.innerHTML = BLOCKED_INPUT_CCS

setTimeout(function(){

const element =document.querySelector('#AgentAppContainer')

element.shadowRoot.appendChild( style )

},1000)

} catch (error) {

console.warn(error)

}

// run the tools createScriptAivo with the callback openShadowDomupdateStyle

const scriptAivo = createScriptAivo({

callback:openShadowDomUpdateStyle

})

// note that this last line must be executed after the head tag

document.getElementsByTagName("head")[0].appendChild(scriptAivo)

</script>

+ Habilitar zendesk de forma externa

Por padrão o chat zendesk é mostrado embutido no agentebot a instrução $aivo.registerTokenForExternalZendesk(webChannel) ou o query string ?external_zendesk=true

Nos permite mostrar a janela zendesk desvinculada ao agentebot, o agentebot abre novamente após o logout do agente zendesk.

Exemplo na Web

window.$aivo.ready(() => {

const webChannel= '0000000000000000000000000'

$aivo.registerTokenForExternalZendesk(webChannel)

})

Exemplo url

https://urlexample/?external_zendesk=true

Eventos do tipo Subscribe

O que é um evento de Subscribe e para que pode ser utilizado?

Os eventos do tipo Subscribe são métodos JavaScript incorporados que tomam o evento selecionado e permitem que ele seja escutado cada vez que sua execução é acionada. Eles recebem um segundo argumento para chamar cada vez que o evento descrito é acionado, este segundo argumento consiste em uma função chamada de retorno que permite executar ações do cliente e pode receber parâmetros dependendo de cada evento.

Estes eventos podem ser usados, por exemplo, para que os clientes possam medir em sua própria ferramenta de dados as interações de seus usuários com a janela de Chat.

Saiba mais detalhes em Eventos do tipo Subscribe (SDK)

*Data de atualização: 15/09/2022