Widget

Widget is composed of 2 components:

Engagement: the part that is visibile before starting a chat (e.g. a button, a sidebar, etc)
Interaction: the part visibile after the engagement. It includes data collections and chat panel

Style

For both the components, the widget style is implemented using CSS and HTML file.

CTLive built-in engagement widgets are:

Sidebar: a small tag on the left side of the screen
Button: a button over the page in the right down corner
popup: a dialog in the middle of the page

CTLive Interactive built-in widget is only one

You can add custom widget loading your html, css files into the customDocument collection and then referencing at them using the sintax:

{
  "engagement_html" : "customDocument/sidebarEngagement.html?v=1",
  "engagement_css" : "customDocument/sidebarEngagement.css?v=1",
  "widget_html" : "customDocument/sidebarWidget.html?v=1",
  "widget_css" : "customDocument/sidebarWidget.css?v=1"
}

Logic

Widget Logic implemented in a dedicated JS file.

It defines a Javascript class (WIDGET) implementing a Finite State Machine(FSM). It’s used to implement the whole life cycle of the widget, from activation to termination. CTLive states

To implement a different FSM, WIDGET class is extensible overriding methods that you’d like to change.

For a complete list of widget object properties, please see this page Widget Object