ALTU
Search…
Widget
O widget é um dos meios de comunicação que o Altu disponibiliza. Ao optar por esse canal o assistente fica disponível diretamente na interface do cliente (seja via site ou aplicativo). 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, listas de opções, entre outros. A exibição do widget também pode ser customizada com templates que se adequam à identidade visual da empresa.

Compatibilidade

Input:
  • Texto
  • Arquivos
Output:
  • 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

Configurações

Para começar, vamos criar o seu canal.
Clique no botão inferior direito e abrirá a tela de edição.
Adicione as informações solicitadas:
  • Título da Página: nome que será informado na aba do navegador
  • Nome do Widget: nome que deseja dar ao canal
  • Assistente: selecione o assistente
  • 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áticas - envia a mensagem após o tempo de espera definido, sem indicação de carregamento:
  • Template: é a área de personalização da aparência do bot. Temos como padrão o tema “ALTU” e "basic", mas o CSS pode ser editado livremente para atender ao guia de estilo da empresa. Também é possível adicionar um logo e avatar de até 1MB nos formatos: png, jpeg, jpg, svg e gif.
Opcionais:
  • Inatividade: ao selecionar essa opção, o assistente será reiniciado ao observar a inatividade do usuário após o tempo definido
  • Esperar por dados: opção específica para assistentes que são exibidos via overlay do Smarkio Legacy. Ao ser ativada o assistente pode receber dados do usuário pela URL de exibição do chat
  • 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.
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 default): https://altu-assets.s3-sa-east-1.amazonaws.com/sounds/notification-livechat.mp3
Durante a conversa com o agente, o cliente pode desativar ou ativar essa notificação, por default 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:

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 e direcionado 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, será possível realizar o download da conversa. Isso é realizado através da chamada de uma função: download_chat_history ().

PDF

Cabeçalho

O cabeçalho do PDF irá conter três informações:
  • 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.

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.

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:
Last modified 6mo ago