Booper

Booper : Intégrez le chat Discord sur votre site web

Qu'est-ce que Booper ? Booper est un outil qui vous permet d'intégrer un widget de chat personnalisé sur votre site web, vous permettant de répondre à vos utilisateurs directement depuis votre serveur Discord. Cette intégration transparente comble le fossé entre les visiteurs de votre site web et votre communauté Discord, offrant ainsi aux utilisateurs un moyen pratique d'obtenir de l'aide ou de participer à des conversations.

Comment fonctionne Booper ? Booper simplifie le processus de connexion de votre site web à votre serveur Discord grâce à un processus simple en trois étapes :

1. Se connecter à Discord: Installez le robot Booper sur votre serveur Discord.
2. Sélectionner votre canal: Désignez un canal de forum dans votre serveur Discord à l'aide de la commande /chat init [channel]. Ce canal sera la plaque tournante de la communication pour le chat de votre site web.
3. Importer la bibliothèque React: Intégrez la bibliothèque @booper/react dans votre application React.

Comment utiliser Booper ? Pour commencer à utiliser Booper, suivez ces étapes simples :

1. Installez le robot Booper sur votre serveur Discord en cliquant sur le bouton « Ajouter à Discord ».
2. Initialisez un canal en exécutant la commande /chat init [channel] dans le canal de forum Discord de votre choix.
3. Installez la bibliothèque React à l'aide de npm ou yarn :

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

4. Importez les composants nécessaires et configurez l'interface de chat dans votre application 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">Salut 👋</h1>
               <p className="text-sm text-gray-200">
                 Faites-nous savoir si vous avez des 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="Tapez votre 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>
     );
   };
   

À qui s'adresse Booper ? Booper est idéal pour les entreprises, les communautés et les propriétaires de sites web qui cherchent à :

• Fournir un support client en temps réel directement depuis leur serveur Discord.
• Interagir avec les visiteurs de leur site web de manière plus interactive et axée sur la communauté.
• Rationaliser la communication entre leur site web et la communauté Discord.
• Offrir une assistance immédiate aux utilisateurs sans qu'ils aient à quitter le site web.

Pourquoi choisir Booper ?

• Intégration facile: Booper offre un processus de configuration simple, le rendant accessible même à ceux qui ont une expertise technique limitée.
• Prise en charge de React: La bibliothèque React native assure une intégration fluide pour les sites web basés sur React.
• Communication centralisée: Gérez les chats de votre site web directement depuis Discord, réduisant ainsi le besoin de basculer entre les plateformes.
• Réponses assistées par l'IA (bientôt disponibles): Améliorez votre support client avec des réponses intelligentes basées sur l'IA aux questions courantes.

Qu'est-ce qui est prévu avec la prise en charge de l'IA ? Les réponses assistées par l'IA devraient être intégrées à Booper, afin d'améliorer le support client en fournissant des réponses intelligentes basées sur l'IA aux questions courantes.