Booper

Booper: 웹사이트에 Discord 채팅 통합

Booper란 무엇인가요? Booper는 웹사이트에 맞춤 설계된 채팅 위젯을 삽입하여 Discord 서버에서 직접 사용자에게 응답할 수 있도록 하는 도구입니다. 이 원활한 통합은 웹사이트 방문자와 Discord 커뮤니티 간의 격차를 해소하여 사용자가 지원을 받거나 대화에 참여할 수 있는 편리한 방법을 제공합니다.

Booper는 어떻게 작동하나요? Booper는 웹사이트를 Discord 서버에 연결하는 프로세스를 따라하기 쉬운 3단계 프로세스로 간소화합니다.

1. Discord에 연결: Discord 서버에 Booper 봇을 설치합니다.
2. 채널 선택: /chat init [channel] 명령을 사용하여 Discord 서버 내에서 포럼 채널을 지정합니다. 이 채널은 웹사이트 채팅의 통신 허브가 됩니다.
3. React 라이브러리 가져오기: @booper/react 라이브러리를 React 애플리케이션에 통합합니다.

Booper는 어떻게 사용하나요? Booper를 시작하려면 다음의 간단한 단계를 따르세요.

1. "Discord에 추가" 버튼을 클릭하여 Discord 서버에 Booper 봇을 설치합니다.
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 지원 응답은 일반적인 질문에 대한 지능적인 AI 기반 응답을 제공하여 고객 지원을 강화하기 위해 Booper에 통합될 예정입니다.