sarvam-convai-embed

v1.0.0

Published

18 days ago

Sarvam Conversational AI Embed Widget - A web component for embedding Sarvam AI chat and voice call agents

0High
0Medium
0Low

ram-sarvam

sarvam ai chatbot voice-assistant embed widget conversational-ai

Sarvam Conversational AI Embed Widget

A web component for embedding Sarvam AI chat and voice call agents into any website.

Installation

Via npm

npm install sarvam-convai-embed

Via unpkg CDN

<script src="https://unpkg.com/sarvam-convai-embed" defer></script>

Or specify a version:

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

Usage

Web Component (Recommended)

After including the script, use the <sarvam-widget> custom element:

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/sarvam-convai-embed@latest/index.js" defer></script>
</head>
<body>
  <sarvam-widget
    api-key="your-api-key"
    app-id="your-app-id"
    org-id="your-org-id"
    workspace-id="your-workspace-id"
    user-id="optional-user-id"
    interaction-type="chat"
    button-text="Chat with us"
    position="bottom-right"
  ></sarvam-widget>
</body>
</html>

Attributes

Required Attributes

api-key - Your Sarvam API key
app-id - Your application ID
org-id - Your organization ID
workspace-id - Your workspace ID

Optional Attributes

user-id - User identifier for the session
interaction-type - Type of interaction: "chat" or "call" (default: "chat")
version - Specific version of the agent to use
button-text - Text displayed on the widget button (default: "Chat with us")
title - Title displayed in the widget
background-color - Background color (hex code)
foreground-color - Foreground/text color (hex code)
accent-color - Accent color for highlights (hex code)
logo-url - URL to your logo image
position - Widget position: "bottom-right", "bottom-left", "top-right", "top-left" (default: "bottom-right")

Programmatic Usage

You can also set attributes programmatically:

const widget = document.querySelector('sarvam-widget');
widget.apiKey = 'your-api-key';
widget.appId = 'your-app-id';
widget.orgId = 'your-org-id';
widget.workspaceId = 'your-workspace-id';
widget.interactionType = 'chat';
widget.position = 'bottom-right';

Development

This package includes a Next.js development app for testing the widget locally.

Getting Started

First, install the dependencies:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Building the Widget

To build the widget for production:

npm run build:widget

This will create index.js in the root directory, which is the file published to npm.

Publishing to npm

Update the version in package.json
Build the widget: npm run build:widget
Publish: npm publish

Project Structure

/components/embed - Widget source code
/app - Next.js development app
index.js - Built widget file (generated)
rollup.config.js - Build configuration

License

MIT