NAV
JavaScript

Introduction

All API methods should be called on the onLoad event

HFCHAT_CONFIG.onload = function() {

 var HappyFoxChat = this;

};

HappyFox Chat’s JavaScript API provides you more control over the chat widget. You can customize the widget behavior programmatically.

All API methods should be called only after the script is loaded.

Set Visitor Info

Syntax - setVisitorInfo

HappyFoxChat.setVisitorInfo(<visitorInfoObject>, <callback>);

<visitorInfo[Object]> should have two mandatory properties name and email.

Example

HappyFoxChat.setVisitorInfo({
 'name': 'Bob',
 'email': 'bubblybob@gmail.com'
}, function(err, resp) {
 if(err) {
  console.error('Failed to set visitor details. Error:', err);
 } else {
  console.log('Added visitor details:', resp);
 }
});

You can send in your signed-in user’s name and email by simply calling the setVisitorInfo method to pass those details. This is will skip the pre-chat form for the users.

Mandatory properties that needs to be set:

Get Visitor Info

Syntax - getVisitorInfo

HappyFoxChat.getVisitorInfo(<callback>);

Example

HappyFoxChat.getVisitorInfo(function(err, resp) {
 if(err) {
  console.error('Failed to set visitor details. Error:', err);
 } else {
  console.log('Got visitor info:', resp);
 }
});

Properties returned by this method:

Unset Visitor

Syntax - unsetVisitor

HappyFoxChat.unsetVisitor(<callback>);

Example

HappyFoxChat.unsetVisitor(function(err) {
 if (err) {
  console.error('Failed to reset the visitor. Error:', err);
 } else {
  console.log('Visitor reset successful');  
 }
});

If you want to clear or unset the visitor details when your visitor logs off, you can call the method unsetVisitor API to clear the pre-filled data.

Set Custom Fields

Syntax - setCustomFields

HappyFoxChat.setCustomFields(<customFieldObject>, <callback>);

<customField[Object]> should have properties defined inside HappyFox Chat.

Example

HappyFoxChat.setCustomFields({
 'Account Number': '1234567890',
 'Branch': 'CA',
 'Type': 'Free'
}, function(err, resp) {
 if(err) {
  console.error('Failed to add given properties to custom fields. Error:', err);
 } else {
  console.log('Added custom field properties:', resp);
 }
});

Syntax - unsetCustomFields

HappyFoxChat.unsetCustomFields(["<customFieldName>", "<customFieldName>", ... ], <callback>);
HappyFoxChat.unsetCustomFields({
 'Account Number',
 'Branch'
}, function(err, resp) {
 /**
  * err  -> Incase of failure this will have error object
  */
 if(err) {
  console.error('Failed to unset given custom field values. Error:', err);
 } else {
  console.log('Successfully unset custom fields');
 }
});

The custom field is a way to pass more data about visitors from your website to HappyFox Chat without any action needed from them. Using this API, you can set or unset custom field values.

Get Custom Field

To Get Custom Field, use this code

HappyFoxChat.getCustomField("<customFieldName>", <callback>);

Example

HappyFoxChat.getCustomField("Type", function (err, value) {
 /**
  * err  -> Incase of failure this will have error object
  */
 if(err) {
  console.error('Failed to unset given custom field values. Error:', err);
 } else {
  console.log('Successfully got custom field value. Value:', value);
 }
});

Get a custom field value from the chat widget. This function will throw an error if the field is not set previously or if the field is not created in your account.

Add Custom Styles

To Add Custom Styles, use this code

HappyFoxChat.addCustomStyles(<customStyle>);

Example

HappyFoxChat.addCustomStyles('.hfc-title-text { color: #0000FF !important; } .hfc-title-bar { background-color: #00FF00 !important; }', function(err) {
 /**
  * err  -> Incase of failure this will have error object
  */
  if (err) {
    console.error('Failed to add custom styles. Error:', err);
  } else {
    console.log('Added custom styles');
  }
});

To make CSS customization or to change the style of the widget, use the below API.

Add Custom CSS File

To Add Custom Styles, use this code

HappyFoxChat.addCustomCSSFile(<customCSSFileUrl>);

Example

HappyFoxChat.addCustomCSSFile('http://mydomain.com/css/happyfoxchat-custom.css', function(err) {
 /**
  * err  -> Incase of failure this will have error object
  */
 if(err) {
  console.error('Failed to add custom CSS file. Error:', err);
 } else {
  console.log('Added custom CSS file');
 }
});

Pass in the URL of your own CSS file to customise the look & feel according to your brand aesthetics.

Expand/Collapse Chatbox

To Expand Chatbox, use this code

HappyFoxChat.expandChatbox(<callback>);

To Collapse Chatbox, use this code

HappyFoxChat.collapseChatbox(<callback>);

Example

HappyFoxChat.expandChatbox(function(err) {
 /**
  * err  -> Incase of failure this will have error object
  */
 if(err) {
  console.error('Failed to expand chatbox. Error:', err);
 } else {
  console.log('Expanded chatbox');
 }
});

Expand and Collapse the chat widget programmatically using this function. This is of great use when you want to expand/collapse the chat widget for certain scenarios in your page. For exampe - you can expand the chat widget when users click “Chat with us” link anywhere on your website.

Show/Hide Widget

To Show Widget, use this code

HappyFoxChat.showWidget(<callback>);

To Hide Widget, use this code

HappyFoxChat.hideWidget(<callback>);

Show and hide the chat widget programmatically using this function. This is of great use when you want to optionally show the widget on some pages in your website.

Show/Hide Badge

To Show Badge, use this code

HappyFoxChat.showBadge(<callback>);

To Hide Badge, use this code

HappyFoxChat.hideBadge(<callback>);

Show and hide the Badge on chat widget programmatically using this function.

Get Agents Availability

To Get Agents Availability, use this code

HappyFoxChat.getAgentsAvailability(function (err, agentsAvailability) {
  ...
});

Using this function, you can check whether your chat support agents are available to chat now.

Get Visitor State

Get Visitor State, use this code

HappyFoxChat.getVisitorState(function (err, visitorState) {
  ...
  visitorState can be "passive"/"waiting_for_agent"/"chattting"
});

Using this function, you can fetch the Visitor’s current chat state.

Get Proactive Message

to Get Proactive Message, use this code

HappyFoxChat.getProactiveMessage(function (err, proactiveMessage) {
  ...
});

Get Widget Properties

to Get Widget Properties, use this code

HappyFoxChat.getWidgetProperties(function (err, widgetProperties) {
  ...
});

Events

Example

HappyFoxChat.on('click:badge', function () {
  console.log('Chat with us badge clicked');
});

You can listen to various events from the widget.

Supported Events: