@interactkit/client-js

v1.0.4

Published

a month ago

A modern, voice-enabled Web Component widget for the InteractKit AI Assistant.

0High
0Medium
0Low

interactkit

web-component custom-element voice-bot ai interactkit typescript

@interactkit/client-js

A lightweight, modern web component for adding voice-powered AI assistants to your website with zero configuration.

Features

Voice-first interface - Natural voice conversations with real-time transcription
Modern UI - Clean, professional design that complements any website
Easy integration - Add with a single HTML tag
Fully responsive - Works on desktop and mobile
Accessible - Built with ARIA labels and keyboard navigation
No framework required - Works with any stack (React, Vue, Angular, or plain HTML)

Installation

Via npm/yarn/pnpm

npm install @interactkit/client-js
# or
yarn add @interactkit/client-js
# or
pnpm add @interactkit/client-js

Via CDN (Recommended)

<!-- Option 1: ES Module (modern browsers) -->
<script type="module">
  import { defineCustomElement } from 'https://cdn.jsdelivr.net/npm/@interactkit/client-js/dist/interactkit-bot.es.js';
  defineCustomElement();
</script>

<!-- Option 2: UMD (universal - works everywhere) -->
<script src="https://cdn.jsdelivr.net/npm/@interactkit/client-js/dist/interactkit-bot.umd.js"></script>

<!-- Option 3: Minified (production) -->
<script src="https://cdn.jsdelivr.net/npm/@interactkit/client-js/dist/interactkit-bot.min.js"></script>

Quick Start

Get your Public API credentials from InteractKit Dashboard
Choose your integration method:

Method 1: Direct Script Tag (Easiest)

Add this to your HTML - the component is automatically registered:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <script src="https://cdn.jsdelivr.net/npm/@interactkit/client-js/dist/interactkit-bot.umd.js"></script>
</head>
<body>
  <h1>Welcome to My Website</h1>
  
  <!-- The bot will appear as a floating widget -->
  <interactkit-bot
    bot-id="your-bot-id-here"
    api-key="your-public-api-key-here"
  ></interactkit-bot>
</body>
</html>

Method 2: ES Module (Modern)

For modern applications that support ES modules:

<script type="module">
  import { defineCustomElement } from 'https://cdn.jsdelivr.net/npm/@interactkit/client-js/dist/interactkit-bot.es.js';
  defineCustomElement();
</script>

<!-- Then use the component anywhere -->
<interactkit-bot
  bot-id="your-bot-id-here"
  api-key="your-public-api-key-here"
></interactkit-bot>

Full example:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <!-- Load InteractKit -->
  <script src="https://cdn.jsdelivr.net/npm/@interactkit/client-js/dist/interactkit-bot.umd.js"></script>
</head>
<body>
  <h1>Welcome to My Website</h1>
  
  <!-- Add the bot -->
  <interactkit-bot
    bot-id="your-bot-id-here"
    api-key="your-public-api-key-here"
  ></interactkit-bot>
  
  <!-- Your website content -->
</body>
</html>

Advanced Usage

Custom Configuration

<interactkit-bot
  bot-id="your-bot-id"
  api-key="your-public-api-key"
  initial-message="Hi! I'm your assistant. How can I help?"
  position="left"
  theme="dark"
></interactkit-bot>

JavaScript Initialization

// Import and define the custom element
import { defineCustomElement } from '@interactkit/client-js';
defineCustomElement();

// Dynamically create the bot
const bot = document.createElement('interactkit-bot');
bot.setAttribute('bot-id', 'your-bot-id');
bot.setAttribute('api-key', 'your-public-api-key');
document.body.appendChild(bot);

// Programmatically control the bot
setTimeout(() => {
  bot.client?.start(); // Start voice session
}, 3000);

React/Vue/Angular Integration

React

import { useEffect } from 'react';
import { defineCustomElement } from '@interactkit/client-js';

function App() {
  useEffect(() => {
    defineCustomElement();
  }, []);

  return (
    <div>
      <interactkit-bot
        bot-id={process.env.REACT_APP_BOT_ID}
        api-key={process.env.REACT_APP_PUBLIC_API_KEY}
      />
    </div>
  );
}

Vue

<template>
  <div id="app">
    <interactkit-bot
      :bot-id="botId"
      :api-key="apiKey"
    />
  </div>
</template>

<script>
import { defineCustomElement } from '@interactkit/client-js';

export default {
  mounted() {
    defineCustomElement();
  },
  data() {
    return {
      botId: import.meta.env.VITE_BOT_ID,
      apiKey: import.meta.env.VITE_API_KEY
    };
  }
};
</script>

Configuration Options

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | bot-id | String | Required | Your InteractKit bot ID | | api-key | String | Required | Your InteractKit Public API key | | initial-message | String | "Hello! I'm your AI assistant..." | Initial greeting message | | position | String | "right" | Position on screen: "left" or "right" | | theme | String | "light" | Color theme: "light", "dark", or "auto" | | auto-open | Boolean | false | Automatically open chat on page load | | show-badge | Boolean | true | Show "Powered by InteractKit" badge |

Custom Styling

The component uses CSS custom properties for easy theming. Override them in your CSS:

interactkit-bot {
  --interactkit-primary: #3b82f6; /* Blue */
  --interactkit-primary-dark: #1d4ed8;
  --interactkit-bg: #ffffff;
  --interactkit-text: #111827;
  --interactkit-radius: 1rem;
  --interactkit-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  interactkit-bot {
    --interactkit-bg: #1f2937;
    --interactkit-text: #f9fafb;
  }
}

Methods & Events

JavaScript API

const bot = document.querySelector('interactkit-bot');

// Control methods
bot.client.start();      // Start voice session
bot.client.stop();       // Stop voice session
bot.client.toggle();     // Toggle voice session
bot.client.show();       // Show chat panel
bot.client.hide();       // Hide chat panel

// Listen to events
bot.addEventListener('status-change', (e) => {
  console.log('Status:', e.detail.status); // 'connected', 'disconnected', 'error'
});

bot.addEventListener('transcript', (e) => {
  console.log('Transcript:', e.detail.role, e.detail.text);
});

bot.addEventListener('speaking', (e) => {
  console.log(e.detail.who, 'is speaking:', e.detail.active);
});

Browser Support

Chrome 54+ (Recommended)
Firefox 63+
Safari 14.1+
Edge 79+

Note: Voice features require HTTPS and user permission for microphone access.

Troubleshooting

Common Issues

Bot not appearing
- Check that the script is loaded
- Verify bot-id and api-key are correct
- Check browser console for errors
Microphone not working
- Ensure HTTPS is enabled
- Check browser microphone permissions
- Try in an incognito window to rule out extensions
No voice response
- Check your bot is properly configured in InteractKit dashboard
- Verify network connectivity
- Check browser console for API errors

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@interactkit/client-js

Features

Installation

Via npm/yarn/pnpm

Via CDN (Recommended)

Quick Start

Method 1: Direct Script Tag (Easiest)

Method 2: ES Module (Modern)

Advanced Usage

Custom Configuration

JavaScript Initialization

React/Vue/Angular Integration

React

Vue

Configuration Options

Custom Styling

Methods & Events

JavaScript API

Browser Support

Troubleshooting

Common Issues