Appearance
Quick Start
Get your Infinity Widget up and running in minutes!
Installation
Add the script tag to your HTML:
html
<script type="module" src="https://infinity-widget.storage.googleapis.com/lib/infinity-widget.esm.js"></script>Complete Example
Here's a complete HTML page to get you started:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App with Infinity Widget</title>
<script type="module" src="https://infinity-widget.storage.googleapis.com/lib/infinity-widget.esm.js"></script>
</head>
<body>
<h1>Welcome to My App</h1>
<infinity-widget
websocket-url="wss://your-server.com/ws"
theme="light"
welcome-message="Hello! How can I help you today?">
</infinity-widget>
</body>
</html>Basic Setup
Or simply add the widget to your existing HTML:
html
<infinity-widget
websocket-url="wss://your-server.com/ws">
</infinity-widget>Essential Configuration
Required Attributes
websocket-url- WebSocket server URL for real-time communication
Common Options
html
<infinity-widget
websocket-url="wss://your-server.com/ws"
theme="light"
language="en"
display-mode="floating"
welcome-message="Hello! How can I help you today?">
</infinity-widget>Styling
The widget uses CSS custom properties for easy theming:
css
infinity-widget {
--primary-color: #007bff;
--background-color: #ffffff;
--text-color: #333333;
--border-radius: 8px;
}Event Handling
Listen to widget events:
javascript
const widget = document.querySelector('infinity-widget');
widget.addEventListener('message-sent', (event) => {
console.log('User sent:', event.detail.message);
});
widget.addEventListener('message-received', (event) => {
console.log('Bot replied:', event.detail.message);
});Next Steps
- Explore all Widget Options
- Learn the JavaScript API
- Check out Example Usages
- Set up Testing for your implementation