Eshal 聊天部件
一个美丽的,生产准备的聊天部件, 带有暗模式支持, 快速提问, 和平滑的动画.
特征
- 🎨 美丽的设计 - 受Intercom启发的现代专业UI
- 🌓 黑暗模式 - 有平稳过渡的全暗模式支持
- ⚡ 快速问题 - 用户的预定义可点击问题
- 🤖 博特·阿凡达 - 助理信息自定义的模拟器
- 📱 响应 - 在所有设备上完美工作
- 🚀 轻巧 - 最佳捆绑尺寸和性能
快速启动
安装
npm install
npm run build
使用量
<!-- Include the widget -->
<link rel="stylesheet" href="dist/index.css">
<script src="dist/chat-widget.min.js"></script>
<script>
ChatWidget.init({
companyName: "Your Company",
companyLogo: "https://example.com/logo.png",
primaryColor: "#2563eb",
quickQuestions: [
"What are your business hours?",
"How can I contact support?",
"What services do you offer?"
],
apiBaseUrl: "https://your-api.com",
organizationId: "your-org-id"
});
</script>
配置
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
companyName | 字符串 | "支援队" | 公司/小组名称 |
companyLogo | 字符串 | 无效 | 公司标志 URL |
primaryColor | 字符串 | "#2563eb" (中文(简体) ) | 主要品牌颜色 |
quickQuestions | 字符串 [] | [ | 一系列快速问题 |
darkMode | 布尔 | 虚假 | 启用暗模式 |
position | 字符串 | "从下到上" | 部件位置 |
apiBaseUrl | 字符串 | 无效 | API 端点 URL |
organizationId | 字符串 | 无效 | 组织标识 |
API 方法
// Open the widget
ChatWidget.open();
// Close the widget
ChatWidget.close();
// Toggle theme
ChatWidget.toggleTheme();
// Update configuration
ChatWidget.updateConfig({ primaryColor: "#ff0000" });
// Send message programmatically
ChatWidget.sendMessage("Hello!");
// Destroy the widget
ChatWidget.destroy();
发展
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Generate TypeScript definitions
npm run generate-types
许可证
麻省理工学院