Huggy

Huggy Chat

The Huggy Chat is a channel of conversation that can be added to your site for receive messages and interact with your customers instantly. This document wish to facilitate the understanding of the methods that can be used to optimize your attendances. You will be able to access all the available methods through the Huggy object in any page that the Huggy Chat was inserted.

Following, there is a summary of all methods available at the Huggy object and that you can call using javascript.

Installing

<!-- 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 is the object of main settings of Huggy chat. This code is found in setting of the channel of Widget by the panel. Just copy the code referring for your channel and insert in the your page, preferably before closing of tag body (</body>) or before closing of tag head (</head>).

$_Huggy.name

When the chat is initialized, the contact already has the username.







 





<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+55',
    widget_id: '0001',
    company: "0001",
    name: 'John Doe'
  };

  // ...
</script>
1
2
3
4
5
6
7
8
9
10
11

$_Huggy.phone

When the chat is initialized, the contact already has user phone.







 





<!-- 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

When the chat is initialized, the contact already has user email.







 





<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+55',
    widget_id: '0001',
    company: "0001",
    email: 'john@doe.com'
  };

  // ...
</script>
1
2
3
4
5
6
7
8
9
10
11

$_Huggy.channelGreeting

This property is used in link of "Call me on Whatsapp" and "Call me on Telegram". The default is "Hi" and, with this property, can be changed for both services.







 





<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+55',
    widget_id: '0001',
    company: "0001",
    channelGreeting: 'I would like to ask a question'
  };

  // ...
</script>
1
2
3
4
5
6
7
8
9
10
11

$_Huggy.afterLoad

Callback event that executes at the end of widget loading. Received a function:







 
 
 





<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+55',
    widget_id: '0001',
    company: "0001",
    afterLoad: function () {
      console.log('code executed after widget load')
    }
  };

  // ...
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

$_Huggy.beforeLoad

callback event that executes before the load of widget. Received a function:







 
 
 





<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+55',
    widget_id: '0001',
    company: "0001",
    beforeLoad: function () {
      console.log('code executed after widget load')
    }
  };

  // ...
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

$_Huggy.defaultCountry

Is the country IDD. The default is "+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

He is an object apart from the setting ($_Huggy) that contains a structure to define variables without the need for chat to be created, as opposed to Huggy.setData.

⚠️ This object must be declared before of boot of Huggy chat.



 
 
 
 
 
 
 
 











