Side Window
  • 11 Mar 2022
  • 1 Minute to read
  • Dark
    Light

Side Window

  • Dark
    Light

Article summary

Side Window

Display

To see if side window is visible, you could use the following API:

/** @type {boolean} */
const isVisible = Comm100API.get('livechat.sideWindow.isVisible');

To set the visibility of side window, you could use the following API:

/** @type {boolean} */
const isVisible = true;
Comm100API.set('livechat.sideWindow.isVisible', isVisible);

If you are interested in the display event of side window, you could use one of the following
APIs:

Comm100API.on('livechat.sideWindow.show', function () { });
Comm100API.on('livechat.sideWindow.hide', function () { });

Tab

To get all available tabs of side window, you could use API:

/** @type {Array<Tab>} */
const tabs = Comm100API.get('livechat.sideWindow.tabs');

Here, the API will return a list of objects representing available tabs, where each has one of
the following structures:

  • System tab
const tab = {
  id: '', // string, id of tab
  isSystem: true, // boolean, whether tab is from system
  'aria-label': '', // aria-label that will be used for this tab icon
};
  • Custom tab
const tab = {
  id: '', // string, id of  tab
  isSystem: false, // boolean
  content: function () {
    const component = document.createElment('div');
    return component;
  },
  iconImg: '', // string, url of image, which will be used to display icon in tab
  'aria-label': '', // aria-label that will be used for this icon
}

Here, content should be a callback function to generate custom HTMLElement.

You could also use the following API to set all tabs:

const tabs = [];
Comm100API.set('livechat.sideWindow.tabs', tabs);

To listen to tab switch events, you could use the following API:

Comm100API.on('livechat.sideWindow.tabs.switch', function(currentTabId) {});

Selected tab id will be provided when callback triggered.


Was this article helpful?