@waii-ai/widgets v1.27.15

Waii Widgets

A collection of React UI components featuring the WaiiChat widget, which provides embedded chat functionality powered by Waii's text-to-SQL API.

Features

• 🚀 Easy to integrate with multiple implementation options
• 💅 Customizable themes and styling
• 📱 Mobile-responsive
• 🔒 TypeScript support
• ⚡ Lightweight
• 🎯 Three integration methods: React Component, Standalone Script, or iFrame Embed

Installation

# Using npm
npm install @waii-ai/widgets

# Using yarn
yarn add @waii-ai/widgets

# Using pnpm
pnpm add @waii-ai/widgets

Integration Methods

1. React Component

import { WaiiChat } from '@waii-ai/widgets';

function App() {
  return (
    <WaiiChat 
      apiKey="your-api-key"
      databaseKey="your-database-key"
      theme="light"
      handleChatResponse={(response) => {
        console.log('Chat response:', response);
      }}
    />
  );
}

2. Standalone Script

<script src="https://unpkg.com/@waii-ai/widgets/dist/waii-widgets.js"></script>

<div id="waii-chat"></div>
<script>
  WaiiWidgets.WaiiChatLoader.init({
    containerId: 'waii-chat',
    apiKey: 'your-api-key',
    databaseKey: 'your-database-key',
    theme: 'light',
    onMessage: (message) => console.log('New message:', message)
  });
</script>

3. iFrame Embed

<script src="https://unpkg.com/@waii-ai/widgets/dist/embed.js"></script>

<div id="chat-container"></div>
<script>
  const chatWidget = new WaiiWidgets.WaiiChatEmbed('#chat-container', {
    apiKey: 'your-api-key',
    databaseKey: 'your-database-key',
    theme: 'light',
    onChatResponse: (response) => {
      console.log('Chat response:', response);
    }
  });
</script>

Configuration Options

Core Properties

Styling Options

Branding Options

AI Configuration

Callback Functions

State Management

Development

# Install dependencies
npm install

# Build for production
npm run build

# Run tests
npm run test

Support

For issues and feature requests, please contact Waii support.