Booper

Booper: Integrieren Sie Discord-Chat auf Ihrer Webseite

Was ist Booper? Booper ist ein Tool, mit dem Sie ein individuell gestaltetes Chat-Widget auf Ihrer Webseite einbetten können, sodass Sie Ihren Benutzern direkt von Ihrem Discord-Server aus antworten können. Diese nahtlose Integration schließt die Lücke zwischen Ihren Webseitenbesuchern und Ihrer Discord-Community und bietet Benutzern eine bequeme Möglichkeit, Support zu erhalten oder sich an Gesprächen zu beteiligen.

Wie funktioniert Booper? Booper vereinfacht den Prozess der Verbindung Ihrer Webseite mit Ihrem Discord-Server in einem einfachen dreistufigen Prozess:

1. Mit Discord verbinden: Installieren Sie den Booper-Bot auf Ihrem Discord-Server.
2. Wählen Sie Ihren Kanal: Legen Sie einen Forumkanal innerhalb Ihres Discord-Servers mit dem Befehl /chat init [channel] fest. Dieser Kanal ist die Kommunikationszentrale für Ihren Webseiten-Chat.
3. React-Bibliothek importieren: Integrieren Sie die @booper/react-Bibliothek in Ihre React-Anwendung.

Wie verwende ich Booper? Um mit Booper zu beginnen, folgen Sie diesen einfachen Schritten:

1. Installieren Sie den Booper-Bot auf Ihrem Discord-Server, indem Sie auf die Schaltfläche "Zu Discord hinzufügen" klicken.
2. Initialisieren Sie einen Kanal, indem Sie den Befehl /chat init [channel] in Ihrem gewünschten Discord-Forumkanal ausführen.
3. Installieren Sie die React-Bibliothek mit npm oder yarn:

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

4. Importieren Sie die erforderlichen Komponenten und richten Sie die Chat-Oberfläche in Ihrer React-App ein:

   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>
     );
   };
   

Für wen ist Booper geeignet? Booper ist ideal für Unternehmen, Communities und Webseitenbetreiber, die Folgendes suchen:

• Bieten Sie Echtzeit-Kundensupport direkt von ihrem Discord-Server aus.
• Interagieren Sie interaktiver und Community-orientierter mit ihren Webseitenbesuchern.
• Optimieren Sie die Kommunikation zwischen ihrer Webseite und der Discord-Community.
• Bieten Sie Benutzern sofortige Unterstützung, ohne dass diese die Webseite verlassen müssen.

Warum Booper wählen?

• Einfache Integration: Booper bietet einen unkomplizierten Einrichtungsprozess, der es auch Personen mit geringen technischen Kenntnissen zugänglich macht.
• React-Unterstützung: Die native React-Bibliothek gewährleistet eine reibungslose Integration für React-basierte Webseiten.
• Zentralisierte Kommunikation: Verwalten Sie Webseiten-Chats direkt von Discord aus, wodurch die Notwendigkeit reduziert wird, zwischen Plattformen zu wechseln.
• KI-gestützte Antworten (in Kürze verfügbar): Verbessern Sie Ihren Kundensupport mit intelligenten, KI-gesteuerten Antworten auf häufige Fragen.

Was kommt mit KI-Unterstützung? KI-gestützte Antworten sollen in Booper integriert werden, um den Kundensupport durch intelligente, KI-gesteuerte Antworten auf häufige Fragen zu verbessern.