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

⚠️ This code is an example. Don't use in your site. Each Huggy Chat has a specific code that can be localized in the channel's settings page. For more information how to install Huggy Chat

<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+1',
    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

Configuration

$_Huggy

$_Huggy is the object { HuggyChatConfig } 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>).

PropertyTypeDescriptionDefault
widget_idstringUnique ID of Huggy Chat. Is required for chat working and is present in installation of Huggy Chat that you copy the code available in channel's settings
companystringUnique ID of your Huggy account. Is required for chat working and is present in installation of Huggy Chat that you copy the code available in channel's settings
defaultCountrystringCountry IDD+1optional
namestringSets previously the contact nameoptional
phonestringSets previously the contact's phone that will start a chatoptional
emailstringSets previously the contact's email that will start a chatoptional
channelGreetingstringThis 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.Hioptional
afterLoadfunctionCallback event that executes at the end of widget loadingoptional
beforeLoadfunctionCallback event that executes before the load of widget.optional
widget_id
string

Unique ID of Huggy Chat. Is required for chat working and is present in installation of Huggy Chat that you copy the code available in channel's settings

Default:


company
string

Unique ID of your Huggy account. Is required for chat working and is present in installation of Huggy Chat that you copy the code available in channel's settings

Default:


defaultCountry
string

Country IDD

Default: +1


name
string

Sets previously the contact name

Default:


phone
string

Sets previously the contact's phone that will start a chat

Default:


email
string

Sets previously the contact's email that will start a chat

Default:


channelGreeting
string

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.

Default: Hi


afterLoad
function

Callback event that executes at the end of widget loading

Default:


beforeLoad
function

Callback event that executes before the load of widget.

Default:


$_Huggy.name

Sets previously the contact name that will start a chat







 





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

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

$_Huggy.phone

Sets previously the contact's phone that will start a chat







 





<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+1',
    widget_id: '0001',
    company: "0001",
    phone: '1112345678'
  };

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

$_Huggy.email

Sets previously the contact's email that will start a chat







 





