Offline Message

Offline Message

Fields

Get All Fields

You could get all fields in Offline Message using API:

/** @type {string} */
const campaignId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
/** @type {Array<Field>} */
const fields = Comm100API.get('livechat.offlineMessage.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 Offline Message, you could also use API to set all fields for Offline Message,
including it's value, error messages, etc.:

/** @type {string} */
const campaignId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
/** @type {Array<Field>} */
const fields = [];
Comm100API.set('livechat.offlineMessage.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.offlineMessage.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.offlineMessage.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.offlineMessage.field.focus', fieldId);

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

Comm100API.on('livechat.offlineMessage.field.focus', function (field) { });
Comm100API.on('livechat.offlineMessage.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 Offline Message form, corresponding event will be triggered. Following API shows how to
listen to this event:

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

Here, formData is an object containing all values of fields in Offline Message 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.offlineMessage.submit.success', function () { });

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

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

where message is a string indicating the error message.

Submit Action

You could also use API to submit Offline Message form directly:

/** @type {Promise<void>} */
const promise = Comm100API.do('livechat.offlineMessage.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 Offline Message form:

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

Minimize

You could listen to minimize event of Offline Message form:

Comm100API.on('livechat.offlineMessage.minimize', function () { });

To minimize the form manually, use following API:

Comm100API.do('livechat.offlineMessage.minimize');

Restore

You could listen to restore event of Offline Message form:

Comm100API.on('livechat.offlineMessage.restore', function () { });

To restore the form manually, use following API:

Comm100API.do('livechat.offlineMessage.restore');

Close

You could listen to close event of Offline Message form:

Comm100API.on('livechat.offlineMessage.close', function () { });

To close the form manually, use following API:

Comm100API.do('livechat.offlineMessage.close');

Replacement

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

Header Icons

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

Header

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

Greeting Message Area

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

Postchat Form

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

Submit Button

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

Footer

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

Powered-by Area

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