peekobot

Peekobot

Peekobot é uma estrutura de chatbot simples e baseada em escolhas para o seu site, escrita em menos de 100 linhas de JavaScript vanilla ES6 (e um pouco de CSS).

Há um exemplo de bot que você pode ver na pasta /docs .

Há também um CodePen com o qual você pode mexer.

Características

• Dependências pequenas, simples e zero (a menos que você precise de compatibilidade com navegador antigo)

• Defina sua conversa como um simples objeto JavaScript

• Conversas orientadas por escolha/botão

• Opções para vincular a URLs, bem como outras partes da conversa

Compatibilidade do navegador

Eu uso propriedades personalizadas async/await e CSS, portanto, de modo geral, o Internet Explorer e o Opera Mini não são suportados.

Você pode usar Babel ou similar para trazer compatibilidade do IE11 para o JavaScript.

Você também pode incorporar manualmente as propriedades personalizadas CSS, se desejar.

Uso

Peekobot não é um pacote ou biblioteca. Você não pode npm install . Pense nisso como um kit inicial ou estrutura. A ideia é que você pegue uma cópia e faça o que quiser com ela.

Se você usar, por favor me escreva e me mostre o que você fez! Eu adoraria ver o que os outros estão fazendo com isso. Obrigado! ?

Para usar o Peekobot, você precisa:

1. Adicione scripts e estilos Peekobot ao seu HTML

2. Adicione a marcação Peekobot ao seu HTML

3. Defina sua conversa

1. Adicione scripts e estilos Peekobot ao seu HTML

Baixe os arquivos peekobot.js e peekobot.css em seu projeto.

Você pode fazer isso obtendo o código bruto desses arquivos no GitHub ou clonando o projeto.

Em seguida, adicione os scripts e estilos do Peekobot ao seu HTML.

Estes devem entrar na head :

    <!-- Propriedades personalizadas do Peekobot (variáveis ​​CSS) - defina-as! --><estilo>:raiz {
            --peekobot-altura: 80vh;
            --peekobot-avatar:url();
        }</style><!-- Estilos Peekobot --><link rel="stylesheet" href="peekobot.css">

Observe que você pode alterar a altura da janela do chatbot aqui e definir uma URL "avatar" para ser usada no chat pelo seu chatbot. Deve ser pequeno, quadrado e caber em um círculo. Meu CSS é exibido em um quadrado de 24px, então uma imagem de 48px x 48px deve servir.

Eles devem estar na parte inferior do seu HTML para carregar o JavaScript:

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

2. Adicione a marcação Peekobot ao seu corpo HTML

Adicione a marcação Peekobot ao corpo HTML onde deseja que o chatbot apareça:

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

3. Defina sua conversa

A definição da conversa deve ser colocada em uma variável JavaScript chamada chat . Eu defino isso no arquivo conversation.js . Você pode incorporá-lo se quiser.

A variável chat deve ser um objeto. No objeto de bate-papo:

• o primeiro nome/chave da propriedade deve ser o número 1

• os nomes das propriedades subsequentes podem ser números ou strings - as strings permitem agrupar partes da sua conversa

• cada valor de propriedade é uma entrada na conversa.

Uma entrada de conversa deve ter:

• Uma propriedade text que é o que o chatbot diz neste ponto da conversa

• Qualquer:

• Uma propriedade next , que define a próxima entrada de chat informando uma chave numérica do objeto de chat e é usada quando o chatbot precisa dizer várias coisas sem entrada do usuário OU

• Uma propriedade options que define as escolhas que um usuário pode fazer. Esta é uma matriz de objetos de opção.

Um objeto de opções deve ter:

• uma propriedade text que é o rótulo para a escolha do usuário E TANTO

• uma next propriedade que define a próxima entrada de chat informando uma chave de propriedade do objeto de chat e é usada quando o usuário seleciona esta opção OU

• uma propriedade url que define um link para o usuário ser levado

Um exemplo simples de objeto de chat é:

 const chat = {1: {text: 'Bom dia senhor',next: 'question1'},question1: {text: 'Gostaria de chá ou café no café da manhã?',options: [{text: 'Chá', next: 'response1'},{text: 'Café',next: 'response2'}]},response1: {text: 'Esplêndido - uma boa bebida, se assim posso dizer eu mesmo.'},response2: {text: 'Como desejar, senhor'}}

Certifique-se de utf-8

Para usar emojis e outros caracteres estendidos, é uma boa ideia garantir que você está especificando UTF-8.

Você provavelmente está fazendo isso de qualquer maneira, ou talvez seu servidor web ou CMS esteja fazendo isso por você. Mas se não, vale a pena ter certeza de que você tem a meta tag correta em seu <head> :

 <meta charset="utf-8">

Isenções de responsabilidade

Este é meu primeiro projeto de código aberto adequado. É bem legal e funciona, mas provavelmente não está concluído. Minhas principais preocupações são

• Acessibilidade: eu realmente não olhei para a acessibilidade deste código. Provavelmente precisa de algum trabalho

• Segurança - é perfeitamente possível que algum script possa sequestrar o código de script do bot.

Deixe-me saber se você tem ideias sobre como consertar essas coisas levantando um problema.

Peeko-o quê?

Lancei isso com um pouco de pressa e precisava de um nome. É uma mistura de:

• picobot

• esconde-esconde

e eu o escolhi principalmente porque todos os outros nomes de "pequenos bots", como picobot, nanobot, etc, foram usados. Meio que funciona.

Compre-me um café

Se você gosta do Peekobot, ou se ele te ajudou de alguma forma, fique à vontade para me pagar um café.

Créditos/Contribuintes

• Jesper Johansson