<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+1',
    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: '+1',
    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: '+1',
    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: '+1',
    widget_id: '0001',
    company: "0001",
    beforeLoad: function () {
      console.log('code executed before 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 '+1'.




 







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

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

huggyData

Object with { HuggyChatData } type (shape) apart from the setting ($_Huggy) that contains a data structure. Must be declared before Huggy Chat initialization and must be available inside window, acessible as window.huggyData

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



 











<!-- Init code Huggy Chat  //-->
<script>
  var huggyData = {};

  var $_Huggy = {
    defaultCountry: '+1',
    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

huggyData.variables

The variables property is an array that must receives objects { HuggyChatDataVariable } with 2 properties key and value. This resource can be utilized to interact with variables inside flow.



 
 
 
 
 
 



<script>
  var huggyData = {
    variables: [
      {
        key: 'clientid',
        value: 104
      }
    ]
  };
</script>
1
2
3
4
5
6
7
8
9
10

huggyData.userIdentifier

Sets a unique identifier to user. This property is used in authentication and must utilized together with the property huggyData.userHash.



 




<script>
  var huggyData = {
    userIdentifier: 'user@company.com',
    userHash: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ1c2VyMUBjb21wYW55LmNvbSJ9.upuQ_qWcSFWdzIAGjEfSi-v_RvWC-bicTLNyEePPOhY'
  }
</script>
1
2
3
4
5
6

huggyData.userHash

Sets the user's JWT authentication hash, signing and validating the huggyData.userIdentifier. This property is used in authentication.




 



<script>
  var huggyData = {
    userIdentifier: 'user@company.com',
    userHash: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ1c2VyMUBjb21wYW55LmNvbSJ9.upuQ_qWcSFWdzIAGjEfSi-v_RvWC-bicTLNyEePPOhY'
  }
</script>
1
2
3
4
5
6

Read about the autenticação

API

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(name, email, IDD, phone);
1
Huggy.setData('John Doe', 'john@email.com', '+1', 11988888888);
1

The Huggy.setData({}) function 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: 'John Doe',

    mobile: '5511988888888',

    email: 'johnl@company.com',

    custom_fields: {
      passport: '00000000000',
      favorite_color: 'pink'
    }
  },
  variables: [
    {
      key: 'profile',
      value: 'Admin'
    }
  ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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(IDD, phone)

Huggy.setPhone("+1", "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

Huggy.destroy()

Function that remove Huggy Chat instance of the page. To init again, Huggy.init function must be called. After destroy, the only function available is Huggy.init.

Huggy.destroy();
1

Authentication

What is this?

The authentication in Huggy Chat is used to save the chat state for someone that your system knows. Eg: an user of your system starts a chat in his work's computer and, at the end of the day, goes to his house. If the user do login in your system at his home's computer (other device), the chat (or history) will be available. This is possible because:

  1. Your system knows the user;
  2. Your system authenticates the user in Huggy Chat, and now, the chat know the user.

This step is different from $_Huggy.name. The name property is to identify the contact. The authentication is to grant that a user is the same in 2 or more devices. In case if you only want identify the contact, is only necessary use $_Huggy.name and $_Huggy.email.

For authenticate Huggy Chat is necessary add the huggyData { HuggyChatData }, an object with the fields userIdentifier e userHash as the example below or use Huggy.login:

window.huggyData = {
  userIdentifier: 'user@company.com',
  userHash: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJ1c2VyMUBjb21wYW55LmNvbSJ9.upuQ_qWcSFWdzIAGjEfSi-v_RvWC-bicTLNyEePPOhY'
}
1
2
3
4

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.

It 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(HuggyChatAuth)

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

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

PropertyTypeDescription
userIdentifierstringSets a unique identifier to user. This property is used in authentication and must utilized together with the property huggyData.userHash.
userHashstringSets the user's JWT authentication hash, signing and validating the huggyData.userIdentifier. This property is used in authentication.
userIdentifier
string

Sets a unique identifier to user. This property is used in authentication and must utilized together with the property huggyData.userHash.


userHash
string

Sets the user's JWT authentication hash, signing and validating the huggyData.userIdentifier. This property is used in authentication.


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

Huggy.logout(reload?, fnBeforeInit?)

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

parametertypedescriptiondefault
reloadbooleanReload the Huggy Chat after logout. If false, it will be necessary to initialize programmaticallytrueopcional
fnBeforeInitfunctionCallback function fired before initialize (if reload is true. If is false, after logout)functionopcional
reload
boolean

Reload the Huggy Chat after logout. If false, it will be necessary to [initialize programmatically](#huggy-init-huggychatinit)

default: true


fnBeforeInit
function

Callback function fired before initialize (if reload is true. If is false, after logout)

default: function


Do logout and reload Huggy Chat

// reload is true by default

Huggy.logout() // without parameters

// is equal to

Huggy.logout(true) // reload = true
1
2
3
4
5
6
7

Do logout and don't reload

Huggy.logout(false) // reload = false
1

Do logout and execute callback

Huggy.logout(true, function () {
  console.log('callback triggered before reload')
}) // reload = true

Huggy.logout(false, function () {
  console.log('callback triggered after logout')
}) // reload = false
1
2
3
4
5
6
7

Initialize programmatically and SPAs

Huggy Chat works with frameworks like Vue, React, Angular, Svelte and other. However, it is possible that will need made some changes. The default installation of Huggy Chat that you copy the code available in channel's settings need that you put the code in HTML file where the frameworks builds (normally in public/index.html or static/index.html).

If you don't have access to this file or simply you want init Huggy Chat by API, is necessary use Huggy.init.

Huggy.init(HuggyChatInit?)

This function allows the initialization of Huggy Chat programmatically. However, this method does not is always available. The cases are:

  1. At initialize Huggy Chat without the configuration object $_Huggy
  2. At execute the Huggy.logout(false) method. Read more about Huggy.logout

The 1st case is useful in SPAs or when you want initialize Huggy Chat in another moment. Instead of you put the installation code and it starts automatically, you will add only the Huggy Chat's script.

<script src="https://js.huggy.chat/widget.min.js"></script>
1

When Huggy Chat is initialized without the configuration object $_Huggy in window, the method Huggy.init becomes availablein the API.

In this case, Huggy.init is the unique method available

Using

There 2 ways to initialize programatically. You can declare the configuration object of Huggy Chat window.$_Huggy=HuggyChatInit and call Huggy.init without params. The function will look the object configuration declared previously.

The object of configuration in this case is specifically to start programatically: HuggyChatInit

The other way to initialize Huggy.init(HuggyChatInit) passing the specific configuration.

Both of cases, after execution of Huggy.init, Huggy Chat will load and the method will became unavailable.

HuggyChatInit

PropertyTypeDescriptionDefault
contextIDstringcontextID is an unique hash required for Huggy Chat working. This hash could be founded in installation code.
...HuggyChatConfigAll of properties HuggyChatConfig, including the required
<a href="#contextid">contextID</a>
string

contextID is an unique hash required for Huggy Chat working. This hash could be founded in installation code.

Default:


...
HuggyChatConfig

All of properties HuggyChatConfig, including the required

Default:


contextID

contextID is an unique hash required for Huggy Chat working. If you're utilizing the common code of instalation, putting the installation code available in channel's settings in your Huggy's account, you don't need worry about because hash already is included.

This param is only important for use case with Huggy.init.

This hash could be founded in installation code. Let's use for example the code used in installation









 



<!-- Init code Huggy Chat  //-->
<script>
  var $_Huggy = {
    defaultCountry: '+1',
    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

In the highlited line we can find the hash 8551dbde3f168db249381597eea81c71

In this case, rewriting the default code for use with Huggy.init would be like this:





 


Huggy.init({
  defaultCountry: '+1',
  widget_id: '0001',
  company: "0001",
  contextID: '8551dbde3f168db249381597eea81c71'
})
1
2
3
4
5
6

Huggy.init accepts as parameter an object HuggyChatInit

Types