Huggy Chat
O Huggy Chat é um canal de conversação que pode ser adicionado ao seu site para receber mensagens e interagir com seus clientes imediatamente. Este documento visa facilitar a compreensão dos métodos que podem ser utilizados para otimizar seus atendimentos. Você poderá acessar todos os métodos disponíveis através do objeto Huggy em qualquer página do site em que o Huggy Chat foi inserido.
A seguir, há um resumo de todos os métodos disponíveis do objeto Huggy os quais você poderá chamar usando javascript
.
Instalando
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001"
};
(function(i,s,o,g,r,a,m){ i[r]={context:{id:'8551dbde3f168db249381597eea81c71'}};a=o;o=s.createElement(o); o.async=1;o.src=g;m=s.getElementsByTagName(a)[0];m.parentNode.insertBefore(o,m); })(window,document,'script','https://js.huggy.chat/widget.min.js?v=8.0.0','pwz');
</script>
<!-- End code Huggy Chat //-->
2
3
4
5
6
7
8
9
10
11
$_Huggy
$_Huggy
é o objeto de configuração principal do Huggy Chat. Esse código é encontrado na configuração do canal do Huggy Chat pelo painel. Basta copiar o código referente ao seu canal e inserir na sua página, de preferência antes do fechamento da tag body (</body>
) ou antes do fechamento da tag head (</head>
).
$_Huggy.name
Quando o chat é inicializado, o contato já fica com nome do usuário.
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001",
name: 'João da Silva'
};
// ...
</script>
2
3
4
5
6
7
8
9
10
11
$_Huggy.phone
Quando o chat é inicializado, o contato já fica com telefone do usuário.
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001",
phone: '1112345678'
};
// ...
</script>
2
3
4
5
6
7
8
9
10
11
$_Huggy.email
Quando o chat é inicializado, o contato já fica com email do usuário.
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001",
email: 'joao@dasilva.com'
};
// ...
</script>
2
3
4
5
6
7
8
9
10
11
$_Huggy.channelGreeting
Essa propriedade é utilizada nos links de "Me Chame no Whatsapp" e "Me Chame no Telegram". O default é "Oi" e, com essa propriedade, pode ser alterada para ambos os serviços.
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001",
channelGreeting: 'Gostaria de tirar dúvidas'
};
// ...
</script>
2
3
4
5
6
7
8
9
10
11
$_Huggy.afterLoad
Evento callback que é executado ao término do carregamento do Huggy Chat. Recebe-se uma função.
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001",
afterLoad: function () {
console.log('Código executado após o carregamento do widget')
}
};
// ...
</script>
2
3
4
5
6
7
8
9
10
11
12
13
$_Huggy.beforeLoad
Evento callback que é executado antes do carregamento do Huggy Chat. Recebe-se uma função.
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001",
beforeLoad: function () {
console.log('Código executado antes do carregamento do widget')
}
};
// ...
</script>
2
3
4
5
6
7
8
9
10
11
12
13
$_Huggy.defaultCountry
É o DDI do país. O default é "+55"
.
<!-- Init code Huggy Chat //-->
<script>
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001",
defaultCountry: '+55'
};
// ...
</script>
2
3
4
5
6
7
8
9
10
11
huggyData
Ele é um objeto a parte da configuração ($_Huggy
) que contém uma estrutura para definir variáveis sem a necessidade do chat estar criado, se opondo ao Huggy.setData
.
⚠️ Este objeto deve ser declarado antes da inicialização do Huggy Chat.
<!-- Init code Huggy Chat //-->
<script>
var huggyData = {
variables: [
{
key: 'clientid',
value: 104
}
]
};
var $_Huggy = {
defaultCountry: '+55',
widget_id: '0001',
company: "0001"
};
(function(i,s,o,g,r,a,m){ i[r]={context:{id:'8551dbde3f168db249381597eea81c71'}};a=o;o=s.createElement(o); o.async=1;o.src=g;m=s.getElementsByTagName(a)[0];m.parentNode.insertBefore(o,m); })(window,document,'script','https://js.huggy.chat/widget.min.js?v=8.0.0','pwz');
</script>
<!-- End code Huggy Chat //-->
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
A propriedade variables
é um array
que deve receber objetos com a chave key
e o valor value
. Esse recurso é útil com o uso das variáveis no flow.
not available at SDK
Huggy.showButton()Huggy.showButton();
Mostra o botão do Huggy Chat se ele estiver oculto.
not available at SDK
Huggy.hideButton()Huggy.hideButton();
Este método é responsável por ocultar o botão do Huggy Chat na página.
not available at SDK
Huggy.showChats()Huggy.showChats();
Mostra a lista de chats no Huggy Chat se eles estiverem ocultos.
not available at SDK
Huggy.hideChats()Huggy.hideChats();
Oculta a lista de histórico dos chats e redireciona para a última conversa do usuário. O chat redirecionado não é o mais recente, mas o que ocorreu na última interação.
not available at SDK
Huggy.openBox()Huggy.openBox();
Abre a janela do Huggy Chat, se estiver fechada.
not available at SDK
Huggy.closeBox()Huggy.closeBox();
Fecha a janela do Huggy Chat.
not available at SDK
Huggy.openButtons()Huggy.openButtons();
Cria e mostra a lista de canais registrados para atendimento.
✔️
Canais
Telegram, Whatsapp, Email, Messenger.
not available at SDK
Huggy.openChatByID(id)Huggy.openChatByID(5);
Abre o chat de um determinado ID
no Huggy Chat. Este chat deve estar na lista de chats do usuário atual.
not available at SDK
Huggy.openEmail()Huggy.openEmail();
Abre a janela de atendimento do canal email.
not available at SDK
Huggy.openKnowledgeBase()Huggy.openKnowledgeBase();
Abre a base de conhecimento registrada nas configurações do Huggy Chat (caso esteja definido).
not available at SDK
Huggy.openMessenger()Huggy.openMessenger();
Abre um atendimento utilizando o canal Messenger redirecionando para a página do Messenger.
not available at SDK
Huggy.openPhone()Huggy.openPhone();
Abre a tela para inserir os dados de telefone para agendar uma ligação.
not available at SDK
Huggy.openTelegram()Huggy.openTelegram();
Abre um atendimento utilizando o canal Telegram, redirecionando para a página Web do Telegram.
not available at SDK
Huggy.openWhatsapp()Huggy.openWhatsapp();
Abre um atendimento utilizando o canal Whatsapp, redirecionando para a página do Whatsapp Web.
Huggy.recreateAttendance()
Huggy.recreateAttendance();
Cria um novo chat.
not available at SDK
Huggy.removeChats(id)Huggy.removeChats(2);
Remove um chat da lista a partir de seu ID
.
Huggy.sendMessage(Hello)
Huggy.sendMessage('Hello Charles!');
Envia uma mensagem no chat.
Huggy.setData()
Huggy.setData(nome, email, DDI, telefone);
setData('Joao', 'joao@email.com', '+55', 11988888888);
O evento setData({})
atualiza automaticamente os dados de um contato no Huggy Chat e no Painel Huggy. É importante enfatizar que para definição dos campos personalizados, você deverá utilizar o Token
(gerado automaticamente quando um campo personalizado é registrado) como a chave do objeto "custom_fields" seguido pelo valor desejado. Se você passar um Token
inexistente ou inválido, o mesmo será ignorado.
Huggy.setData({
customer: {
name: 'João de Maria',
mobile: '5511988888888',
email: 'joao@email.com',
custom_fields: {
cpf_of_the_contact_customer: '000.000.000-00',
cnpj_of_the_company_customer: '00.000.000/0000-00',
date_of_birth_customer: '01/01/0050',
corporate_e_mail_customer: 'a@aluan.com',
activation_time_of_the_contact_customer: '12:00',
comercial_phone_customer: '5511988888888'
}
},
variables: [
{
key: 'huggy.perfil',
value: 'Perfil de XXXXX'
}
]
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Nota: No seu sistema, quando o evento createChat é acionado para o sistema Huggy, as variáveis devem ser passadas como o contexto inicial do chat. O método setData só funcionará com o chat criado.
Huggy.setEmail(email)
Huggy.setEmail('charles@test.com');
Altera o e-mail do cliente no Huggy Chat.
Huggy.setName(nome)
Huggy.setName('Charles');
Altera o nome do cliente no Huggy Chat.
Huggy.setPhone(DDI, telefone)
Huggy.setPhone("+55", "75999999999");
Altera o telefone do cliente no Huggy Chat.
not available at SDK
Huggy.showTrigger(id)Huggy.showTrigger(3)
Mostra determinado gatilho, usando seu ID.
not available at SDK
Huggy.startTrigger(id, position, message)Huggy.startTrigger(3, 0, 'Inicializa o gatilho');
Nota: A string que está sendo passada como parâmetro possui configurações no painel. Se passado no método, ela substitui o valor configurado. Somente o primeiro parâmetro é obrigatório, os demais são opcionais.
Executa a ação do botão do gatilho, somente neste método o ID é requerido. O ID é o ID do gatilho, a posição é a posição do botão dentro do gatilho e neste caso, como existe apenas um botão, esta é a posição padrão. Essa posição não pode ser alterada e o nome entre aspas é o nome que será exibido dentro do botão.
Huggy.startTrigger(2, 0, 'Abre o vídeo');
Huggy.subscribe(topico, call)
✔️
Topics
Topics List: "channel-open:whatsapp", "channel-close:widget", "box-opened:email", "box-opened:phone", "box-opened:chat", "box-opened", "box-closed", "chat:message",
"chat:created"
O usuário se inscreve para escutar os eventos dos tópicos mencionados acima e executa uma função passada por parâmetro, como mostra o exemplo:
Huggy.subscribe('channel-open:whatsapp', function() {
alert('whatsapp channel opened');
});
2
3
Existe um tópico específico (chat:created
) que emite um objeto com o as seguintes propriedades.
{
authHash: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUxxxxxxxxxx",
chatID: 99999999,
customerSiteID: 999999999,
department: null,
hash: "f82768b90a3bdc6868b5xxxxxxxx",
last_notification: null,
message: {customer: {…}, agent: false, lastAgent: {…}, chatOpened: false, subject: null, …},
presence: "GmcjuRCzyimW%2B3qBjzWyXwDJwaV6xxxxxxxxxxx",
server: "https://ct.huggy.io",
smartTriggerID: null,
text: "Oi",
token: "5fec1013617ad07c104f84xxxxxxxxxxx",
whatsapp: null
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Para obter esses dados você pode executar uma função como segue o exemplo:
Huggy.subscribe('chat:created', function(data) {
console.log('This is the chat Id: ', data.chatId);
});
2
3
Autenticação
Para autenticar-se ao Huggy Chat é necessário adicionar o campo huggyData no escopo do seu site, sendo o mesmo um objeto com os campos userIdentifier e userHash, como exemplificado abaixo:
window.huggyData = {
userIdentifier: _userIdentifier,
userHash: _userHash
variables: [
{key: 'name', value: 'john'}
]
}
2
3
4
5
6
7
Variables é um array usado pra iniciar um chat já com variáveis para serem usadas pelo flow. Nesse exemplo criaria uma variável name
com o valor John
. Se for adicionado ao flow, colocar uma ação sendMessage com o texto "Oi {{
name}}
" resultaria em "Oi John".
O campo userIdentifier deve possuir valor único (ID)
para cada contato do Huggy Chat, este será utilizado na identificação do seu contato. Já o userHash é um token JWT gerado a partir do userIdentifier e assinado com a chave secreta disponibilizada nos detalhes do Huggy Chat no painel Huggy. Ele deve ser assinado usando o algoritmo (HMAC usando SHA-256), como demonstrado na imagem abaixo.
Exemplo de como gerar o userHash
<?php
function generateUserHash($userIdentifier, $huggyChatSecretKey) {
// Create token header as a JSON string
$header = json_encode(['typ' => 'JWT', 'alg' => 'HS256']);
// Create token payload as a JSON string
$payload = json_encode(['jti' => $userIdentifier]);
// Encode Header to Base64Url String
$base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($header));
// Encode Payload to Base64Url String
$base64UrlPayload = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($payload));
// Create Signature Hash
$signature = hash_hmac('sha256', $base64UrlHeader . "." . $base64UrlPayload, $huggyChatSecretKey, true);
// Encode Signature to Base64Url String
$base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($signature));
// Create JWT
$jwtToken = $base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature;
return $jwtToken;
}
$userIdentifier = 'myuser@company.com';
$huggyChatSecretKey = 'eca50890942569fbf40f3752e6007f3x';
echo generateUserHash($userIdentifier, $huggyChatSecretKey);
?>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Huggy.login(authObject)
A função Huggy.login
deve ser utilizada para a utilização do recurso de autenticação do usuário.
Este método permite autenticar o Huggy Chat sem que seja preciso recarregar a página. Para isso, deve ser passado como parâmetro um objeto contendo userIdentifier
e o userHash
.
Propriedades:
userIdentifier
: Email do usuáriouserHash
: Código hash
Huggy.login({
userIdentifier: john@doe.com,
userHash: eyJ0eXAiOiJKV1QiLCJfbGcuOiJIUzI1NiJ9.eyJqdGkiOiJjYXJlb3MuYWd1cWFyQGh1Z2d5LmleIn0.zAqI8oaNPitqy6Eg7aw1LdlWeinT8acPwueQLQc7q70
})
2
3
4
Huggy.logout()
Este método faz o logout do Huggy Chat, removendo a autenticação.
← Começando Android SDK →