peekobot

Peekobot

Peekobot est un framework de chatbot simple et axé sur les choix pour votre site Web, écrit en moins d' un peu plus de 100 lignes de JavaScript ES6 vanilla (et quelques CSS).

Il existe un exemple de bot que vous pouvez voir dans le dossier /docs .

Il existe également un CodePen avec lequel vous pouvez bricoler.

Caractéristiques

• Petites, simples, zéro dépendance (sauf si vous avez besoin d'une compatibilité avec un ancien navigateur)

• Définissez votre conversation comme un simple objet JavaScript

• Conversations basées sur des choix/boutons

• Options pour créer des liens vers des URL ainsi que d'autres parties de la conversation

Compatibilité du navigateur

J'utilise les propriétés personnalisées async/await et CSS, donc, d'une manière générale, Internet Explorer et Opera Mini ne sont pas pris en charge.

Vous pouvez utiliser Babel ou similaire pour apporter la compatibilité IE11 au JavaScript.

Vous pouvez également intégrer manuellement les propriétés personnalisées CSS si vous le souhaitez.

Usage

Peekobot n'est pas un package ou une bibliothèque. Vous ne pouvez pas l' npm install . Considérez-le comme un kit de démarrage ou un cadre. L’idée est que vous en preniez une copie et que vous fassiez votre propre travail avec.

Si vous l'utilisez, écrivez-moi et montrez-moi ce que vous avez fait ! J'aimerais voir ce que les autres en font. Merci! ?

Pour utiliser Peekobot, vous devez :

1. Ajoutez des scripts et des styles Peekobot à votre HTML

2. Ajoutez le balisage Peekobot à votre code HTML

3. Définissez votre conversation

1. Ajoutez des scripts et des styles Peekobot à votre HTML

Téléchargez les fichiers peekobot.js et peekobot.css dans votre projet.

Vous pouvez le faire en récupérant le code brut de ces fichiers sur GitHub ou en clonant le projet.

Ajoutez ensuite les scripts et styles Peekobot à votre HTML.

Ceux-ci devraient aller dans la head :

    <!-- Propriétés personnalisées de Peekobot (variables CSS) - définissez-les ! --><style>:racine {
            --hauteur du peekobot : 80vh ;
            --peekobot-avatar : url();
        }</style><!-- Styles Peekobot --><link rel="stylesheet" href="peekobot.css">

Notez que vous pouvez modifier ici la hauteur de la fenêtre du chatbot et définir une URL « avatar » à utiliser dans le chat par votre chatbot. Celui-ci doit être petit, carré et s’insérer dans une forme de cercle. Mon CSS s'affiche sur un carré de 24 px, donc une image de 48 px x 48 px devrait suffire.

Ceux-ci doivent se trouver au bas de votre code HTML pour charger le JavaScript :

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

2. Ajoutez le balisage Peekobot à votre corps HTML

Ajoutez le balisage Peekobot à votre corps HTML à l'endroit où vous souhaitez que le chatbot apparaisse :

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

3. Définissez votre conversation

La définition de la conversation doit être placée dans une variable JavaScript appelée chat . Je définis cela dans le fichier conversation.js . Vous pouvez l'intégrer si vous le souhaitez.

La variable chat doit être un objet. Dans l'objet de discussion :

• le premier nom/clé de propriété doit être le numéro 1

• les noms de propriétés suivants peuvent être des nombres ou des chaînes - les chaînes vous permettent de regrouper des parties de votre conversation

• chaque valeur de propriété est une entrée dans la conversation.

Une entrée de conversation doit avoir :

• Une propriété text correspondant à ce que dit le chatbot à ce stade de la conversation

• Soit:

• Une propriété next , qui définit la prochaine entrée de discussion en indiquant une clé numérique de l'objet de discussion et est utilisée lorsque le chatbot doit dire plusieurs choses à tour de rôle sans intervention de l'utilisateur OU

• Propriété options qui définit les choix qu'un utilisateur peut faire. Il s'agit d'un tableau d'objets d'option.

Un objet options doit avoir :

• une propriété text qui est l'étiquette du choix de l'utilisateur ET SOIT

• une propriété next qui définit la prochaine entrée de discussion en indiquant une clé de propriété de l'objet de discussion et est utilisée lorsque l'utilisateur sélectionne cette option OU

• une propriété url qui définit un lien vers lequel l'utilisateur doit être redirigé

Un exemple simple d'objet de discussion est :

 const chat = {1 : {texte : 'Bonjour monsieur',suivant : 'question1'},question1 : {texte : 'Voulez-vous du thé ou du café avec votre petit-déjeuner ?',options : [{texte : 'Thé', suivant : 'réponse1'},{texte : 'Café',suivant : 'réponse2'}]},réponse1 : {texte : 'Splendide - une bonne boisson si je le dis moi-même.'},response2 : {texte : 'Comme vous le souhaitez, monsieur'}}

Assurer utf-8

Pour utiliser des emoji et d'autres caractères étendus, c'est une bonne idée de vous assurer que vous spécifiez UTF-8.

Vous le faites probablement de toute façon, ou peut-être que votre serveur Web ou votre CMS le fait pour vous. Mais sinon, assurez-vous d'avoir la bonne balise meta dans votre <head> :

 <méta charset="utf-8">

Avis de non-responsabilité

C'est mon premier véritable projet open source. C'est plutôt sympa et ça marche, mais ce n'est probablement pas terminé. Mes principales préoccupations sont

• Accessibilité : je n'ai pas vraiment regardé l'accessibilité de ce code. Cela nécessite probablement du travail

• Sécurité : il est tout à fait possible qu'un script détourne le code du script du bot.

Faites-moi savoir si vous avez des idées sur la façon de résoudre ces problèmes en soulevant un problème.

Coucou-quoi ?

J'ai publié ceci un peu précipitamment et j'avais besoin d'un nom. C'est un mélange de :

• picobot

• coucou

et je l'ai surtout choisi parce que tous les autres noms de "petits robots", tels que picobot, nanobot, etc., ont été pris. Ça marche un peu.

Achetez-moi un café

Si vous aimez Peekobot, ou si cela vous a aidé d'une manière ou d'une autre, n'hésitez pas à m'offrir un café.

Crédits/Contributeurs

• Jesper Johansson