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

To Set Visitor Info

HappyFoxChat.setVisitorInfo({
 'name': 'Bob',
 'email': 'bubblybob@gmail.com',
 'phoneNumber': '+18005251415'
}, function(err, resp) {
  /**
  * err  -> Incase of failure this will have error object
  * resp -> Passed visitor info object (Here: { 'name': 'Bob', 'email': 'bubblybob@gmail.com', 'phoneNumber': '+18005251415' })
  */
  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:

Syntax - setVisitorInfo

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

Get Visitor Info

To Get Visitor Info

HappyFoxChat.getVisitorInfo(function(err, resp) {
  /**
  * err  -> Incase of failure this will have error object
  * resp -> Visitor Info object (Example: { 'name': 'Bob', 'email': 'bubblybob@gmail.com', phoneNumber: '+18005251415' })
  */
  if(err) {
    console.error('Failed to set visitor details. Error:', err);
  } else {
    console.log('Got visitor info:', resp);
  }
});

Properties returned by this method:

Syntax - getVisitorInfo

HappyFoxChat.getVisitorInfo(<callback>);

Unset Visitor

To Unset Visitor

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.

Syntax - unsetVisitor

HappyFoxChat.unsetVisitor(<callback>);

Set Custom Fields

To Set Custom Fields

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

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

Syntax - setCustomFields

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

Syntax - unsetCustomFields

HappyFoxChat.unsetCustomFields(["<customFieldName>", "<customFieldName>", ... ], <callback>);

Get Custom Field

To Get Custom Field

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.

Syntax - getCustomField

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

Add Custom Styles

To Add Custom Styles

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.

Syntax - addCustomStyles

HappyFoxChat.addCustomStyles(<customStyle>);

Add Custom CSS File

To Add Custom CSS File

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.

Syntax - addCustomCSSFile

HappyFoxChat.addCustomCSSFile(<customCSSFileUrl>);

Expand/Collapse Chatbox

To Expand/Collapse Chatbox

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.

Syntax - expandChatbox

HappyFoxChat.expandChatbox(<callback>);

Syntax - collapseChatbox

HappyFoxChat.collapseChatbox(<callback>);

Show/Hide Widget

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.

Syntax - showWidget

HappyFoxChat.showWidget(<callback>);

Syntax - hideWidget

HappyFoxChat.hideWidget(<callback>);

Show/Hide Badge

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

Syntax - showBadge

HappyFoxChat.showBadge(<callback>);

Syntax - hideBadge

HappyFoxChat.hideBadge(<callback>);

Get Agents Availability

To Get Agents Availability

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

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

Get Visitor State

To Get Visitor State

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

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

Get Widget Properties

To Get Widget Properties

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

Events

To Listen Events

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

You can listen to various events from the widget.

Supported Events: