FlowiseChatEmbed: 为您的网站轻松集成智能聊天机器人

FlowiseChatEmbed: 为您的网站打造智能交互体验

在当今数字化时代,为网站添加智能聊天功能已成为提升用户体验的重要手段。FlowiseChatEmbed作为一款强大而灵活的JavaScript库,为开发者提供了一种简单而高效的方式,将Flowise聊天机器人无缝集成到网站中。本文将详细介绍FlowiseChatEmbed的特性、使用方法以及自定义选项,帮助您充分发挥这个工具的潜力。

FlowiseChatEmbed简介

FlowiseChatEmbed是由FlowiseAI团队开发的开源项目,旨在简化Flowise聊天机器人在网站上的部署过程。它提供了一套易于使用的API,允许开发者快速将聊天功能嵌入到任何网页中,无需复杂的配置或后端设置。

该项目在GitHub上获得了广泛的关注,截至目前已有304颗星和1.3k次分叉,这充分证明了其在开发者社区中的受欢迎程度。FlowiseChatEmbed支持多种部署模式,包括弹出式窗口和全页面模式,能够满足不同网站的需求。

FlowiseChatEmbed演示

主要特性

简单集成: 只需几行代码即可将聊天机器人添加到您的网站。
高度可定制: 提供丰富的配置选项,允许您自定义聊天窗口的外观和行为。
响应式设计: 自适应不同设备尺寸,确保在桌面和移动设备上都能提供良好的用户体验。
实时交互: 支持实时消息传递,为用户提供即时响应。
多种部署模式: 支持弹出式和全页面两种模式,适应不同的使用场景。
TypeScript支持: 使用TypeScript开发,提供类型安全和更好的开发体验。

快速开始

要开始使用FlowiseChatEmbed,您只需要按照以下步骤操作:

安装: 使用yarn或npm安装FlowiseChatEmbed:
```
yarn install flowise-embed
```

基本使用: 在您的HTML文件中添加以下代码:

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
  Chatbot.init({
    chatflowid: '<您的chatflowid>',
    apiHost: 'http://localhost:3000',
  });
</script>

确保将<您的chatflowid>替换为您实际的Flowise聊天流ID,并将apiHost设置为您的Flowise服务器地址。

高级配置

FlowiseChatEmbed提供了丰富的配置选项,允许您自定义聊天机器人的外观和行为。以下是一些常用的配置项:

聊天按钮样式:

button: {
  backgroundColor: '#3B81F6',
  right: 20,
  bottom: 20,
  size: 'medium',
  iconColor: 'white',
  customIconSrc: 'https://example.com/custom-icon.svg'
}

聊天窗口样式:

chatWindow: {
  title: 'AI助手',
  welcomeMessage: '您好!我是您的AI助手,有什么可以帮您的吗?',
  backgroundColor: '#ffffff',
  height: 700,
  width: 400,
  fontSize: 16
}

消息样式:

botMessage: {
  backgroundColor: '#f7f8ff',
  textColor: '#303235',
  showAvatar: true,
  avatarSrc: 'https://example.com/bot-avatar.png'
},
userMessage: {
  backgroundColor: '#3B81F6',
  textColor: '#ffffff',
  showAvatar: true,
  avatarSrc: 'https://example.com/user-avatar.png'
}

输入框样式:

textInput: {
  placeholder: '请输入您的问题...',
  backgroundColor: '#ffffff',
  textColor: '#303235',
  sendButtonColor: '#3B81F6',
  maxChars: 100
}

全页面模式

除了弹出式窗口,FlowiseChatEmbed还支持全页面模式,适合需要更大交互空间的场景。要使用全页面模式,您需要在HTML中添加<flowise-fullchatbot></flowise-fullchatbot>标签,并使用Chatbot.initFull()方法初始化:

<body style="margin: 0">
  <script type="module">
    import Chatbot from './web.js';
    Chatbot.initFull({
      chatflowid: '<您的chatflowid>',
      apiHost: 'http://localhost:3000',
      theme: {
        chatWindow: {
          // 在这里配置全页面模式的样式
        }
      }
    });
  </script>
  <flowise-fullchatbot></flowise-fullchatbot>
</body>