# Outsella Widget SDK The Outsella Widget SDK provides a voice-enabled assistant that integrates seamlessly into any web application. Delivered as a single script, it automatically adds a customizable `` web component to your page. It works across React, Next.js, Vue, Angular, and plain HTML without extra wrappers, offering a unified API regardless of your framework. ## Installation ### Via CDN (Recommended) Add the script to your HTML `` or ``: ```html ``` - The widget will automatically append to the `` with the specified `position` and `agentid`. - No additional CSS `` is required—styles are bundled in the script. ### Via NPM For framework-specific projects: ```bash npm install outsella-widget ``` Then import in your project: ```javascript import "outsella-widget"; // Registers the widget and appends it ``` - Note: Styles are included in the script, so no separate CSS import is needed unless you want to override them. --- ## Usage Options ### 1. Plain HTML (Script Method) Load the widget with a single script tag: ```html ``` - The widget auto-appends to `` with the specified attributes. ### 2. Plain HTML (Custom Element Method) Manually add the `` tag if preferred: ```html ``` ### 3. React Applications Use the custom element directly: ```jsx function App() { return (

My React App

); } export default App; ``` - Import `"outsella-widget"` in your entry file (e.g., `index.js`) if using NPM: ```javascript import "outsella-widget"; ``` ### 4. Next.js Applications Use the custom element with client-side rendering: ```jsx "use client"; export default function Page() { return ( ); } ``` - Import `"outsella-widget"` in `_app.js` or a top-level file if using NPM: ```javascript import "outsella-widget"; ``` ### 5. Vue Applications Use the custom element in your template: ```vue ``` ### 6. Angular Applications Add the custom element schema and use the tag: ```typescript import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` ```html ``` - Import `"outsella-widget"` in `main.ts` if using NPM: ```typescript import "outsella-widget"; ``` --- ## Configuration Options ### Script Attributes (CDN Method) When using the script tag: | Attribute | Type | Description | Default | |-----------------|--------|---------------------------------------------|-----------| | `data-position` | string | Widget position: "left" or "right" | `"right"` | | `data-agentid` | string | Unique identifier for agent configuration | Required | ### Element Attributes (Custom Element Method) When using ``: | Property | Type | Description | Default | |------------|--------|---------------------------------------------|-----------| | `position` | string | Widget position: "left" or "right" | `"right"` | | `agentid` | string | Unique identifier for agent configuration | Required | --- ## Key Features - **Single Script Integration**: No separate CSS or dependencies—just one `