Customizing the widget

agent-id (required)

Your LemonSlice agent ID.

HTML

<lemon-slice-widget agent-id="agent_id"></lemon-slice-widget>

States and sizing

Users can switch between the hidden, minimized, and active states. You can set the default state and the sizes for each state for the widget.

initial-state

Initial widget state on load. Options: "minimized", "active", or "hidden". Default: "minimized".

HTML

<lemon-slice-widget agent-id="agent_id" initial-state="active"></lemon-slice-widget>

Dynamically control widget state. Options: "minimized", "active", or "hidden".

HTML

<lemon-slice-widget agent-id="agent_id" controlled-widget-state="active"></lemon-slice-widget>

Control the widget dynamically by updating attributes with JavaScript:

JAVASCRIPT

const widget = document.querySelector('lemon-slice-widget');

// Change widget state
widget.setAttribute('controlled-widget-state', 'active');

// Toggle minimize button
widget.setAttribute('controlled-show-minimize-button', 'false');

custom-active-width

Custom width for the active widget state in pixels.

HTML

<lemon-slice-widget agent-id="agent_id" custom-active-width="400"></lemon-slice-widget>

custom-active-height

Custom height for the active widget state in pixels.

HTML

<lemon-slice-widget agent-id="agent_id" custom-active-height="600"></lemon-slice-widget>

custom-minimized-width

Custom width for the minimized widget state in pixels.

HTML

<lemon-slice-widget agent-id="agent_id" custom-minimized-width="80"></lemon-slice-widget>

custom-minimized-height

Custom height for the minimized widget state in pixels.

HTML

<lemon-slice-widget agent-id="agent_id" custom-minimized-height="80"></lemon-slice-widget>

Styling

inline

Display widget inline instead of floating. Default: false.

HTML

<lemon-slice-widget agent-id="agent_id" inline></lemon-slice-widget>

hide-ui

Hides all UI, while keeping sizing logic. Useful for if you want to build your own message UI.

HTML

<lemon-slice-widget agent-id="agent_id" hide-ui></lemon-slice-widget>

controlled-show-minimize-button

Dynamically control minimize button visibility. Options: "true" or "false".

HTML

<lemon-slice-widget agent-id="agent_id" controlled-show-minimize-button="false"></lemon-slice-widget>

show-minimize-button

Show or hide the minimize button on hover. Default: true.

HTML

<lemon-slice-widget agent-id="agent_id" show-minimize-button="false"></lemon-slice-widget>

video-button-color-hex

Hex color (with or without #) used for the minimized video chat button. Default: #919191.

HTML

<lemon-slice-widget agent-id="agent_id" video-button-color-hex="#FF4FD8"></lemon-slice-widget>

video-button-color-opacity

Opacity for the video chat button color in the range [0, 1]. Default: 0.3.

HTML

<lemon-slice-widget agent-id="agent_id" video-button-color-opacity="0.8"></lemon-slice-widget>

Examples

Start expanded

HTML

<lemon-slice-widget agent-id="agent_id" initial-state="active"></lemon-slice-widget>

Custom button color

HTML

<lemon-slice-widget
  agent-id="agent_id"
  video-button-color-hex="#FF4FD8"
  video-button-color-opacity="0.8"
></lemon-slice-widget>

HTML

<lemon-slice-widget
  agent-id="agent_id"
  custom-active-width="400"
  custom-active-height="600"
  custom-minimized-width="120"
  custom-minimized-height="120"
></lemon-slice-widget>

Using the widget

Embedding guides

Customizing the widget

agent-id (required)

States and sizing

initial-state

controlled-widget-state

custom-active-width

custom-active-height

custom-minimized-width

custom-minimized-height

Styling

inline

hide-ui

controlled-show-minimize-button

show-minimize-button

video-button-color-hex

video-button-color-opacity

Examples

Start expanded

Custom button color

Custom widget sizes

​agent-id (required)

​States and sizing

​initial-state

​controlled-widget-state

​custom-active-width

​custom-active-height

​custom-minimized-width

​custom-minimized-height

​Styling

​inline

​hide-ui

​controlled-show-minimize-button

​show-minimize-button

​video-button-color-hex

​video-button-color-opacity

​Examples

​Start expanded

​Custom button color

​Custom widget sizes

agent-id (required)

States and sizing

initial-state

controlled-widget-state

custom-active-width

custom-active-height

custom-minimized-width

custom-minimized-height

Styling

inline

hide-ui

controlled-show-minimize-button

show-minimize-button

video-button-color-hex

video-button-color-opacity

Examples

Start expanded

Custom button color

Custom widget sizes