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

<!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

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

<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

// 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

<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

<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

<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

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

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.