ALTU
Search…
Widget
Nesta página você irá encontrar todas as informações necessárias para conectar seu assistente do ALTU ao Widget

Visão Geral

O widget é um dos meios de comunicação que o ALTU disponibiliza. Ao optar por esse canal, o assistente fica disponível diretamente no site do cliente.
Uma de suas vantagens é a possibilidade de configurar a interação do usuário utilizando diversos componentes: botões de resposta rápida, máscara para preenchimento de campos, autocomplete entre outros.

Compatibilidade

É possível receber mensagens como:
  • Texto
  • Arquivos
É possível enviar mensagens como:
  • Pergunta aberta
  • Autocomplete
  • Data
  • Encerrar Chat
  • Feedback NPS
  • Feedback Emoji
  • Lista de opções: Modal e Inline
  • Quick Replies
  • Upload de arquivo
  • Carrossel de Opções

Adicionar Widget

Para começar, vamos criar a integração do seu assistente com o canal. Acesse Connect > Canais > Widget.
Na página que se abrirá, você encontra todos os Widgets publicados ou em configuração da sua conta.
Clique em “+ Adicionar widget” no canto superior direito da página.
Adicionar novo widget

Configurações

Nessa aba adicione as informações solicitadas:
  • Assistente: selecione o assistente
  • Título da Página: nome que será informado na aba do navegador
  • Nome do Widget: nome que deseja dar ao canal Squad: selecione o nome da squad se estiver disponível na lista, caso contrário mantenha como “geral”
  • Digitando: escolha de que modo a mensagem deve aparecer para o usuário
    • Dinâmica: apresenta uma imagem de “digitando” durante o tempo definido até o envio da mensagem
    • Estático: envia a mensagem após o tempo de espera definido, sem indicação de carregamento
Opcionais:
  • Inatividade: um novo atendimento será iniciado automaticamente após o usuário ficar inativo pelo tempo configurado.
  • Esperar por dados: configuração específica para assistentes que são exibidos via Tag. Com essa opção selecionada, a conversa só se inicia após o envio de dados através do método altubots.sendDataToContext({ })
  • Continuidade da conversa: ao final de uma interação, as mensagens serão salvas no histórico do navegador e o usuário poderá dar continuidade a conversa futuramente
  • Ativar avisos sonoros em Live Chat: ao selecionar essa funcionalidade o cliente será notificado, por meio de um aviso sonoro, quando um agente enviar uma mensagem durante o atendimento. O aviso pode ser customizado ao adicionar o endereço web onde está hospedado o arquivo de áudio
Para garantir o funcionamento da notificação sonora, é recomendado que o áudio seja verificado no campo “Validar”. Em seguida, se estiver tudo certo, o som será processado e executado, certificando sua performance no Live Chat
Página de Configurações do Widget

Validação de avisos sonoros

Para uma validação bem sucedida, o link informado deve conter um áudio com, no máximo, 5 segundos de duração. Exemplo de URL (nosso áudio padrão):
Durante a conversa com o agente, o cliente pode desativar ou ativar essa notificação. Por padrão, o Live Chat deixa o áudio ativado. O botão para realizar essa ação estará disponível no topo do chat, juntamente com os botões para "Sair do chat" e "Sair do live chat".
Confira nosso vídeo com a demonstração da funcionalidade:
Vídeo demonstração de aviso sonoro em Live Chat

Aparência e Comportamento

Essa é a área de personalização da aparência do assistente. Temos dois temas padrões, o “ALTU” e o "basic", mas o CSS pode ser editado livremente para atender ao guia de estilo da empresa, clique aqui para algumas dicas. Também é possível adicionar um logo e avatar de até 1MB nos formatos: png, jpeg, jpg, svg e gif.
É necessário escolher um template para conseguir salvar o Widget.
Escolha de template em Aparência e Comportamento

Tag

Na aba Tag você configura a exibição do Widget no seu site. Essa funcionalidade opera por meio de uma função javascript, que deve ser adicionada no HTML do site, antes de fechar o bloco <head>
Demonstração das duas opções da aba Tag - Botão Flutuante e Dimensões do Widget
Há duas configurações básicas a serem feitas:

Botão Flutuante

Para que o site exiba um botão, que ao ser clicado mostre o chat, você deve deixar a opção "Botão flutuante" ativa.
Ativar e desativar o botão flutuante
Selecione a opção “Padrão” para utilizar o botão Padrão do ALTU, onde a única customização possível é a cor.
Para alterar a cor, você pode inserir o hexadecimal da cor, como #11ff1a para verde, ou utilizar o type color, uma caixa de seleção manual de cores.
Caso você queira usar um botão personalizado, selecione a opção “Customizado”.
Preencha o campo URL com o link do arquivo que será usado como botão, podendo ser uma imagem ou um HTML. Esse arquivo deve estar hospedado em um site com acesso público.
Também é necessário incluir a largura e altura do botão, em pixels.
Demonstração da configuração de Botão Flutuante customizado

Dimensões do Widget

Logo abaixo do campo de botão flutuante, você deve inserir as dimensões que o Widget terá quando aparecer no seu site ou aplicativo.
As dimensões padrões são:
  • Largura: 450px
  • Altura: 600px
  • Espaçamento margem inferior: 10px
  • Espaçamento margem direita: 10px