<!-- Init code Huggy Chat  //-->
<script>
  var huggyData = {
    variables: [
      {
        key: 'customerId',
        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

This property variables is an array that should receive objects with the key and the value. This resource is useful when using variables in flow.

Huggy.showButton() not available at SDK

Huggy.showButton();
1

Shows the button of the Huggy chat if it is hidden.

Huggy.hideButton() not available at SDK

Huggy.hideButton();
1

This method is responsible for hiding the button of Huggy chat on the page.

Huggy.showChats() not available at SDK

Huggy.showChats();
1

Shows the list of chats on Huggy chat if they are hidden.

Huggy.hideChats() not available at SDK

Huggy.hideChats();
1

Hides the list of chats' history and redirects for the last conversation of the user. The redirected chat is not the most recently one, but, the one that occurred the last interaction.

Huggy.openBox() not available at SDK

Huggy.openBox();
1

Opens the Huggy chat window if it is closed.

Huggy.closeBox() not available at SDK

Huggy.closeBox();
1

Closes the window of the Huggy chat.

Huggy.openButtons() not available at SDK

Huggy.openButtons();
1

Creates and show the list of registered channels for calls.

✔️ Channels
Telegram, Whatsapp, Email, Messenger.

Huggy.openChatByID(id) not available at SDK

Huggy.openChatByID(5);
1

Opens the chat of determined ID on the Huggy chat. This chat must be on the list of chats of the current user.

Huggy.openEmail() not available at SDK

Huggy.openEmail();
1

Opens the attendance window to the channel email.

Huggy.openKnowledgeBase() not available at SDK

Huggy.openKnowledgeBase();
1

Opens the base of knowledge registered on the settings of the Huggy chat (In case that it is configure).

Huggy.openMessenger() not available at SDK

Huggy.openMessenger();
1

Opens a attendance using the channel messenger by redirecting to the messenger's page.

Huggy.openPhone() not available at SDK

Huggy.openPhone();
1

Opens the window to insert the datas of phone for schedule a call.

Huggy.openTelegram() not available at SDK

Huggy.openTelegram();
1

Opens a attendance using the channel Telegram, redirecting to the Telegram's Web page.

Huggy.openWhatsapp() not available at SDK

Huggy.openWhatsapp();
1

Opens a attendance using the channel Whatsapp, redirecting to the Whatsapp's Web.

Huggy.recreateAttendance()

Huggy.recreateAttendance();
1

Creates a new chat.

Huggy.removeChats(id) not available at SDK

Huggy.removeChats(2);
1

Removes of the list of chats a determined chat by its ID.

Huggy.sendMessage(Hello)

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

Sends a message on chat.

Huggy.setData()

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

The setData({}) event updates automatically the contact data on widget and on the Huggy panel. It is important to emphasize that for the definition of the custom fields, you should use the Token (automatically generated when a custom field is registered) as key of the object ‘custom_fields’ followed by the desired value. If you pass a nonexistent or invalid Token, it will be ignored.

Huggy.setData({
  customer: {
    name: 'Indescritível',

    mobile: '5511988888888',

    email: 'gabriel@gabriel.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.pefil',
      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

Note: On your system, when the createChat event is triggered for the Huggy system, the variables must be passed as the initial chat context. The setData only works with the created chat.

Huggy.setEmail(email)

Huggy.setEmail('charles@test.com');
1

Changes the customer's email on the Huggy Chat.

Huggy.setName(name)

Huggy.setName('Charles');
1

Changes the customer name on the Huggy chat.

Huggy.setPhone(DDI, phone)

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

Changes the customer phone on the Huggy chat.

Huggy.showTrigger(id) not available at SDK

Huggy.showTrigger(3)
1

Shows certain trigger, using its ID.

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

Huggy.startTrigger(3, 0, 'Initialize the Trigger');
1

Nota: The string being passed as a parameter has settings on the panel. If passed in the method, it overrides the configured value. Only the first parameter is required, the others are optional.

Runs the action of the trigger button, on this method only the ID is required. The ID is the trigger's ID, the position is the button position inside the trigger and in this case, as there is only a button, it is in a default position, this position cannot be changed, and the name in quotes is the name that will be displayed inside the button.

Huggy.startTrigger(2, 0, 'Open the video');
1

Huggy.subscribe(topic, 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"

The user subscribes to listen to the event of the above mentioned topics and runs a function passed by parameter as the example shows:

Huggy.subscribe('channel-open:whatsapp', function() {
  alert('whatsapp channel opened');
});
1
2
3

There is a specific topic (chat:created) that emits a data object with the following properties:

{
  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

To get this data you can runs a function as the following example:

Huggy.subscribe('chat:created', function(data) {
  console.log('This is the chat Id: ', data.chatId);
});
1
2
3

Authentication

To authenticate in to Huggy chat is necessary add the huggyData field in scope of your site, being him an object with the fields userIdentifier and userHash, as exemplified below:

window.huggyData = {
    userIdentifier: _userIdentifier,
    userHash: _userHash
    variables: [
        {key: 'name', value: 'john'}
    ]
}
1
2
3
4
5
6
7

Variables is an array used for start a chat already with variables to be used by the flow. In this example, we create a variable name with the value John. If added to flow, the action, for example, sendMessage, with the text "Hi {{name}}" would result in "Hi John".

The field userIdentifier must have unique value (ID) for each huggy chat contact, this will be used in the identification of your contact. Already the userHash is a token JWT generated from userIdentifier and signed with a secret key provided in chat details in Huggy panel. He must be signed using the (HMAC usando SHA-256), as shown in the image below.

Authentication HuggyData

Examples of how to generate 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)

The Huggy.login function should be used to make login of user authentication resource.

This solution allows authenticate the Huggy Chat without the need to reload the page. You must pass an object with userIdentifier and the userHash as properties.

Properties:

  • userIdentifier: User email
  • userHash: Hash code

 
 


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

Huggy.logout()

This methods makes logout of Huggy Chat, removing the authentication.

← Android SDK →