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  //-->
1
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>
1
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>
1
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>
1
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>
1
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>
1
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>
1
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>
1
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  //-->
1
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.

Huggy.showButton() not available at SDK

Huggy.showButton();
1

Mostra o botão do Huggy Chat se ele estiver oculto.

Huggy.hideButton() not available at SDK

Huggy.hideButton();
1

Este método é responsável por ocultar o botão do Huggy Chat na página.

Huggy.showChats() not available at SDK

Huggy.showChats();
1

Mostra a lista de chats no Huggy Chat se eles estiverem ocultos.

Huggy.hideChats() not available at SDK

Huggy.hideChats();
1

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.

Huggy.openBox() not available at SDK

Huggy.openBox();
1

Abre a janela do Huggy Chat, se estiver fechada.

Huggy.closeBox() not available at SDK

Huggy.closeBox();
1

Fecha a janela do Huggy Chat.

Huggy.openButtons() not available at SDK

Huggy.openButtons();
1

Cria e mostra a lista de canais registrados para atendimento.

✔️ Canais
Telegram, Whatsapp, Email, Messenger.

Huggy.openChatByID(id) not available at SDK

Huggy.openChatByID(5);
1

Abre o chat de um determinado ID no Huggy Chat. Este chat deve estar na lista de chats do usuário atual.

Huggy.openEmail() not available at SDK

Huggy.openEmail();
1

Abre a janela de atendimento do canal email.

Huggy.openKnowledgeBase() not available at SDK

Huggy.openKnowledgeBase();
1

Abre a base de conhecimento registrada nas configurações do Huggy Chat (caso esteja definido).

Huggy.openMessenger() not available at SDK

Huggy.openMessenger();
1

Abre um atendimento utilizando o canal Messenger redirecionando para a página do Messenger.

Huggy.openPhone() not available at SDK

Huggy.openPhone();
1

Abre a tela para inserir os dados de telefone para agendar uma ligação.

Huggy.openTelegram() not available at SDK

Huggy.openTelegram();
1

Abre um atendimento utilizando o canal Telegram, redirecionando para a página Web do Telegram.

Huggy.openWhatsapp() not available at SDK

Huggy.openWhatsapp();
1

Abre um atendimento utilizando o canal Whatsapp, redirecionando para a página do Whatsapp Web.

Huggy.recreateAttendance()

Huggy.recreateAttendance();
1

Cria um novo chat.

Huggy.removeChats(id) not available at SDK

Huggy.removeChats(2);
1

Remove um chat da lista a partir de seu ID.

Huggy.sendMessage(Hello)

Huggy.sendMessage('Hello Charles!');
1

Envia uma mensagem no chat.

Huggy.setData()

Huggy.setData(nome, email, DDI, telefone);
1
setData('Joao', 'joao@email.com', '+55', 11988888888);
1

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

Altera o e-mail do cliente no Huggy Chat.

Huggy.setName(nome)

Huggy.setName('Charles');
1

Altera o nome do cliente no Huggy Chat.

Huggy.setPhone(DDI, telefone)

Huggy.setPhone("+55", "75999999999");
1

Altera o telefone do cliente no Huggy Chat.

Huggy.showTrigger(id) not available at SDK

Huggy.showTrigger(3)
1

Mostra determinado gatilho, usando seu ID.

Huggy.startTrigger(id, position, message) not available at SDK

Huggy.startTrigger(3, 0, 'Inicializa o gatilho');
1

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

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');
});
1
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
}
1
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);
});
1
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'}
    ]
}
1
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.

Authentication HuggyData

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);
?>
1
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:


 
 


Huggy.login({ 
  userIdentifier: john@doe.com,
  userHash: eyJ0eXAiOiJKV1QiLCJfbGcuOiJIUzI1NiJ9.eyJqdGkiOiJjYXJlb3MuYWd1cWFyQGh1Z2d5LmleIn0.zAqI8oaNPitqy6Eg7aw1LdlWeinT8acPwueQLQc7q70
}) 
1
2
3
4

Huggy.logout()

Este método faz o logout do Huggy Chat, removendo a autenticação.