Uplift AI Assistant Widget

A customizable widget for integrating Uplift AI assistants into any website.

Quick Start

Create assistant

Sign up at Uplift AI and create your first assistant to get an assistant-id.

CDN Installation (Easiest)

Add this script tag to your HTML:

<script src="https://cdn.jsdelivr.net/npm/@upliftai/[email protected]"></script>

Then add the widget element:

<upliftai-assistant 
  assistant-id="YOUR_ASSISTANT_ID">
</upliftai-assistant>

NPM Installation

npm install @upliftai/assistant-widget

import '@upliftai/assistant-widget';

<upliftai-assistant assistant-id="YOUR_ASSISTANT_ID"></upliftai-assistant>

Configuration

Widget Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | assistant-id | string | required | Your Uplift AI assistant ID | | base-url | string | https://api.upliftai.org | API endpoint URL | | participant-name | string | Anonymous | Name of the participant | | position | string | bottom-right | Widget position: bottom-right, bottom-left, top-right, top-left | | theme | string | light | Color theme: light or dark | | primary-color | string | #3B82F6 | Primary color for the call button | | size | string | medium | Widget size: small, medium, large | | auto-connect | boolean | false | Auto-connect on page load |

Example with All Options

<upliftai-assistant 
  assistant-id="asst_abc123"
  base-url="https://api.upliftai.org"
  participant-name="John Doe"
  position="bottom-right"
  theme="light"
  primary-color="#10B981"
  size="medium"
  auto-connect="false">
</upliftai-assistant>

Styling Customization

The widget uses CSS custom properties that can be overridden:

upliftai-assistant {
  --upliftai-primary: #3B82F6;
  --upliftai-secondary: #6B7280;
  --upliftai-bg: #FFFFFF;
  --upliftai-text: #1F2937;
  --upliftai-accent: #10B981;
}

CSS Classes

All widget classes are prefixed with upliftai- to avoid conflicts. You can override any of these classes for advanced customization:

• .upliftai-widget-container - Main container
• .upliftai-trigger - Call button
• .upliftai-visualizer - Audio visualization container
• .upliftai-bar - Individual audio bars
• .upliftai-error - Error message display

Framework Integration

React

import { useEffect } from 'react';
import '@upliftai/assistant-widget';

function App() {
  return (
    <upliftai-assistant 
      assistant-id="YOUR_ASSISTANT_ID"
      theme="dark"
      size="large"
    />
  );
}

Vue

<template>
  <upliftai-assistant 
    :assistant-id="assistantId"
    theme="light"
    position="bottom-left"
  />
</template>

<script>
import '@upliftai/assistant-widget';

export default {
  data() {
    return {
      assistantId: 'YOUR_ASSISTANT_ID'
    };
  }
};
</script>

Angular

import '@upliftai/assistant-widget';

@Component({
  template: `
    <upliftai-assistant 
      assistant-id="YOUR_ASSISTANT_ID"
      theme="dark">
    </upliftai-assistant>
  `
})
export class AppComponent {}

CDN Usage

The widget is automatically available on multiple CDNs after npm publication:

unpkg

<script src="https://unpkg.com/@upliftai/[email protected]"></script>

jsDelivr (Recommended)

<!-- Latest 0.x version -->
<script src="https://cdn.jsdelivr.net/npm/@upliftai/assistant-widget@0"></script>

<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/@upliftai/[email protected]"></script>

License

MIT License

Support

• GitHub Issues
• Documentation
• Email: [email protected]