Booper

Booper: Integra el chat de Discord en tu sitio web

¿Qué es Booper? Booper es una herramienta que te permite incrustar un widget de chat con diseño personalizado en tu sitio web, lo que te permite responder a tus usuarios directamente desde tu servidor de Discord. Esta perfecta integración cierra la brecha entre los visitantes de tu sitio web y tu comunidad de Discord, proporcionando una forma conveniente para que los usuarios obtengan soporte o participen en conversaciones.

¿Cómo funciona Booper? Booper simplifica el proceso de conectar tu sitio web a tu servidor de Discord con un sencillo proceso de tres pasos:

1. Conéctate a Discord: Instala el bot de Booper en tu servidor de Discord.
2. Selecciona tu canal: Designa un canal de foro dentro de tu servidor de Discord usando el comando /chat init [channel]. Este canal será el centro de comunicación para el chat de tu sitio web.
3. Importa la biblioteca de React: Integra la biblioteca @booper/react en tu aplicación de React.

¿Cómo usar Booper? Para comenzar con Booper, sigue estos sencillos pasos:

1. Instala el bot de Booper en tu servidor de Discord haciendo clic en el botón "Añadir a Discord".
2. Inicializa un canal ejecutando el comando /chat init [channel] dentro del canal de foro de Discord que desees.
3. Instala la biblioteca de React usando npm o yarn:

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

4. Importa los componentes necesarios y configura la interfaz de chat en tu aplicación de 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">Hola 👋</h1>
               <p className="text-sm text-gray-200">
                 ¡Haznos saber si tienes alguna pregunta!
               </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="Escribe tu mensaje..."
                 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 quién es Booper? Booper es ideal para empresas, comunidades y propietarios de sitios web que buscan:

• Proporcionar soporte al cliente en tiempo real directamente desde su servidor de Discord.
• Interactuar con los visitantes de su sitio web de una manera más interactiva e impulsada por la comunidad.
• Agilizar la comunicación entre su sitio web y la comunidad de Discord.
• Ofrecer asistencia inmediata a los usuarios sin necesidad de que abandonen el sitio web.

¿Por qué elegir Booper?

• Fácil integración: Booper ofrece un proceso de configuración sencillo, lo que lo hace accesible incluso para aquellos con experiencia técnica limitada.
• Soporte de React: La biblioteca nativa de React garantiza una integración fluida para los sitios web basados en React.
• Comunicación centralizada: Administra los chats del sitio web directamente desde Discord, lo que reduce la necesidad de cambiar entre plataformas.
• Respuestas asistidas por AI (Próximamente): Mejora tu atención al cliente con respuestas inteligentes impulsadas por la AI a las preguntas comunes.

¿Qué viene con el soporte de AI? Las respuestas asistidas por la AI se integrarán en Booper para mejorar la atención al cliente proporcionando respuestas inteligentes impulsadas por la AI a las preguntas comunes.