peekobot

Peekobot

Peekobot es un marco de chatbot simple y basado en elecciones para su sitio web, escrito en menos de poco más de 100 líneas de JavaScript estándar ES6 (y algo de CSS).

Hay un bot de ejemplo que puedes ver en la carpeta /docs .

También hay un CodePen con el que puedes jugar.

Características

• Pequeño, simple, sin dependencias (a menos que necesite compatibilidad con navegadores antiguos)

• Defina su conversación como un simple objeto JavaScript

• Conversaciones impulsadas por opciones/botones

• Opciones para vincular a URL y otras partes de la conversación

Compatibilidad del navegador

Utilizo propiedades personalizadas async/await y CSS, por lo que, en términos generales, Internet Explorer y Opera Mini no son compatibles.

Puede utilizar Babel o similar para brindar compatibilidad con IE11 a JavaScript.

También puede insertar manualmente las propiedades personalizadas de CSS si lo desea.

Uso

Peekobot no es un paquete ni una biblioteca. No puedes npm install . Piense en ello como un kit o marco de inicio. La idea es que tomes una copia y hagas lo tuyo con ella.

Si lo usas, ¡escríbeme y muéstrame lo que hiciste! Me encantaría ver qué están haciendo otros con él. ¡Gracias! ?

Para utilizar Peekobot, necesitas:

1. Agregue scripts y estilos de Peekobot a su HTML

2. Agregue el marcado Peekobot a su HTML

3. Define tu conversación

1. Agregue scripts y estilos de Peekobot a su HTML

Descargue los archivos peekobot.js y peekobot.css en su proyecto.

Puede hacer esto tomando el código sin formato de estos archivos de GitHub o clonando el proyecto.

Luego agregue los scripts y estilos de Peekobot a su HTML.

Estos deberían ir en la head :

    <!-- Propiedades personalizadas de Peekobot (variables CSS): ¡configúrelas! --><estilo>:raíz {
            --peekobot-altura: 80vh;
            --peekobot-avatar: URL();
        }</style><!-- Estilos de Peekobot --><link rel="stylesheet" href="peekobot.css">

Tenga en cuenta que puede cambiar la altura de la ventana del chatbot aquí y definir una URL "avatar" para que su chatbot la utilice en el chat. Debe ser pequeño, cuadrado y encajar dentro de la forma de un círculo. Mi CSS se muestra en un cuadrado de 24 px, por lo que una imagen de 48 px x 48 px debería estar bien.

Estos deberían ir en la parte inferior de tu HTML para cargar JavaScript:

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

2. Agregue el marcado Peekobot a su cuerpo HTML

Agregue el marcado Peekobot a su cuerpo HTML donde desea que aparezca el chatbot:

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

3. Define tu conversación

La definición de la conversación debe colocarse en una variable de JavaScript llamada chat . Defino esto en el archivo conversation.js . Puedes insertarlo si lo deseas.

La variable chat debe ser un objeto. En el objeto de chat:

• el primer nombre/clave de propiedad debe ser el número 1

• Los nombres de propiedades posteriores pueden ser números o cadenas: las cadenas le permiten agrupar partes de su conversación.

• cada valor de propiedad es una entrada en la conversación.

Una entrada de conversación debe tener:

• Una propiedad text que es lo que dice el chatbot en este punto de la conversación.

• Cualquiera:

• Una propiedad next , que define la siguiente entrada del chat indicando una clave numérica del objeto del chat y se utiliza cuando el chatbot necesita decir varias cosas por turno sin la intervención del usuario O

• Una propiedad options que define las opciones que puede tomar un usuario. Esta es una matriz de objetos de opción.

Un objeto de opciones debe tener:

• una propiedad text que es la etiqueta para la elección del usuario Y O

• una next propiedad que define la siguiente entrada de chat al indicar una clave de propiedad del objeto de chat y se usa cuando el usuario selecciona esta opción O

• una propiedad url que define un enlace al que se dirigirá al usuario

Un ejemplo simple de objeto de chat es:

 const chat = {1: {text: 'Buenos días señor',next: 'pregunta1'},pregunta1: {text: '¿Quiere té o café con su desayuno?',options: [{text: 'Té', next: 'response1'},{text: 'Café',next: 'response2'}]},response1: {text: 'Espléndido, una buena bebida, por así decirlo yo mismo.'},response2: {text: 'Como desee, señor'}}

Asegurar utf-8

Para utilizar emojis y otros caracteres extendidos, es una buena idea asegurarse de especificar UTF-8.

Probablemente esté haciendo esto de todos modos, o tal vez su servidor web o CMS lo esté haciendo por usted. Pero si no, vale la pena asegurarse de tener la meta correcta en su <head> :

 <meta juego de caracteres="utf-8">

Descargos de responsabilidad

Este es mi primer proyecto de código abierto adecuado. Está bastante bien y funciona, pero probablemente no esté terminado. Mis principales preocupaciones son

• Accesibilidad: Realmente no he analizado la accesibilidad de este código. Probablemente necesite algo de trabajo.

• Seguridad: es muy posible que algún script pueda secuestrar el código del script del bot.

Déjame saber si tienes ideas sobre cómo solucionar estos problemas planteando un problema.

Peeko-¿qué?

Publiqué esto con un poco de prisa y necesitaba un nombre. Es una mezcla de:

• picobot

• cucú

y lo elegí principalmente porque se tomaron todos los demás nombres de "bots pequeños", como picobot, nanobot, etc. Funciona un poco.

Cómprame un café

Si te gusta Peekobot, o si te ha ayudado de alguna manera, no dudes en invitarme a un café.

Créditos/Colaboradores

• Jesper Johansson