LemonSlice Agent Widget

LemonSlice Agent Widget is an embeddable web component that enables real-time video chat with LemonSlice AI agents. It provides a floating or inline widget that connects users to LemonSlice AI agents via video and audio. The widget is distributed as an npm package and can be embedded in any webpage with a single HTML tag.

LemonSlice agents are created on https://lemonslice.com/

How to use it

<lemon-slice-widget agent-id="agent_id"></lemon-slice-widget>
<script type="module" src="https://unpkg.com/@lemonsliceai/lemon-slice-widget"></script>

Configuration

Attributes

• agent-id (required): Your LemonSlice agent ID
• inline: Display widget inline instead of floating (default: false)
• show-minimize-button: Show/hide the minimize button (default: true)
• initial-state: Initial widget state on load - "minimized", "active", or "hidden" (default: "minimized")
• controlled-widget-state: Dynamically control widget state - "minimized", "active", or "hidden"
• controlled-show-minimize-button: Dynamically control minimize button visibility - "true" or "false"
• video-button-color-hex: Hex color (with or without #) used for the minimized video chat button (default: #919191)
• video-button-color-opacity: Opacity for the video chat button color in the range [0, 1] (default: 0.3)

Examples

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

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

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

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

Dynamic Control

Control the widget dynamically by updating attributes:

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');