@userintuition-ai/web

v1.0.41

Published

5 months ago

This package lets you start userintutition feedback calls directly in your webapp.

0High
0Medium
0Low

userintuition-ai

userintuition ai widget userintuition-ai react

@userintuition-ai/web

A JavaScript widget that lets you start UserIntuition AI feedback calls directly in your web application.

Installation

npm install @userintuition-ai/web

Usage

Method 1: HTML Custom Element

Add the widget to your HTML using the <userintuition-widget> custom element:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@userintuition-ai/web/dist/embed/widget.umd.min.js"></script>
</head>
<body>
  <userintuition-widget 
          assistant-id="your-assistant-id"
          public-key="your-public-key" 
          invite-id="generated-invite-id"
          mode="voice"
          theme="dark"
          base-bg-color="#000000"
          accent-color="#14B8A6"
          cta-button-color="#000000"
          cta-button-text-color="#ffffff"
          border-radius="large"
          size="full"
          position="bottom-right"
          title="Shape our roadmap in 10 min"
          start-button-text="Start"
          end-button-text="End Call"
          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="userintuition_widget_consent">
          </userintuition-widget>
</body>
</html>

Configuration Options

You can configure the widget using HTML attributes. Attributes are categorized below:

Required Attributes

public-key (string, required): Your UserIntuition public API key
assistant-id (string, required): Your assistant ID

Core Configuration

invite-id (string): Your generated invite ID
mode (string): Widget mode - "voice", "chat", or "hybrid" (default: "voice")
theme (string): Theme preset - "light" or "dark" (default: "light")
position (string): Widget position - "bottom-right", "bottom-left", "top-right", "top-left", or "center" (default: "bottom-right")
size (string): Widget size - "full", "compact", or "minimal" (default: "compact")
border-radius (string): Border radius style - "none", "small", "medium", or "large" (default: "medium")
radius (string): Alternative border radius specification

Colors & Styling

base-bg-color (string): Base background color in hex format (e.g., "#000000")
accent-color (string): Accent color in hex format (e.g., "#14B8A6")
cta-button-color (string): Call-to-action button background color in hex format
cta-button-text-color (string): Call-to-action button text color in hex format
base-color (string): Base color in hex format
button-base-color (string): Button base color in hex format
button-accent-color (string): Button accent color in hex format

Text Content

title (string): Widget title text
cta-title (string): Call-to-action title text
cta-subtitle (string): Call-to-action subtitle text
start-button-text (string): Text for the start button (default: "Start")
end-button-text (string): Text for the end call button (default: "End Call")
main-label (string): Main label text for the widget

Voice Mode Messages

voice-empty-message (string): Message shown when voice mode is empty
voice-active-empty-message (string): Message shown when voice is active but empty
empty-voice-message (string): Alternative empty voice message
empty-voice-active-message (string): Alternative empty voice active message

Chat Mode Messages

chat-empty-message (string): Message shown when chat mode is empty
chat-first-message (string): First message shown in chat mode
chat-placeholder (string): Placeholder text for chat input field
empty-chat-message (string): Alternative empty chat message

Hybrid Mode Messages

hybrid-empty-message (string): Message shown when hybrid mode is empty
empty-hybrid-message (string): Alternative empty hybrid message

Voice Configuration

voice-show-transcript (string/boolean): Show transcript in voice mode - "true" or "false" (default: "false")
voice-auto-reconnect (string/boolean): Auto-reconnect on disconnect - "true" or "false" (default: "false")
reconnect-storage-key (string): LocalStorage key for reconnection state
show-transcript (string/boolean): Show transcript - "true" or "false" (default: "false")

Consent & Terms

consent-required (string/boolean): Require user consent before starting - "true" or "false" (default: "false")
consent-title (string): Title for the consent dialog
consent-content (string): Content text for the consent dialog
consent-storage-key (string): LocalStorage key for storing consent status
require-consent (string/boolean): Alternative consent requirement flag - "true" or "false"
terms-content (string): Terms and conditions content text
local-storage-key (string): LocalStorage key for widget state

Advanced Configuration

assistant-overrides (string, JSON): JSON string of assistant configuration overrides
assistant (string, JSON): JSON string of complete assistant configuration
api-url (string): Custom API endpoint URL
show-widget (string/boolean): Control widget visibility - "true" or "false" (default: "true")
show-based-on-url (string, JSON): JSON array of URL paths where widget should be shown (e.g., '["/feedback", "/contact"]')
delay-interval (string/number): Delay in milliseconds before showing the widget (default: 0)

Example with Common Options

