Skip to main content

​
Embedding the Widget

Add intelligent chat capabilities to your application with the Char AI widget.

​
Quick Start

1

Add the Script

Include the Char AI script in your HTML:
<script src="https://cdn.meetchar.ai/widget.js"></script>
2

Add a Container

Create a container element where the widget will render:
<div id="char-widget"></div>
3

Initialize

Initialize the widget with your API key:
const widget = new CharWidget({
  apiKey: 'char_sk_live_...',
  containerId: 'char-widget'
});

​
Installation Methods

<script src="https://cdn.meetchar.ai/widget.js"></script>
<script>
  new CharWidget({
    apiKey: 'your-api-key',
    containerId: 'chat'
  });
</script>

​
Configuration Options

OptionTypeDefaultDescription
apiKeystringrequiredYour site API key
containerIdstring'char-widget'Target element ID
theme'light' | 'dark' | 'auto''auto'Color theme
position'bottom-right' | 'bottom-left''bottom-right'Floating position
userobjectnullUser identification

​
Positioning

Embedded

Render inside a container element. Good for dedicated chat pages.

Floating

Floating button that expands to chat. Good for support widgets.
// Floating widget
new CharWidget({
  apiKey: 'your-api-key',
  mode: 'floating',
  position: 'bottom-right'
});

// Embedded widget
new CharWidget({
  apiKey: 'your-api-key',
  mode: 'embedded',
  containerId: 'chat-container'
});