Customizing chat widget using JavaScript API

The new version of HappyFox Chat widget makes the mobile experience much smoother and awesome. If you want to customize the widget programmatically using JavaScript, refer the guide below.

Important Note: All API methods should be called in the onload event.

Sample Code:

HFCHAT_CONFIG.onload = function() {

var HappyFoxChat = this;
/**
* All your customisation code goes here...
*/
};

1. CSS Customization 

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

  • To Add Custom Styles 

Syntax

HappyFoxChat.addCustomStyle(<customStyle[String]>);

Sample Code:

HappyFoxChat.addCustomStyles('.hfc-title-text { color: #FF0000; }', function(err) {
if (err) { console.error('Failed to add custom styles. Error:', err); } else { console.log('Added custom styles'); } });
  • To Add Custom CSS File 

Syntax:

HappyFoxChat.addCustomCSSFile(<customCSSFileUrl>);

Sample Code:

HappyFoxChat.addCustomCSSFile('http://mydomain.com/css/happyfoxchat-custom.css', function(err) {
  if (err) {
    console.error('Failed to add custom CSS file. Error:', err);
   } else {
     console.log('Added custom CSS file');
   }
});

2. Open chat widget on click of a link

If you want to open the chat widget on clicking of a link in your web page, use the below API.

Syntax:

HappyFoxChat.expandChatbox();

Sample Code:

HappyFoxChat.expandChatbox(function(err) {
  if (err) {
    console.error('Failed to expand chatbox. Error:', err);
  } else {
    console.log('Expanded chatbox');
  }
});

3. Set visitor details 

If you already know the visitor's name and email, you can simply call the below API to pass those details, instead of asking your visitor to fill the pre-chat form.

Syntax:

HappyFoxChat.setVisitorInfo(<visitorInfo[Object]>, <callback[Function]>);
Note: <visitorInfo[Object]> should have two mandatory properties name and email.

Sample Code:

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. VisitorInfoObject:', resp);
}
});

4. Clear/reset the visitor details 

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

Syntax:

HappyFoxChat.unsetVisitor(<callback>);

Sample Code:

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

5. Set 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. You can send details using the API mentioned below.

Syntax:

HappyFoxChat.setCustomFields(<customField[Object]>, <callback[Function]>);
Note: <customField[Object]> should have properties defined inside HappyFox Chat.

Sample Code:

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

 

If you need help in making any other customizations to chat widget, mail us at support@happyfoxchat.com