# Sista AI JavaScript SDK
A vanilla JavaScript version of Sista AI that can be easily integrated into any website without React dependencies. Perfect for WordPress, Shopify, and other CMS platforms.
## Quick Start
### 1. Include the Script
Add this single script tag to your HTML `` or before the closing `` tag:
```html
```
**Note:** This bundle includes React and ReactDOM, so no additional dependencies are needed!
### 2. Initialize Sista AI
```html
```
## Configuration Options
```javascript
SistaAI.init({
// Required
apiKey: 'your-api-key-here',
// Optional configurations
apiUrl: 'https://api.sista.ai', // Custom API URL
userId: 'user-123', // User ID for analytics
scrapeContent: true, // Auto-scrape page content (default: true)
autoStart: false, // Auto-start the assistant (default: false)
urlStart: true, // Enable URL-based auto-start (default: true)
namespace: 'my-app', // Unique namespace (default: 'default')
// UI Configuration
position: 'bottom-right', // Button position
container: '#my-container', // Custom container element ID
stateColors: {
STATE_IDLE: '#496CF6',
STATE_CONNECTING: '#ff6b6b',
STATE_CONNECTED: '#00c853',
STATE_DISCONNECTING: '#ff6b6b'
},
style: {
// Custom CSS styles
backgroundColor: '#496CF6',
borderRadius: '50%'
},
tooltip: 'Click to start talking!'
});
```
## Platform-Specific Examples
### WordPress
Add this to your theme's `functions.php` or use a plugin like "Header and Footer Scripts":
```php
// Add to functions.php
function add_sista_ai() {
?>
tag -->
```
### Wix
Add this to your site's custom code section:
```html
```
### Squarespace
Add this to your site's Code Injection > Footer:
```html
```
## API Methods
Once initialized, you can control Sista AI programmatically:
```javascript
const sistaAI = SistaAI.init({
apiKey: 'YOUR_API_KEY'
});
// Start the AI assistant
sistaAI.start();
// Stop the AI assistant
sistaAI.stop();
// Register custom functions
sistaAI.registerFunctions([
{
name: 'getProductInfo',
description: 'Get information about a product',
parameters: {
type: 'object',
properties: {
productId: {
type: 'string',
description: 'The product ID'
}
}
},
execute: async (params) => {
// Your custom logic here
return { price: '$99.99', name: 'Product Name' };
}
}
]);
// Get the engine instance for advanced usage
const engine = sistaAI.getEngine();
// Destroy and cleanup
sistaAI.destroy();
```
## Custom Functions
You can register custom functions that the AI can call:
```javascript
SistaAI.init({
apiKey: 'YOUR_API_KEY',
onInit: (sistaAI) => {
sistaAI.registerFunctions([
{
name: 'searchProducts',
description: 'Search for products in the catalog',
parameters: {
type: 'object',
properties: {
query: {
type: 'string',
description: 'Search query'
},
category: {
type: 'string',
description: 'Product category (optional)'
}
}
},
execute: async (params) => {
// Your search logic here
const results = await searchCatalog(params.query, params.category);
return results;
}
}
]);
}
});
```
## Styling Customization
You can customize the appearance of the AI button:
```javascript
SistaAI.init({
apiKey: 'YOUR_API_KEY',
style: {
width: '80px',
height: '80px',
backgroundColor: '#your-brand-color',
borderRadius: '50%',
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
fontSize: '24px'
},
stateColors: {
STATE_IDLE: '#your-idle-color',
STATE_CONNECTING: '#your-connecting-color',
STATE_CONNECTED: '#your-connected-color',
STATE_DISCONNECTING: '#your-disconnecting-color'
}
});
```
## CDN Links
- **Latest Version**: `https://cdn.sista.ai/sdk/latest/smart-agent.min.js`
- **Specific Version**: `https://cdn.sista.ai/sdk/v1.2.3/smart-agent.min.js`
## Get Your API Key
1. Visit [Sista AI Admin Panel](https://admin.sista.ai)
2. Create a free account
3. Generate your API key
4. Replace `'YOUR_API_KEY'` in the code above
## Support
- 📚 [Documentation](https://docs.sista.ai)
- 🐛 [GitHub Issues](https://github.com/sista-ai/ai-assistant-react/issues)
- 💬 [Discord Community](https://discord.gg/sista-ai)
- 📧 [Email Support](mailto:support@sista.ai)
## License
SEE LICENSE IN LICENSE file.