<userintuition-widget
  public-key="your-public-key"
  assistant-id="your-assistant-id"
  invite-id="generated-invite-id"
  mode="voice"
  theme="dark"
  base-bg-color="#000000"
  accent-color="#14B8A6"
  cta-button-color="#000000"
  cta-button-text-color="#ffffff"
  border-radius="large"
  size="full"
  position="bottom-right"
  title="Shape our roadmap in 10 min"
  start-button-text="Start"
  end-button-text="End Call"
  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="userintuition_widget_consent"
  show-based-on-url='["/feedback", "/contact"]'
  delay-interval="3000"
></userintuition-widget>

Method 2: JavaScript Initialization

You can also initialize the widget programmatically using JavaScript:

const { WidgetLoader } = require('@userintuition-ai/web');

const widgetContainer = document.getElementById('widget-container');

WidgetLoader({
  container: widgetContainer,
  component: 'VapiWidget',
  props: {
    publicKey: 'your-public-key',
    assistantId: 'your-assistant-id',
    inviteId: 'generated-invite-id',
    mode: 'voice',
    theme: 'dark',
    baseBgColor: '#000000',
    accentColor: '#14B8A6',
    position: 'bottom-right',
    size: 'full',
    title: 'Shape our roadmap in 10 min',
    startButtonText: 'Start',
    endButtonText: 'End Call',
    voiceShowTranscript: true,
    consentRequired: true,
    consentTitle: 'Terms and conditions',
    consentContent: '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.',
    consentStorageKey: 'userintuition_widget_consent',
    showBasedOnUrl: ['/feedback', '/contact'],
    delayInterval: 3000
  }
});

Method 3: Data Attributes

You can use data attributes for automatic initialization:

<div 
  data-client-widget="VapiWidget"
  data-props='{
    "publicKey": "your-public-key",
    "assistantId": "your-assistant-id",
    "inviteId": "generated-invite-id",
    "mode": "voice",
    "theme": "dark",
    "position": "bottom-right"
  }'
></div>

Method 4: React Component

If you're using React, you can use the React component directly:

import UserIntuitionWidget from '@userintuition-ai/web';
// or
import { UserIntuitionWidget } from '@userintuition-ai/web';

function App() {
  return (
    <UserIntuitionWidget
      publicKey="your-public-key"
      assistantId="your-assistant-id"
      mode="voice"
      theme="dark"
      position="bottom-right"
    />
  );
}

React Example with Common Options

import UserIntuitionWidget from '@userintuition-ai/web';

function App() {
  return (
    <UserIntuitionWidget
      publicKey="your-public-key"
      assistantId="your-assistant-id"
      inviteId="generated-invite-id"
      mode="voice"
      theme="dark"
      position="bottom-right"
      size="full"
      borderRadius="large"
      baseBgColor="#000000"
      accentColor="#14B8A6"
      ctaButtonColor="#000000"
      ctaButtonTextColor="#ffffff"
      title="Shape our roadmap in 10 min"
      startButtonText="Start"
      endButtonText="End Call"
      voiceShowTranscript={true}
      consentRequired={true}
      consentTitle="Terms and conditions"
      consentContent="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."
      consentStorageKey="userintuition_widget_consent"
      showBasedOnUrl={['/feedback', '/contact']}
      delayInterval={3000}
      className="custom-widget-class"
    />
  );
}

TypeScript Support

TypeScript types are included:

import { UserIntuitionWidget, type UserIntuitionWidgetProps } from '@userintuition-ai/web';

const props: UserIntuitionWidgetProps = {
  publicKey: 'your-public-key',
  assistantId: 'your-assistant-id',
  mode: 'voice',
  theme: 'dark',
};

function App() {
  return <UserIntuitionWidget {...props} />;
}

Next.js Usage

For Next.js 13+ with App Router, mark the component as a client component:

'use client';

import UserIntuitionWidget from '@userintuition-ai/web';

export default function Page() {
  return (
    <UserIntuitionWidget
      publicKey="your-public-key"
      assistantId="your-assistant-id"
    />
  );
}

Note: React 16.8+ is required as a peer dependency. All props match the widget configuration options documented in the API Reference section below.

API Reference

WidgetLoader(options)

Initializes a widget component.

Parameters

options.container (HTMLElement, required): The DOM element where the widget will be rendered
options.component (string, required): The component name (e.g., 'VapiWidget')
options.props (object, required): Configuration object with the following properties:

Required Properties

publicKey (string, required): Your UserIntuition public API key
assistantId (string, required): Your assistant ID

Core Configuration

