Booper

Booper: Integre o Chat do Discord no Seu Website

O que é o Booper? O Booper é uma ferramenta que permite incorporar um widget de chat personalizado no seu website, permitindo-lhe responder aos seus utilizadores diretamente do seu servidor Discord. Esta integração perfeita colmata a lacuna entre os visitantes do seu website e a sua comunidade Discord, proporcionando uma forma conveniente para os utilizadores obterem suporte ou participarem em conversas.

Como funciona o Booper? O Booper simplifica o processo de conexão do seu website ao seu servidor Discord com um processo fácil de seguir em três passos:

1. Conecte-se ao Discord: Instale o bot Booper no seu servidor Discord.
2. Selecione o Seu Canal: Designe um canal de fórum dentro do seu servidor Discord usando o comando /chat init [channel]. Este canal será o hub de comunicação para o chat do seu website.
3. Importe a Biblioteca React: Integre a biblioteca @booper/react na sua aplicação React.

Como usar o Booper? Para começar a usar o Booper, siga estes passos simples:

1. Instale o bot Booper no seu servidor Discord clicando no botão "Adicionar ao Discord".
2. Inicialize um canal executando o comando /chat init [channel] dentro do canal de fórum Discord desejado.
3. Instale a biblioteca React usando npm ou yarn:

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

4. Importe os componentes necessários e configure a interface de chat na sua aplicação 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">Olá 👋</h1>
               <p className="text-sm text-gray-200">
                 Deixe-nos saber se tem alguma questão!
               </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="Escreva a sua mensagem..."
                 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>
     );
   };
   

Para quem é o Booper? O Booper é ideal para empresas, comunidades e proprietários de websites que procuram:

• Fornecer suporte ao cliente em tempo real diretamente do seu servidor Discord.
• Interagir com os visitantes do seu website de uma forma mais interativa e orientada para a comunidade.
• Agilizar a comunicação entre o seu website e a comunidade Discord.
• Oferecer assistência imediata aos utilizadores sem que eles precisem sair do website.

Por que escolher o Booper?

• Fácil Integração: O Booper oferece um processo de configuração simples, tornando-o acessível mesmo para aqueles com experiência técnica limitada.
• Suporte React: A biblioteca React nativa garante uma integração suave para websites baseados em React.
• Comunicação Centralizada: Gerencie os chats do website diretamente do Discord, reduzindo a necessidade de alternar entre plataformas.
• Respostas Assistidas por AI (Em Breve): Melhore o seu suporte ao cliente com respostas inteligentes, orientadas por AI, para perguntas comuns.

O que está por vir com o suporte de AI? As respostas assistidas por AI estão definidas para serem integradas no Booper, para melhorar o suporte ao cliente, fornecendo respostas inteligentes, orientadas por AI, para perguntas comuns.