GHX CHAT SUPPORT

This is an Angular wrapper library for the Ghx Chat Support. To use this library you should get familiar with the Ghx Chat Support documentation as well since this documentation only explains details specific to this wrapper.

This documentation is for the latest 5/6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 1.x.x can be found from here.

Quick links

Example application | StackBlitz example | Ghx Chat Support documentation

Installing and usage

npm install ghx-chat-support --save

Load the module for your app (with global configuration):

Providing the global configuration is optional and when used you should only provide the configuration in your root module.

import { GhxChatSupportModule } from 'ghx-chat-support';


@NgModule({
  ...
  imports: [
    ...
    GhxChatSupportModule
  ],
})

Use it in your HTML template (with custom configuration):

This library provides two ways to create a Ghx Chat Support for your project, a component. Component tries to make the usage as simple as possible.

COMPONENT USAGE

Simply replace the element that would ordinarily be passed to PerfectScrollbar with the perfect-scollbar component.

<ghx-chat-support
    [chatBoxType]="'skype'"
    [chatList]="chatBoxListData"
>
</ghx-chat-support>

[chatBoxType]           // Whatever you want the type of chat box (Skype, Messenger, Telegram, Whatsapp) (Default: Skype).
[chatList]              // List of active team member who available for interact with user

Available configuration in chatList option:

userImg                 // Image of your team member who visible to user.
userName                // Name of the team member.
userDesignation         // Designation of team member
contactName             // This is contact name of your team member.
                        // Whatsapp: Your mobile number
                        // Telegram/Messenger/Skype: Your userName
userAvailability        // This is time of your team member avaibility. If you don't use this option that your team member will be always offline.

Example of Chat Box List Data

[
  {
    userImg: <Image Path>,
    userName: <Team member name>,
    userDesignation: <Team member designation>,
    contactName: <Team member contact number>,
    userAvailability: {
      sunday: '09:00-19:00',
      monday: '09:00-19:00',
      tuesday: '09:00-19:00',
      wednesday: '09:00-19:00',
      thursday: '09:00-19:00',
      friday: '09:00-19:00',
      saturday: '09:00-19:00',
    },
  }, ...
]

For more detailed documentation with all the supported events / options see the the Ghx Chat Support documentation.