Appearance
Example Usages
Real-world examples and common integration patterns for the Infinity Widget.
Try the Demo
Want to see the widget in action first? Check out our Interactive Demo page!
Basic Integration
Simple HTML Page
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://api.example.com/ws"
theme="light"
welcome-message="Hello! How can I help you today?">
</infinity-widget>
</body>
</html>Framework Integrations
React
jsx
import React, { useRef, useEffect } from 'react';
import '@infinity-bot/infinity-widget';
function ChatComponent() {
const widgetRef = useRef(null);
useEffect(() => {
const widget = widgetRef.current;
// Listen to events
const handleMessage = (event) => {
console.log('Message received:', event.detail.message);
};
widget.addEventListener('infinity-widget-message-received', handleMessage);
return () => {
widget.removeEventListener('infinity-widget-message-received', handleMessage);
};
}, []);
const sendCustomMessage = () => {
widgetRef.current.sendMessage('Hello from React!');
};
return (
<div>
<button onClick={sendCustomMessage}>Send Message</button>
<infinity-widget
ref={widgetRef}
websocket-url="wss://api.example.com/ws"
theme="dark"
welcome-message="Welcome to our React app!"
/>
</div>
);
}
export default ChatComponent;Vue.js
vue
<template>
<div>
<button @click="sendMessage">Send Message</button>
<infinity-widget
ref="widget"
:websocket-url="serverUrl"
:theme="currentTheme"
@infinity-widget-message-received="handleMessage"
/>
</div>
</template>
<script>
import '@infinity-bot/infinity-widget';
export default {
name: 'ChatComponent',
data() {
return {
serverUrl: 'wss://api.example.com/ws',
currentTheme: 'light'
};
},
methods: {
sendMessage() {
this.$refs.widget.sendMessage('Hello from Vue!');
},
handleMessage(event) {
console.log('Message received:', event.detail.message);
}
}
};
</script>Angular
typescript
// app.component.ts
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import '@infinity-bot/infinity-widget';
@Component({
selector: 'app-root',
template: `
<button (click)="sendMessage()">Send Message</button>
<infinity-widget
#widget
websocket-url="wss://api.example.com/ws"
theme="light">
</infinity-widget>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('widget', { static: false }) widget!: ElementRef;
ngAfterViewInit() {
this.widget.nativeElement.addEventListener(
'infinity-widget-message-received',
this.handleMessage.bind(this)
);
}
sendMessage() {
this.widget.nativeElement.sendMessage('Hello from Angular!');
}
handleMessage(event: CustomEvent) {
console.log('Message received:', event.detail.message);
}
}Advanced Examples
E-commerce Integration
html
<style>
infinity-widget {
--primary-color: #ff6b6b;
--background-color: #ffffff;
--border-radius: 12px;
}
</style>
<infinity-widget
websocket-url="wss://chat.mystore.com/ws"
theme="light"
welcome-message="Hi! Need help finding something?"
bot-avatar="/images/shop-assistant.png"
display-mode="floating"
bubble-position="bottom-right"
auto-minimize="true"
minimize-timeout="45000">
</infinity-widget>
<script>
// Track e-commerce events
const widget = document.querySelector('infinity-widget');
// Send product context when user views a product
function onProductView(productId, productName) {
widget.sendMessage(`I'm looking at ${productName} (ID: ${productId})`);
}
// Handle cart abandonment
widget.addEventListener('infinity-widget-message-sent', (event) => {
if (event.detail.message.includes('cart')) {
// Analytics tracking
gtag('event', 'chat_cart_inquiry');
}
});
</script>Multi-language Support
html
<div class="language-selector">
<select id="languageSelect">
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
</select>
</div>
<infinity-widget
id="multiLangWidget"
websocket-url="wss://api.example.com/ws"
lang="en"
theme="light">
</infinity-widget>
<script>
const widget = document.getElementById('multiLangWidget');
const languageSelect = document.getElementById('languageSelect');
languageSelect.addEventListener('change', (event) => {
const newLanguage = event.target.value;
widget.setLanguage(newLanguage);
// Update welcome message based on language
const welcomeMessages = {
en: 'Hello! How can I help you?',
es: '¡Hola! ¿Cómo puedo ayudarte?',
fr: 'Bonjour! Comment puis-je vous aider?',
de: 'Hallo! Wie kann ich Ihnen helfen?'
};
widget.setAttribute('welcome-message', welcomeMessages[newLanguage]);
});
</script>Custom Theme Integration
html
<div class="theme-controls">
<button onclick="setTheme('light')">Light</button>
<button onclick="setTheme('dark')">Dark</button>
<button onclick="setTheme('custom')">Custom</button>
</div>
<infinity-widget
id="themedWidget"
websocket-url="wss://api.example.com/ws">
</infinity-widget>
<style>
/* Custom theme */
infinity-widget[data-custom-theme] {
--primary-color: #8b5cf6;
--secondary-color: #a78bfa;
--background-color: #f3f4f6;
--text-color: #1f2937;
--border-color: #d1d5db;
--border-radius: 16px;
--shadow-color: rgba(139, 92, 246, 0.15);
}
</style>
<script>
const widget = document.getElementById('themedWidget');
function setTheme(theme) {
if (theme === 'custom') {
widget.setAttribute('data-custom-theme', '');
widget.setTheme('light'); // Base theme
} else {
widget.removeAttribute('data-custom-theme');
widget.setTheme(theme);
}
}
// Listen for theme changes
widget.addEventListener('theme-changed', (event) => {
console.log('Theme changed to:', event.detail.theme);
// Update page theme accordingly
document.body.className = `theme-${event.detail.theme}`;
});
</script>Analytics Integration
javascript
const widget = document.querySelector('infinity-widget');
// Track widget interactions
widget.addEventListener('infinity-widget-connected', () => {
gtag('event', 'widget_connected');
});
widget.addEventListener('infinity-widget-message-sent', (event) => {
gtag('event', 'message_sent', {
'message_length': event.detail.message.length,
'timestamp': event.detail.timestamp
});
});
widget.addEventListener('infinity-widget-message-received', (event) => {
gtag('event', 'message_received', {
'response_time': Date.now() - event.detail.timestamp
});
});
// Track floating mode interactions
widget.addEventListener('infinity-widget-minimized', () => {
gtag('event', 'widget_minimized');
});
widget.addEventListener('infinity-widget-expanded', () => {
gtag('event', 'widget_expanded');
});Custom Error Handling
javascript
const widget = document.querySelector('infinity-widget');
// Custom error UI
function showErrorMessage(message, type = 'error') {
const errorDiv = document.createElement('div');
errorDiv.className = `error-message error-${type}`;
errorDiv.textContent = message;
document.body.appendChild(errorDiv);
setTimeout(() => {
errorDiv.remove();
}, 5000);
}
// Handle different error types
widget.addEventListener('infinity-widget-connection-error', (event) => {
const error = event.detail.error;
if (error.includes('timeout')) {
showErrorMessage('Connection timeout. Please check your internet connection.', 'warning');
} else if (error.includes('unauthorized')) {
showErrorMessage('Authentication failed. Please refresh the page.', 'error');
} else {
showErrorMessage('Connection error. Retrying...', 'info');
}
});
// Retry connection on error
widget.addEventListener('infinity-widget-disconnected', (event) => {
if (event.detail.reason !== 'user_initiated') {
setTimeout(() => {
widget.connect();
}, 5000);
}
});Testing Examples
See the Testing Guide for comprehensive testing examples and best practices.