lippy-ai-widget

v1.0.2

Published

8 months ago

Lippy AI Widget - Easy to integrate AI chat widget for websites

0High
0Medium
0Low

lippyai

ai chat widget lippy voice assistant

Lippy AI Widget

A lightweight, easy-to-integrate AI chat widget for websites. Simply add a script tag and a custom element to your HTML, and you're ready to go!

Installation

Via CDN (Recommended)

Add the following to your HTML:

<!-- Add the widget element -->
<lippy-ai-widget
  public-key="your-public-key"
  assistant-id="your-assistant-id"
  mode="chat"
  theme="light"
  base-bg-color="#ffffff"
  accent-color="#14B8A6"
  cta-button-color="#ffffff"
  cta-button-text-color="#000000"
  border-radius="large"
  size="full"
  position="bottom-right"
  title="TALK WITH AI"
  start-button-text="Start"
  end-button-text="End Call"
  cta-title="Need Help?"
  cta-subtitle="Chat with our AI assistant"
  chat-first-message="Hey, How can I help you today?"
  chat-placeholder="Type your message here..."
  voice-show-transcript="true"
  consent-required="true"
  consent-title="Terms and conditions"
  consent-content="By clicking 'Agree,' and each time I interact with this AI agent, I consent to the recording, storage, and sharing of my communications with third-party service providers, and as otherwise described in our Terms of Service."
  consent-storage-key="lippy-ai_widget_consent"
></lippy-ai-widget>

<!-- Add the script -->
<script src="https://unpkg.com/lippy-ai-widget@latest/dist/lippy-ai-widget.js" async></script>

Via NPM

npm install lippy-ai-widget

Then import in your JavaScript:

import 'lippy-ai-widget';

Configuration Options

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | public-key | string | - | Your Lippy AI public key (required) | | assistant-id | string | - | Your assistant ID (required) | | mode | string | "chat" | Widget mode: "chat" or "voice" | | theme | string | "light" | Theme: "light" or "dark" | | base-bg-color | string | "#ffffff" | Background color of the widget | | accent-color | string | "#14B8A6" | Primary accent color | | cta-button-color | string | "#ffffff" | CTA button background color | | cta-button-text-color | string | "#000000" | CTA button text color | | border-radius | string | "large" | Border radius: "small", "medium", or "large" | | size | string | "full" | Widget size: "small", "medium", or "full" | | position | string | "bottom-right" | Widget position: "bottom-right", "bottom-left", "top-right", "top-left" | | title | string | "TALK WITH AI" | Button title text | | start-button-text | string | "Start" | Start button text | | end-button-text | string | "End Call" | End button text | | cta-title | string | "widget title" | Modal title | | cta-subtitle | string | "Need Help ??" | Modal subtitle | | chat-first-message | string | "Hey, How can I help you today?" | First message shown to users | | chat-placeholder | string | "Hey, I have a problem..." | Input placeholder text | | voice-show-transcript | boolean | "true" | Show voice transcript | | consent-required | boolean | "true" | Require user consent | | consent-title | string | "Terms and conditions" | Consent modal title | | consent-content | string | "..." | Consent modal content | | consent-storage-key | string | "lippy-ai_widget_consent" | Local storage key for consent |

Examples

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <h1>Welcome to my website!</h1>
    
    <!-- Lippy AI Widget -->
    <lippy-ai-widget
        public-key="your-public-key-here"
        assistant-id="your-assistant-id-here"
    ></lippy-ai-widget>
    
    <script src="https://unpkg.com/lippy-ai-widget@latest/dist/lippy-ai-widget.js" async></script>
</body>
</html>

Customized Widget

<lippy-ai-widget
    public-key="your-public-key-here"
    assistant-id="your-assistant-id-here"
    theme="dark"
    accent-color="#FF6B6B"
    position="bottom-left"
    title="Ask AI"
    cta-title="Get Help"
    cta-subtitle="Our AI assistant is here to help!"
    chat-first-message="Hello! I'm here to assist you. What can I help you with today?"
    border-radius="small"
    size="medium"
></lippy-ai-widget>

With Consent

<lippy-ai-widget
    public-key="your-public-key-here"
    assistant-id="your-assistant-id-here"
    consent-required="true"
    consent-title="Privacy Notice"
    consent-content="This AI assistant may record and process your conversations for service improvement purposes."
    consent-storage-key="my-app-consent"
></lippy-ai-widget>

API Reference

Global Object

The widget creates a global LippyAIWidget object that you can use to interact with the widget programmatically.

// Access the widget instance
const widget = window.LippyAIWidget;

// You can also create new instances
const customWidget = new LippyAIWidget();

Browser Support

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

Development

Building from Source

# Install dependencies
npm install

# Build for production
npm run build

# Development mode with watch
npm run dev

File Structure

├── src/
│   └── lippy-ai-widget.js    # Main widget source
├── dist/
│   └── lippy-ai-widget.js    # Built widget (UMD)
├── package.json
├── webpack.config.js
└── README.md

License

MIT License - see LICENSE file for details.

Support

For support and questions, please visit lippy.ai or contact our support team.