WebGesture is a customizable chat widget that can be integrated into any web application. It provides a seamless way to add a chat interface to your website, allowing users to interact with a chat assistant.
- Customizable chat UI styles
- Real-time messaging with Socket.IO
- Typing indicator
- Responsive design
- Event-driven actions
To install WebGesture, use npm:
npm install webgestureTo use WebGesture in a plain HTML file:
- Include the necessary scripts and styles in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>WebGesture</title>
</head>
<body>
<div id="chat-container"></div>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script src="path/to/webgesture.js"></script>
<script>
const chat = new WebGesture({ serverUrl: "http://localhost:3000" });
chat.initializeChat(document.getElementById("chat-container"));
</script>
</body>
</html>To use WebGesture in a React application:
- Install the package:
npm install webgesture- Import and use the component in your React application:
import React, { useEffect } from "react";
import WebGesture from "webgesture";
const App = () => {
useEffect(() => {
const chat = new WebGesture({ serverUrl: "http://localhost:3000" });
chat.initializeChat(document.getElementById("chat-container"));
}, []);
return <div id="chat-container"></div>;
};
export default App;To use WebGesture in an Angular application:
- Install the package:
npm install webgesture- Import and use the component in your Angular application:
import { Component, AfterViewInit } from "@angular/core";
import WebGesture from "webgesture";
@Component({
selector: "app-root",
template: '<div id="chat-container"></div>',
styleUrls: ["./app.component.css"],
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
const chat = new WebGesture({ serverUrl: "http://localhost:3000" });
chat.initializeChat(document.getElementById("chat-container"));
}
}To use WebGesture in a Vue application:
- Install the package:
npm install webgesture- Import and use the component in your Vue application:
<template>
<div id="chat-container"></div>
</template>
<script>
import WebGesture from "webgesture";
export default {
mounted() {
const chat = new WebGesture({ serverUrl: "http://localhost:3000" });
chat.initializeChat(document.getElementById("chat-container"));
},
};
</script>You can customize the styles of the chat widget by passing a styles object in the configuration:
const chat = new WebGesture({
serverUrl: "http://localhost:3000",
styles: {
chatButton: {
backgroundColor: "#ff0000",
},
chatContainer: {
width: "400px",
},
},
});You can listen for custom actions emitted by the chat assistant:
chat.onAction((action) => {
console.log("Received action:", action);
// Handle the action
});To clean up and disconnect the chat:
chat.destroy();