Customization

Top Menu Options

Menu Options Example

You can configure menu options on the Widget constructor and attach custom events to each one of those.

TopMenu Interface

interface TopMenu {
    options: Option[];
}

Description:

Option	Description
options	Options list.

Adding the top menu in the constructor:

new WidgetService({
    apiKey: "<apiKey>",
    topMenu: {
      options: [
        {
          title: "Option 1",
          payload: {
            type: "event",
            flowId: "myCustomEvent",
          },
        },
        {
          title: "Option 2",
          payload: {
            type: "event",
            event: "anotherCustomEvent",
          },
        },
      ],
    },
  });

Home Menu Options

You can configure an initial menu which will appear if there is no message sent or the room is empty, these two options are configurable.

Home Menu Options

HomeMenu Interface

interface HomeMenuProps {
    showHomeMenuOnEmptyRoom?: boolean;
    showHomeMenuOnEmptyMessages?: boolean;
    disableInputs?: boolean;
    homeMenuTitle: string;
    options: Option[];
}

Description:

Option	Description
showHomeMenuOnEmptyRoom	Defines whether the menu should be displayed only if the room is empty, i.e. there is no member other than the user.
showHomeMenuOnEmptyMessages	Defines whether the menu should be displayed only if there are no messages in the room.
disableInputs	Defines whether the input options should be disable when the menu is displayed.
homeMenuTitle	Menu title.
options	Options list.

Adding the menu in the constructor:

new WidgetService({
    apiKey: "<apiKey>",
    homeMenu: {
      showHomeMenuOnEmptyMessages: true,
      homeMenuTitle: "This is the home menu title.",
      options: [
        {
          title: "Option 1",
          payload: {
            type: "event",
            flowId: "myCustomEvent",
          },
        },
        {
          title: "Option 2",
          payload: {
            type: "event",
            event: "anotherCustomEvent",
          },
        },
      ],
    },
  });

Option

{
    title: string;
    payload: {
        type: 'event' | 'flow';
        flowId?: number;
        event: string;
    };
}

When a user clicks on any of the options, an event is triggered to the widget instance:

widgetInstance.on("MyCustomEvent", (payload) => {
    // Attach behavior to the custom event
    // Payload: { room: Room } 
});

Each customized event contains the room where it was clicked.

Start Bubble

You can customize the size, size of logo and logo.

StartButtonProps Interface

export interface StartButtonProps {
    logoUrl?: string;
    logoSize?: 'lg' | 'md' | 'sm';
    size?: 'lg' | 'md' | 'sm';
    background?: string;
}

Description:

Option	Description
logoUrl	Logo URL
logoSize	Logo size
size	Bubble size
background	Customize the background color of the button using a Css Property

Adding the startButton options in the constructor:

new WidgetService({
    apiKey: "<apiKey>",
    startButton: {
        logoUrl: "<someUrl>",
        logoSize: "md",
        size: 'lg'
    },
});

Bubble Sizes

Diferent Sizes

Bubble Background Color

This property takes in a Css Property of color, that can be a color name, hex color, and also a Css Gradient, exaples:

• background: 'red'

• background: '#00A2CF'

• background: 'linear-gradient(287.59deg, #082264 1.05%, #275795 72.39%, #447BC2 94.87%)'

Tooltip Panel

You can customize the text, background color

TooltipPanelProps Interface

export interface TooltipPanelProps {
    backgroundColor?: string;
    message: {
        title?: string;
        text: string;
        textColor: 'main' | 'grey' | 'light';
    };
    closeIcon?: string;
}

Description:

Option	Description
backgroundColor	Customize the background color of the tooltip using a Css Property
message	the displayed message inside the tooltip
closeIcon	Customize the background color of the close button icon using a Css Property

Adding the startButton options in the constructor:

new WidgetService({
    apiKey: "<apiKey>",
    tooltipPanel: {
        backgroundColor: "<some css property>",
	message: {
		title: "<some title>",
		text: "<some description>",
		textColor: "light",
	},
	closeIcon: 'white',
    },
});

Switch Rooms

This module can be used to switch between the user personal room and the room shared with the widget bot.

Room Switcher

EDITABLE COLORS

This module background and focus color of the icon can be changed, the colors are inside the object theme.

const theme = {
    vars: {
        color: {
            backgroundSwitch: "<string>",
            focusSwitch: "<string>"
        }
    }
};

Description:

Option	Description
backgroundSwitch	Customize the background color of the Switch module with a Css Property
focusSwitch	Customize the color of the icon and label

Adding the color change options in the constructor example:

new WidgetService({
    apiKey: "<apiKey>",
    theme: {
        vars: {
            color: {
                backgroundSwitch: '#CDD193',
                focusSwitch: '#013A20'
            }
        }
    }
});

EDITABLE VISUALS

The icons and labels of this module are also editable.

const properties = {
    allowClose: "<boolean>",
    switchEnable: {
        enabled: "<boolean>",
        logoUrl: "<string>",
        bot: {
            iconUrl: "<string>",
            label: "<string>"
        },
        group: {
            iconUrl: "<string>",
            label: "<string>"
        }
    }
};

Description:

Option	Description
allowClose	shows or hide the close button for the widget.
switchEnable	object that contains properties for the switch module.
switchEnable.enabled	boolean that enables the switch module to be shown.
switchEnable.logoUrl	url string for the icon shown at the left side of the module. if it isnt specified, then the icon would come from the header panel.
switchEnable.bot	object that contains properties for the bot icon and label.
switchEnable.group	object that contains properties for the group icon and label.
...iconUrl	string for the image icon for one of the options.
...label	string for the text of one of the options.

Adding the visual options in the constructor example:

new WidgetService({
    apiKey: "<apiKey>",
    properties: {
      enabledHeader: false,
      allowClose: false,
      switchEnable: {
        enabled: true,
        logoUrl: 'https://picsum.photos/id/1042/3456/5184',
        bot: {
          iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/6/69/How_to_use_icon.svg',
          label: 'first option'
        }
      }
    }
});

Show Events

property to show when a member of a room leave it or a new member joins the room.

const properties = {
    showEvents: "boolean"
};

Description:

Option	Description
showEvents	shows or hide the leave room and join room events from the operator view side in the widget group type.

Adding the showEvents options in the constructor example:

new WidgetService({
    apiKey: "<apiKey>",
    properties: {
      showEvents: true,
    }
});

Disable When Alone

property to disable the inputs when there is only 1 member in the current room membersInfo.

const properties = {
    disableWhenAlone: "boolean"
};

Description:

Option	Description
disableWhenAlone	disable inputs if there is onl 1 member in the room.

Adding the disableWhenAlone options in the constructor example:

new WidgetService({
    apiKey: "<apiKey>",
    properties: {
      disableWhenAlone: true,
    }
});