Booper

Booper：在您的网站上集成 Discord 聊天

什么是 Booper？ Booper 是一款工具，允许您在您的网站上嵌入自定义设计的聊天小部件，使您能够直接从您的 Discord 服务器回复您的用户。这种无缝集成弥合了您的网站访客和您的 Discord 社区之间的差距，为用户提供了一种方便的方式来获得支持或参与对话。

Booper 如何工作？ Booper 通过一个简单易懂的三个步骤的过程，简化了将您的网站连接到您的 Discord 服务器的过程：

1. 连接到 Discord： 在您的 Discord 服务器上安装 Booper 机器人。
2. 选择您的频道： 使用 /chat init [channel] 命令在您的 Discord 服务器中指定一个论坛频道。此频道将成为您网站聊天的通信中心。
3. 导入 React 库： 将 @booper/react 库集成到您的 React 应用程序中。

如何使用 Booper？ 要开始使用 Booper，请按照以下简单步骤操作：

1. 单击“添加到 Discord”按钮，将 Booper 机器人安装到您的 Discord 服务器。
2. 通过在您所需的 Discord 论坛频道中运行 /chat init [channel] 命令来初始化一个频道。
3. 使用 npm 或 yarn 安装 React 库：

   npm install @booper/react
   # or
   yarn add @booper/react
   

4. 导入必要的组件并在您的 React 应用程序中设置聊天界面：

   import React from 'react';
   import {ChatProvider, Frame, Launcher, useChat} from '@booper/react';
   
   const Chat = () => {
     const scrollRef = React.useRef<HTMLDivElement | null>(null);
     const [content, setMessageContent] = React.useState('');
     const {messages, open, toggle, send, refresh} = useChat();
   
     React.useEffect(() => {
       scrollRef.current?.scrollIntoView();
     }, [messages.length]);
   
     const handleSendMessage = async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       setMessageContent('');
       await send({content});
       await refresh();
     };
   
     return (
       <>
         <Frame open={open}>
           <div className="flex h-[70vh] w-96 flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-lg">
             <div className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-700 px-4 py-4 text-gray-100 dark:border-gray-700">
               <h1 className="mt-1 text-xl font-bold text-white">Hi there 👋</h1>
               <p className="text-sm text-gray-200">
                 Let us know if you have any questions!
               </p>
             </div>
             <ul className="flex-1 overflow-scroll border-b p-4">
               {messages.map((message, index) => {
                 const isMe = message.source === 'chat'; // other sources: 'discord' and 'bot'
                 const next = messages[index + 1];
                 const isNextSame = next && next.source === message.source;
   
                 return (
                   <li
                     key={index}
                     className={`flex ${
                       isMe ? 'justify-end pl-8' : 'justify-start pr-8'
                     } ${isNextSame ? 'mb-1' : 'mb-3'}`}
                   >
                     <div
                       className={`rounded-md border px-3 py-2 text-sm ${
                         isMe ? 'bg-gray-800 text-white' : 'bg-gray-200'
                       }`}
                     >
                       {message.content}
                     </div>
                   </li>
                 );
               })}
               <div ref={scrollRef} />
             </ul>
             <form onSubmit={handleSendMessage}>
               <input
                 className="w-full border-none bg-white p-4 text-sm outline-none"
                 placeholder="Type your message..."
                 value={content}
                 onChange={(e) => setMessageContent(e.target.value)}
               />
             </form>
           </div>
         </Frame>
         <Launcher open={open}>
           <button
             className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-800 text-sm font-medium text-gray-50 transition-colors hover:bg-gray-800/90 disabled:pointer-events-none disabled:opacity-70"
             onClick={toggle}
           >
             {open ? (
               <XIcon className="h-5 w-5 animate-in fade-in-0 duration-200" />
             ) : (
               <ChatIcon className="h-5 w-5 animate-in fade-in-0 duration-200" />
             )}
           </button>
         </Launcher>
       </>
     );
   };
   
   export default function App() {
     return (
       <ChatProvider appId={YOUR_APP_ID}>
         <Chat />
       </ChatProvider>
     );
   };
   

Booper 适合哪些人？ Booper 非常适合希望以下目的的企业、社区和网站所有者：

• 直接从其 Discord 服务器提供实时客户支持。
• 以更具互动性和社区驱动的方式与网站访客互动。
• 简化其网站和 Discord 社区之间的通信。
• 为用户提供即时帮助，而无需他们离开网站。

为什么选择 Booper？

• 易于集成： Booper 提供了简单的设置过程，即使对于那些技术专业知识有限的人来说，也可以轻松访问。
• React 支持： 原生 React 库确保了基于 React 的网站的顺利集成。
• 集中式通信： 直接从 Discord 管理网站聊天，从而减少了在平台之间切换的需要。
• AI 辅助响应（即将推出）： 通过智能的 AI 驱动的对常见问题的响应来增强您的客户支持。

AI 支持会带来什么？ AI 辅助响应将集成到 Booper 中，通过为常见问题提供智能的 AI 驱动的回复来增强客户支持。