inviteId (string): Your generated invite ID
mode (string): Widget mode - "voice", "chat", or "hybrid" (default: "voice")
theme (string): Theme preset - "light" or "dark" (default: "light")
position (string): Widget position - "bottom-right", "bottom-left", "top-right", "top-left", or "center" (default: "bottom-right")
size (string): Widget size - "full", "compact", or "minimal" (default: "compact")
borderRadius (string): Border radius style - "none", "small", "medium", or "large" (default: "medium")
radius (string): Alternative border radius specification

Colors & Styling

baseBgColor (string): Base background color in hex format (e.g., "#000000")
accentColor (string): Accent color in hex format (e.g., "#14B8A6")
ctaButtonColor (string): Call-to-action button background color in hex format
ctaButtonTextColor (string): Call-to-action button text color in hex format
baseColor (string): Base color in hex format
buttonBaseColor (string): Button base color in hex format
buttonAccentColor (string): Button accent color in hex format

Text Content

title (string): Widget title text
ctaTitle (string): Call-to-action title text
ctaSubtitle (string): Call-to-action subtitle text
startButtonText (string): Text for the start button (default: "Start")
endButtonText (string): Text for the end call button (default: "End Call")
mainLabel (string): Main label text for the widget

Voice Mode Messages

voiceEmptyMessage (string): Message shown when voice mode is empty
voiceActiveEmptyMessage (string): Message shown when voice is active but empty
emptyVoiceMessage (string): Alternative empty voice message
emptyVoiceActiveMessage (string): Alternative empty voice active message

Chat Mode Messages

chatEmptyMessage (string): Message shown when chat mode is empty
chatFirstMessage (string): First message shown in chat mode
chatPlaceholder (string): Placeholder text for chat input field
emptyChatMessage (string): Alternative empty chat message

Hybrid Mode Messages

hybridEmptyMessage (string): Message shown when hybrid mode is empty
emptyHybridMessage (string): Alternative empty hybrid message

Voice Configuration

voiceShowTranscript (boolean): Show transcript in voice mode (default: false)
voiceAutoReconnect (boolean): Auto-reconnect on disconnect (default: false)
reconnectStorageKey (string): LocalStorage key for reconnection state
showTranscript (boolean): Show transcript (default: false)

Consent & Terms

consentRequired (boolean): Require user consent before starting (default: false)
consentTitle (string): Title for the consent dialog
consentContent (string): Content text for the consent dialog
consentStorageKey (string): LocalStorage key for storing consent status
requireConsent (boolean): Alternative consent requirement flag
termsContent (string): Terms and conditions content text
localStorageKey (string): LocalStorage key for widget state

Advanced Configuration

assistantOverrides (object): Override assistant configuration
assistant (object): Complete assistant configuration
apiUrl (string): Custom API endpoint URL
showWidget (boolean): Control widget visibility (default: true)
showBasedOnUrl (array): Array of URL paths where widget should be shown
delayInterval (number): Delay in milliseconds before showing the widget (default: 0)

Example

const container = document.getElementById('my-widget-container');

WidgetLoader({
  container: container,
  component: 'VapiWidget',
  props: {
    publicKey: 'pk-1234567890',
    assistantId: 'asst-abcdefgh',
    inviteId: 'inv-xyz123',
    mode: 'voice',
    theme: 'dark',
    baseBgColor: '#000000',
    accentColor: '#14B8A6',
    position: 'bottom-right',
    size: 'full',
    title: 'Shape our roadmap in 10 min',
    startButtonText: 'Start',
    endButtonText: 'End Call',
    voiceShowTranscript: true,
    consentRequired: true,
    consentTitle: 'Terms and conditions',
    consentContent: '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.',
    consentStorageKey: 'userintuition_widget_consent',
    showBasedOnUrl: ['/feedback', '/contact'],
    delayInterval: 2000
  }
});

Browser Support

This widget supports all modern browsers that support:

ES6+
Custom Elements API
React (included as a dependency)

License

ISC

Support

For issues and feature requests, please visit the GitHub Issues page.

Repository

GitHub Repository

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@userintuition-ai/web

Installation

Usage

Method 1: HTML Custom Element

Configuration Options

Required Attributes

Core Configuration

Colors & Styling

Text Content

Voice Mode Messages

Chat Mode Messages

Hybrid Mode Messages

Voice Configuration

Consent & Terms

Advanced Configuration

Example with Common Options

Method 2: JavaScript Initialization

Method 3: Data Attributes

Method 4: React Component

React Example with Common Options

TypeScript Support

Next.js Usage

API Reference

WidgetLoader(options)

Parameters

Required Properties

Core Configuration

Colors & Styling

Text Content

Voice Mode Messages

Chat Mode Messages

Hybrid Mode Messages

Voice Configuration

Consent & Terms

Advanced Configuration

Example

Browser Support

License

Support

Repository