peekobot -Download – peekobot Quellcode herunterladen

peekobot

AI-Quellcode

1.0.0

Herunterladen

Peekobot

Peekobot ist ein einfaches, auswahlorientiertes Chatbot-Framework für Ihre Website, das in weniger als etwas mehr als 100 Zeilen ES6-Vanilla-JavaScript (und etwas CSS) geschrieben ist.

Es gibt einen Beispiel-Bot, den Sie im Ordner /docs sehen können.

Es gibt auch einen CodePen, mit dem Sie basteln können.

Merkmale

Klein, einfach, keine Abhängigkeiten (es sei denn, Sie benötigen Kompatibilität mit alten Browsern)
Definieren Sie Ihre Konversation als einfaches JavaScript-Objekt
Auswahl-/tastengesteuerte Gespräche
Optionen zum Verlinken auf URLs sowie andere Teile der Konversation

Browserkompatibilität

Ich verwende async/await und benutzerdefinierte CSS-Eigenschaften, daher werden Internet Explorer und Opera Mini im Großen und Ganzen nicht unterstützt.

Sie können Babel oder ähnliches verwenden, um IE11-Kompatibilität in das JavaScript zu bringen.

Sie können die benutzerdefinierten CSS-Eigenschaften auch manuell einbinden, wenn Sie möchten.

Verwendung

Peekobot ist kein Paket oder eine Bibliothek. Sie können es nicht npm install . Betrachten Sie es als Starter-Kit oder Framework. Die Idee ist, dass Sie eine Kopie davon nehmen und Ihr eigenes Ding damit machen.

Wenn Sie es verwenden, schreiben Sie mir bitte eine Nachricht und zeigen Sie mir, was Sie gemacht haben! Ich würde gerne sehen, was andere damit machen. Danke! ?

Um Peekobot zu verwenden, müssen Sie:

Fügen Sie Peekobot-Skripte und -Stile zu Ihrem HTML hinzu
Fügen Sie Peekobot-Markup zu Ihrem HTML hinzu
Definieren Sie Ihr Gespräch

1. Fügen Sie Peekobot-Skripte und -Stile zu Ihrem HTML hinzu

Laden Sie die Dateien peekobot.js und peekobot.css in Ihr Projekt herunter.

Sie können dies tun, indem Sie den Rohcode für diese Dateien von GitHub abrufen oder das Projekt klonen.

Fügen Sie dann die Peekobot-Skripte und -Stile zu Ihrem HTML hinzu.

Diese sollten in den head gehen:

    <!-- Benutzerdefinierte Peekobot-Eigenschaften (CSS-Variablen) – legen Sie diese fest! --><style>:root {
            --peekobot-height: 80vh;
            --peekobot-avatar: url();
        }</style><!-- Peekobot-Stile --><link rel="stylesheet" href="peekobot.css">

Beachten Sie, dass Sie hier die Höhe des Chatbot-Fensters ändern und eine „Avatar“-URL definieren können, die Ihr Chatbot im Chat verwenden soll. Dieser sollte klein und quadratisch sein und in eine Kreisform passen. Mein CSS wird mit 24 Pixel im Quadrat angezeigt, daher sollte ein 48 x 48 Pixel großes Bild in Ordnung sein.

Diese sollten am Ende Ihres HTML-Codes stehen, um das JavaScript zu laden:

    <script src="conversation.js"></script><script src="peekobot.js"></script>

2. Fügen Sie Peekobot-Markup zu Ihrem HTML-Text hinzu

Fügen Sie das Peekobot-Markup zu Ihrem HTML-Text an der Stelle hinzu, an der der Chatbot erscheinen soll:

    <div id="peekobot-container"><div id="peekobot-inner"><div id="peekobot"></div></div></div>

3. Definieren Sie Ihr Gespräch

Die Konversationsdefinition sollte in einer JavaScript-Variablen namens chat platziert werden. Ich definiere dies in der Datei conversation.js . Sie können es einbinden, wenn Sie möchten.

Die chat Variable sollte ein Objekt sein. Im Chat-Objekt:

Der erste Eigenschaftsname/Schlüssel sollte die Nummer 1 sein
Nachfolgende Eigenschaftsnamen können Zahlen oder Zeichenfolgen sein. Mit Zeichenfolgen können Sie Teile Ihrer Konversation gruppieren
Jeder Eigenschaftswert ist ein Eintrag in der Konversation.

Ein Konversationseintrag sollte Folgendes enthalten:

Eine text , die der Chatbot an diesem Punkt der Konversation sagt
Entweder:

Eine next Eigenschaft, die den nächsten Chat-Eintrag durch Angabe eines numerischen Schlüssels des Chat-Objekts definiert und verwendet wird, wenn der Chatbot nacheinander mehrere Dinge ohne Eingabe des Benutzers sagen muss ODER
Eine options , die die Auswahlmöglichkeiten definiert, die ein Benutzer treffen kann. Dies ist ein Array von Optionsobjekten.

Ein Optionsobjekt sollte Folgendes haben:

eine text , die die Bezeichnung für die Auswahl des Benutzers UND EITHER darstellt
eine next Eigenschaft, die den nächsten Chat-Eintrag durch Angabe eines Eigenschaftsschlüssels des Chat-Objekts definiert und verwendet wird, wenn der Benutzer diese Option ODER auswählt
Eine url -Eigenschaft, die einen Link definiert, zu dem der Benutzer weitergeleitet werden soll

Ein einfaches Beispiel für ein Chat-Objekt ist:

 const chat = {1: {text: 'Guten Morgen, Sir',next: 'question1'},question1: {text: 'Möchten Sie Tee oder Kaffee zum Frühstück?',options: [{text: 'Tee', next: 'response1'},{text: 'Coffee',next: 'response2'}]},response1: {text: 'Splendid – ein feines Getränk wenn ich es selbst sage.'},response2: {text: 'Wie Sie wünschen, Sir'}}

Stellen Sie UTF-8 sicher

Um Emojis und andere erweiterte Zeichen zu verwenden, sollten Sie sicherstellen, dass Sie UTF-8 angeben.

Wahrscheinlich tun Sie dies sowieso, oder vielleicht erledigt Ihr Webserver oder Ihr CMS dies für Sie. Aber wenn nicht, lohnt es sich, sicherzustellen, dass Sie das richtige meta Tag in Ihrem <head> haben:

 <meta charset="utf-8">

Haftungsausschluss

Dies ist mein erstes richtiges Open-Source-Projekt. Es ist einigermaßen ordentlich und funktioniert, aber es ist wahrscheinlich noch nicht fertig. Meine Hauptanliegen sind

Barrierefreiheit: Ich habe mir die Barrierefreiheit dieses Codes nicht wirklich angesehen. Es braucht wahrscheinlich etwas Arbeit
Sicherheit – es ist durchaus möglich, dass ein Skript den Skriptcode des Bots kapern könnte.

Lassen Sie mich wissen, wenn Sie Ideen haben, wie Sie diese Probleme beheben können, indem Sie ein Problem ansprechen.

Peeko-was?

Ich habe es etwas eilig veröffentlicht und brauchte einen Namen. Es ist eine Mischung aus:

Picobot
Guck mal

und ich habe es hauptsächlich gewählt, weil alle anderen „kleinen Bot“-Namen, wie Picobot, Nanobot usw., übernommen wurden. Es funktioniert irgendwie.