Mas você pode alterar essas dimensões livremente, utilizando a formatação em pixels ou em porcentagem ao clicar no botão do campo dimensão.
Demonstração da alteração das Dimensões do Widget
Após fazer todas as configurações anteriores, clique em “Criar widget
Criar Widget

Publicar Widget

Após a criação do Widget você verá uma aba chamada “Publicação”.
Nela você acompanha os status das alterações do Widget e também da Tag, com informações sobre a última publicação.
Nessa aba você também copia a URL do Widget publicado.
Para que seja possível utilizar o canal, é necessário clicar em “Publicar Widget”.
Demonstração de publicação de Widget

Publicar Tag

Só será possível publicar a Tag após a publicação do Widget
Na aba Publicação, logo abaixo das informações sobre a publicação do Widget, você vê as informações da Tag.
Clique em “Publicar Tag” para acessar o script necessário para a configuração do seu assistente no seu site.
Demonstração de publicação de Tag

Instalação

Para o chat aparecer no seu site, insira o script que você encontra na página "Publicação"
Orientações de instalação de Tag
Uma vez inserido, o método altubots.openChat( ) pode ser invocado para exibir o widget, independente do botão flutuante estar ativo ou não.
Para enviar dados ao contexto da conversa, utilize o método altubots.sendDataToContext({ }), onde ficarão disponíveis no objeto context.
Exemplo:
1
<script type="text/javascript">
2
altubots.sendDataToContext({
3
"nome": "José da Silva",
4
"email": "[email protected]"
5
});
6
</script>
Copied!

Editar Widget

Para editar, acesse Connect > Canais > Widget e escolha na lista o Widget para edição.
Após qualquer alteração feita nas abas de Configuração e Aparência e Comportamento, como uma mudança no nome do Widget ou no CSS, será necessário salvar, clicando em “Salvar alterações” no canto superior direito da página.
Será necessário refazer o processo publicação do canal, para que as mudanças sejam efetivas na URL do assistente.

Editar Tag

Ao editar as configurações de uma Tag, será necessário clicar em “Salvar alterações” no canto superior direito da página e também refazer o processo de publicação da tag.
Demonstração de edição e publicação de Tag

Coletar IP e user agent em acessos

O IP do usuário e User Agent serão coletados quando o usuário acessar o Widget. As informações serão direcionadas para a variável url_params do context.
Com as informações do user_agent é possível identificar:
  • Aplicação
  • Sistema operacional
  • Fornecedor
  • Navegador de internet
Exemplo de como fica estruturado o IP e user agent no url_params:
1
{
2
"url_params": {
3
"ip": "127.0.0.1",
4
"user_agent": {
5
"os": {
6
"name": "Linux",
7
"version": "x86_64"
8
},
9
"ua": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36",
10
"cpu": {
11
"architecture": "amd64"
12
},
13
"device": {},
14
"engine": {
15
"name": "Blink",
16
"version": "89.0.4389.90"
17
},
18
"browser": {
19
"name": "Chrome",
20
"major": "89",
21
"version": "89.0.4389.90"
22
}
23
}
24
}
25
}
Copied!

Baixar conversa

Durante todo o atendimento, o usuário poderá realizar o download da conversa. Isso é realizado através da chamada de uma função: download_chat_history ().

Como usar?

O PDF pode ser gerado por meio de um Socket Event, que chama a função. Você deve incluir na configuração do Widget, no bloco body, o seguinte código:
1
<script type="text/javascript">
2
$(document).ready(function() {
3
if(socket)
4
{
5
socket.on('exportPDF', function(payload) {
6
download_chat_history(payload.chat_name)
7
});
8
}
9
});
10
</script>
Copied!
Pode-se perguntar se o usuário deseja exportar a conversa, tal qual um protocolo. Se a resposta for positiva, em seguida, chamaria um Socket Event, como o que está abaixo:
1
[
2
{
3
"name": "socket_event",
4
"parameters": {
5
"event": "exportPDF",
6
"payload": {
7
"chat_name": "ALTU"
8
}
9
},
10
"result_variable": "event_response"
11
}
12
]
Copied!
Exemplo de um atendimento com download de PDF:
Could not load image
Exemplo de download de conversa

PDF

Cabeçalho

O cabeçalho do PDF irá conter três informações:
Could not load image
  • O título: "Histórico do Atendimento".
  • O subtítulo: será opcional e é o único que pode ser passado por parâmetro na função. A imagem acima é resultante da chamada: download_chat_history ("ALTU"). Se não não for houver parâmetro passado, o cabeçalho será o seguinte:
  • A data da exportação
Could not load image

Corpo

O corpo do PDF é composto pelo conteúdo do atendimento, ou seja, a troca de mensagens. É compatível com pré-visualização de imagens. Nele, também exibimos o momento (data e hora) em que ocorreu a troca de mensagens de cada bloco. Links no atendimento, que possibilitam download do arquivo pré-visualizado, não estarão acessíveis dentro do PDF.
Could not load image
Last modified 1mo ago