Post-Chat

Post-Chat

Fields

Get All Fields

You could get all fields in postchat using API:

/** @type {string} */
const campaignId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
/** @type {Array<Field>} */
const fields = Comm100API.get('livechat.postChat.fields', campaignId);

Campaign ID is optional parameter that can be used to determine which campaign you would like to
get. If it is not provided, the first campaign ID returned by Comm100API.get('livechat.campaignIds')
will be used as default value.

Here, the API will return a list of fields, each is an object representing the field in form, which
has same structure as shown in PreChat.

Set All Fields

Similar as getting all fields for postchat, you could also use API to set all fields for postchat,
including it's value, error messages, etc.:

/** @type {string} */
const campaignId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
/** @type {Array<Field>} */
const fields = [];
Comm100API.set('livechat.postChat.fields', fields, campaignId);

Campaign ID is optional parameter that can be used to determine which campaign you would like to
get. If it is not provided, the first campaign ID returned by Comm100API.get('livechat.campaignIds')
will be used as default value.

Besides all types of fields listed above, you could also set custom field if system provided
types cannot fulfill all your requirement:

const fields = [{
  type: 'custom', // type of field
  element: function (update) {
    const component = document.createElement('input');
    component.onchange = function (event) {
      const value = event.target.value;
      update(value);
    };
    return component;
  },
}];
Comm100API.set('livechat.postChat.fields', fields);

In example above, a custom field is defined.

The attribute element provides a callback function which will be used to render element. It should
return an HTMLElement which will be placed in form. When callback is triggered, update as a function
will be provided. Custom component should use this update function to inform the system whenever
the value of field has been changed: update(value);.

Field Change Event

To listen to change event of fields, use following API:

Comm100API.on('livechat.postChat.field.change', function (field) { });

field will be provided when event fires, the structure of this object can be found here.

Blur and Focus

To focus on specific field, use following API:

/** @type {string} */
const fieldId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
Comm100API.do('livechat.postChat.field.focus', fieldId);

To listen to focus/blur event, use one of the following APIs:

Comm100API.on('livechat.postChat.field.focus', function (field) { });
Comm100API.on('livechat.postChat.field.blur', function (field) { });

field will be provided when event fires, the structure of this object can be found here.

Submit Form

Event

When visitor submit postchat form, corresponding event will be triggered. Following API shows how to
listen to this event:

Comm100API.on('livechat.postChat.submit', function (formData) { });

Here, formData is an object containing all values of fields in postchat form. The structure is
the same as described in PreChat.

This event will be triggered when visitor submits the form.

When submitting is succeed, following event will be triggered:

Comm100API.on('livechat.postChat.submit.success', function () { });

However, if server reject it, following event will be triggered:

Comm100API.on('livechat.postChat.submit.fail', function (message) { });

where message is a string indicating the error message.

Submit Action

You could also use API to submit postchat form directly:

/** @type {Promise<void>} */
const promise = Comm100API.do('livechat.postChat.submit');

The chat window requires to be opened when submitting the form. Calling this API is equivalent to
clicking the submit button by user. That means, if any of the fields has issue, submit will fail.
Hence, for this API, a promise will be returned, indicating whether submit success or not.
If promise is rejected, a list of IDs will be provided as first parameter, indicating which fields
are invalid due to incorrect values; if first parameter is null, you could check the second
parameter for possible error message.

Display

You could listen to display event of postchat form:

Comm100API.on('livechat.postChat.display', function () { });

Replacement

There are several components in postchat form which can be replaced by your own component, following
are they and how you could replace:

Greeting Message Area

Comm100API.render('livechat.postChat.greeting', function () {
  // return custom HTMLElement to replace default component
});

Postchat Form

Comm100API.render('livechat.postChat.form', function () {
  // return custom HTMLElement to replace default component
});

Submit Button

Comm100API.render('livechat.postChat.submit', function () {
  // return custom HTMLElement to replace default component
});