Flowise 嵌入

在您的网站上显示 Flowise 聊天机器人的 JavaScript 库

Flowise

安装：

yarn install

开发：

yarn dev

构建：

yarn build

嵌入到您的 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>

全页面

<script type="module">
  import Chatbot from './web.js';
  Chatbot.initFull({
    chatflowid: '<chatflowid>',
    apiHost: 'http://localhost:3000',
  });
</script>
<flowise-fullchatbot></flowise-fullchatbot>

要启用全屏，请给 <code>body</code> 样式添加 margin: 0，并确保没有设置高度和宽度

<body style="margin: 0">
  <script type="module">
    import Chatbot from './web.js';
    Chatbot.initFull({
      chatflowid: '<chatflowid>',
      apiHost: 'http://localhost:3000',
      theme: {
        chatWindow: {
          // height: 700, 不要设置高度
          // width: 400, 不要设置宽度
        },
      },
    });
  </script>
</body>

配置

您还可以使用不同的配置来自定义聊天机器人

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
  Chatbot.init({
    chatflowid: '91e9c803-5169-4db9-8207-3c0915d71c5f',
    apiHost: 'http://localhost:3000',
    chatflowConfig: {
      // topK: 2
    },
    observersConfig: {
      // (可选) 允许您根据聊天机器人内的信号观察在父级中执行代码。
      // 提交给机器人的用户输入字段（当机器人重置时为""）
      observeUserInput: (userInput) => {
        console.log({ userInput });
      },
      // 机器人消息堆栈已更改
      observeMessages: (messages) => {
        console.log({ messages });
      },
      // 机器人加载信号已更改
      observeLoading: (loading) => {
        console.log({ loading });
      },
    },
    theme: {
      button: {
        backgroundColor: '#3B81F6',
        right: 20,
        bottom: 20,
        size: 48, // small | medium | large | number
        dragAndDrop: true,
        iconColor: 'white',
        customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
        autoWindowOpen: {
          autoOpen: true, //控制自动打开窗口的参数
          openDelay: 2, // 可选参数，延迟时间（秒）
          autoOpenOnMobile: false, //控制移动设备上自动打开窗口的参数
        },
      },
      tooltip: {
        showTooltip: true,
        tooltipMessage: '你好 👋!',
        tooltipBackgroundColor: 'black',
        tooltipTextColor: 'white',
        tooltipFontSize: 16,
      },
      chatWindow: {
        showTitle: true,
        showAgentMessages: true,
        title: 'Flowise 机器人',
        titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
        welcomeMessage: '你好！这是自定义欢迎消息',
        errorMessage: '这是自定义错误消息',
        backgroundColor: '#ffffff',
        backgroundImage: '输入图片路径或链接', // 如果设置，这将覆盖聊天窗口的背景颜色。
        height: 700,
        width: 400,
        fontSize: 16,
        starterPrompts: ['什么是机器人？', '你是谁？'], // 它会覆盖由聊天流程设置的起始提示
        starterPromptFontSize: 15,
        botMessage: {
          backgroundColor: '#f7f8ff',
          textColor: '#303235',
          showAvatar: true,
          avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png',
        },
        userMessage: {
          backgroundColor: '#3B81F6',
          textColor: '#ffffff',
          showAvatar: true,
          avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png',
        },
        textInput: {
          placeholder: '输入您的问题',
          backgroundColor: '#ffffff',
          textColor: '#303235',
          sendButtonColor: '#3B81F6',
          maxChars: 50,
          maxCharsWarningMessage: '您超出了字符限制。请输入少于50个字符。',
          autoFocus: true, // 如果不使用，移动设备上禁用自动聚焦，桌面设备上启用。true 在两者上都启用，false 在两者上都禁用。
          sendMessageSound: true,
          // sendSoundLocation: "send_message.mp3", // 如果不使用，当 sendSoundMessage 为 true 时，将播放默认音效。
          receiveMessageSound: true,
          // receiveSoundLocation: "receive_message.mp3", // 如果不使用，当 receiveSoundMessage 为 true 时，将播放默认音效。
        },
        feedback: {
          color: '#303235',
        },
        footer: {
          textColor: '#303235',
          text: '由',
          company: 'Flowise',
          companyLink: 'https://flowiseai.com',
        }
      },
    },
  });
</script>