Chattigo's webchat-client
Webchat client for chattigo support service.
Installation
You can download Chattigo's webchat client from our CDN, like this:
Your web site. whatever...
It is also available via npm, as a CommonJS package:
$ npm install --save chattigo-webchat
In case you are using npm, you can also require/import chattigo as a CommonJS module:
// ES5var Chattigo = ;
// ES6;
And then, in your html or in a javascript file, just do:
// ES5var chattigo = "<your_API_key>";chattigo;
// ES6const chattigo = "<your_API_key>";chattigo;
Alternatively, you can clone this project, and use webpack to generate the necessary files in the dist folder, and include them in your project.
Bootstrap considerations
Since chattigo-webchat
uses bootstrap components, it comes with bootstrap.js
library
prepackaged. In case you are using bootstrap on your website, please use the following code
to conditionally include bootstrap.js
only in case chattigo doesn't load.
Make sure to include this snippet after you include jquery
, so bootstrap can
load correctly. Also, make sure to replace the value of the variable
bootstrap_cdn
with the proper url of your bootstrap distribution.
Usage
Your web site. whatever...
Settings
There is a second optional parameter to Chattigo
constructor, the settings
object, and its usage is as follows:
var settings = header_text: "Web Chat" send_text: "Enviar" login_text: "Iniciar sesión" welcome_text: "Bienvenido al servicio de web chat de chattigo. Por favor introduzca la información solicitada para iniciar la sesión." message_placeholder: "Introduzca su mensaje..." login_fields: "Nombre" "Email" "RUT" toggle_background_color: "#0853CB" toggle_color: "#FFFFFF" send_background_color: "#0853CB" send_color: "#FFFFFF" message_list_background_image: null width: 300 height: 400 locale: "es" toggle_button_image: null name_field: "Nombre"; var chattigo = "<your_API_key>" settings;chattigo;
The default settings are defined as follows:
const SETTINGS = header_text: "Web Chat" header_background_color: null header_color: null header_icon_color: null send_text: "Enviar" login_text: "Iniciar sesión" welcome_text: "Bienvenido al servicio de web chat de chattigo. Por favor introduzca la información solicitada para iniciar la sesión." message_placeholder: "Introduzca su mensaje..." login_fields: "Nombre" "Email" "RUT" toggle_background_color: "#0853CB" toggle_color: "#FFFFFF" send_background_color: "#0853CB" send_color: "#FFFFFF" message_list_background_image: null width: 300 height: 400 locale: "es" toggle_button_image: null name_field: "Nombre" toggle_button: null;
Options
Setting | Description | Type | Default Value |
---|---|---|---|
header_text |
Text displayed in the chat widget's upper bar | string | "Web Chat" |
message_placeholder |
Placeholder for the send message box | string | "Introduzca su mensaje..." |
send_text |
Text displayed in the send button | string | "Enviar" |
login_fields |
List of fields required by Chattigo's customer in order to start a chat session. This data will be sent as a chat message, in JSON format, where every key corresponds to a kebab-cased form of the field name. This will be improved in future releases. Refer to Login Form Fields section for validation and advanced usage. | list of strings | ["Nombre", "Email", "RUT"] |
toggle_background_color |
CSS background-color for the webchat button in the collapsed state |
string | "#0853CB" |
toggle_color |
CSS color property for the webchat button in the collapsed state |
string | "#FFFFFF" |
welcome_text |
Welcome message displayed in the login form | string | "Bienvenido al servicio de web chat de chattigo. Por favor introduzca la información solicitada para iniciar la sesión." |
width |
Number of pixels of the expanded widget's with | int | 300 |
height |
Number of pixels of the expanded widget's height | int | 400 |
send_background_color |
Send message button css background-color property |
string | "#0853CB" |
send_color |
Send message css color property |
string | "#FFFFFF" |
message_list_background_image |
One of: null , for using chattigo's default background; false , for no background image; or a string containing the absolute url for a background image. |
null , false or url string |
null |
locale |
Moment.js supported locale for displaying dates. | string | "es" |
toggle_button_image |
URL for an image to be displayed in the collapsed chattigo's widget; a valid glyphicon name as documentend in bootstrap's glyphicon documentation; or null for chattigo's default image. | string or null |
null |
name_field |
Name of the field defined in form_fields which is going to be used as the user display name. Note that if you customize form_fields , you have to customize this setting too, and they need to be consistent. |
string | 'Nombre' |
toggle_button |
(EXPERIMENTAL). Allows setting a completely custom collapsed chat button. User should write the custom html as a string. Styles for the custom button must be defined by the user, whether through inline styles, a style tag in your document, or a stylesheet imported through a link tag. The custom collapsed toggle button will be rendered as follows: <div id="chattigo-webchat-container"><div id="chattigo-widget" class="collapsed custom"><!-- Your custom html here--></div></div> . This option overrides toggle_button_image , toggle_background_color and toggle_color . |
string | null |
header_background_color |
Defines the background color css property for the webchat panel header. Must be specified as a string, in hexadecimal notation (i.e. "#f45842") | string | null |
header_icon_color |
Defines the color css property for the webchat panel header's icon that collapses the widget. Must be specified as a string, in hexadecimal notation (i.e. "#f45842") | string | null |
header_color |
Defines the color css property for the webchat panel header text. Must be specified as a string, in hexadecimal notation (i.e. "#f45842") | string | null |
initial_open_state |
Defines the initial state of the widget, whether it is expanded or collapsed |
string | collapsed |
preserve_history |
whether to preserve the chat history on page reload or not. | boolean | true |
Expect more customization in future releases.
Login Form Fields
You can specify how you want chattigo webchat client to render your login form
fields,using the option login_fields
. Up to now, you can specify string
fields whether they are rendered as a text input or as a select input. Fields
are of string
type by default. Expect more field types in future releases.
String Fields
You can specify a string
field in the login_fields
option in several ways:
-
By specifying its label as a string:
login_fields: ["Nombre", "Email", "RUT"]
-
By specifying a
label
and/or atype
key:login_fields: [{label: 'Nombre', type: 'string'}, 'Email', { label: 'RUT' }]
-
By specifying a
choices
key:
login_fields: label: 'Nombre' type: 'string' 'Email' label: 'RUT' label: 'Carrera' choices: 'Ingeniería' 'Matemática' 'Biología' /* ... */
Validation
Chattigo's webchat client provides built in validation for required fields.
Fields are not required by default, so, if you want some field to be required,
just add required: true
to its definition in login_fields
option.
Also, you can provide a validation function for each field by using the
validation
field. Such function must receive a parameter corresponding to
the value of the field to be validated, and must throw an exception with
the desired message in case the value is invalid.
For instance, let's say we want to validate that a certain field is a valid email. An example validation function could be:
document;
In this example, both Email
and RUT
fields are required, and email
validation through regex test is provided for Email
field.
Methods
The chattigo instance returned by its constructor exposes the following methods:
.init()
Initializes the widget given it has been properly configured with a valid API key, and either the default settings, or a valid settings object.
.update(settings)
Update chattigo widget's settings by merging the settings object passed with the current settings.
Parameters:
settings
:- Type: object.
- Description: Settings object as described in section settings.
.overwrite(settings)
Overwrite chattigo widget's settings by replacing current settings with the ones passed in the settings object.
Parameters:
settings
:- Type: object.
- Description: Settings object as described in section settings.
.toggle()
Toggle the widget into collapsed/expanded state.
.collapse()
Collapses the widget.
.expand()
Expands the widget.
.logout()
Ends current session and sends a message to chattigo indicating the user has been disconnected.
.clear_chat()
Clears the chat's message list from local storage.
.flush()
Clears all data in local storage.
API Key
In order to get an API key you need to get in touch with chattigo executives. Visit our website or contact our executives through contacto@chattigo.com.
License
Chattigo's webchat client is distributed under GNU GENERAL PUBLIC LICENSE, Version 3. Check the license file for further details.